test/markArea.html - master - githubmirror/echarts

test/markArea.html
658 строк24 KB
Ovilia
fix(markArea): fix markArea position when axis is with alignWithLabel
16 янв 2024, 11:40
16 янв 2024, 11:403a056bd

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/testHelper.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <div id="main0"></div>
        <div id="main-align"></div>
        <div id="main-overlapping"></div>
        <div id="main1"></div>
        <div id="main2"></div>
        <script>

            require([
                'echarts'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];

                for (var i = 0; i < 10; i++) {
                    xAxisData.push('类目' + i);
                    data1.push(+Math.random().toFixed(2));
                    data2.push(+Math.random().toFixed(2));
                }

                option = {
                    legend: {
                        data: ['line', 'line2']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData
                    },
                    yAxis: {
                        max: 5
                    },
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 6,
                        data: data1,

                        markArea: {
                            itemStyle: {
                                // normal: {
                                //     color: 'red'
                                // },
                                emphasis: {
                                    color: 'yellow'
                                }
                            },
                            label: {
                                normal: {
                                    // position: 'right'
                                }
                            },
                            data: [
                                [{
                                    name: 'x 3 - 5',
                                    xAxis: 3
                                }, {
                                    xAxis: 5
                                }]
                            ]
                        }
                    }, {
                        name: 'line2',
                        type: 'line',
                        stack: 'all',
                        symbolSize: 6,
                        data: data2,

                        markArea: {
                            label: {
                                normal: {
                                    position: 'right'
                                }
                            },
                            data: [
                                [{
                                    name: 'y 0.5 - 0.7',
                                    yAxis: 0.5
                                }, {
                                    yAxis: 0.7
                                }],
                                [{
                                    name: 'This text should not be displayed\nwhen out of range',
                                    yAxis: 3
                                }, {
                                    yAxis: 3.5
                                }]
                            ]
                        }
                    }],
                    dataZoom: {
                        yAxisIndex: 0,
                        startValue: 0,
                        endValue: 2,
                        right: 250
                    },
                    grid: {
                        right: 300
                    }
                };

                var chart = testHelper.create(echarts, 'main0', {
                    option: option,
                    title: 'MarkArea with grid filter'
                });
            });

        </script>
        <script>

            require([
                'echarts'
            ], function (echarts) {

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'bar',
                        markArea: {
                            data: [
                                [
                                    {
                                        xAxis: 'Tue'
                                    },
                                    {
                                        xAxis: 'Fri'
                                    }
                                ]
                            ]
                        }
                        }
                    ]
                };
                var chart = testHelper.create(echarts, 'main-align', {
                    option: option,
                    title: ['MarkArea with alignWithLabel', 'MarkArea should be Tue ~ Fri']
                });
            });

        </script>
        <script>

            require([
                'echarts'
            ], function (echarts) {
                option = {
                    xAxis: {
                        type: 'category',
                        data: Array.from(Array(2017).keys())
                    },
                    yAxis: { type: 'value', show: true, max: 100 },
                    series: [
                        {
                        type: 'bar',
                        data: [
                            [65, 100, 0],
                            [130, 100, 1],
                            [196, 100, 2],
                            [260, 100, 3],
                            [325, 100, 4],
                            [391, 100, 5],
                            [456, 100, 6],
                            [522, 100, 7],
                            [1117, 100, 8],
                            [1189, 100, 9],
                            [1254, 100, 10],
                            [1319, 100, 11],
                            [1420, 100, 12],
                            [1485, 100, 13],
                            [1551, 100, 14],
                            [1616, 100, 15],
                            [1750, 100, 16],
                            [1817, 100, 17],
                            [1882, 100, 18],
                            [1947, 100, 19],
                            [2014, 100, 20],
                            [2081, 100, 21],
                            [2147, 100, 22]
                        ],
                        barGap: 0,
                        zlevel: 1,

                        barWidth: 1, //10,
                        itemStyle: {
                            color: 'red',
                            opacity: 0.5
                        },
                        emphasis: {
                            itemStyle: {
                            color: '#ffb703',
                            opacity: 1,
                            borderWidth: 2,
                            borderColor: '#fee440'
                            }
                        },
                        markArea: {
                            emphasis: {
                            itemStyle: {
                                color: '#48cae4',
                                opacity: 0.5
                            }
                            },
                            zlevel: 10,
                            itemStyle: {
                            //opacity: 0
                            },
                            data: [
                            [
                                {
                                xAxis: '65'
                                },
                                {
                                xAxis: '130'
                                }
                            ],
                            [
                                {
                                xAxis: '130'
                                },
                                {
                                xAxis: '196'
                                }
                            ],
                            [
                                {
                                xAxis: '196'
                                },
                                {
                                xAxis: '260'
                                }
                            ],
                            [
                                {
                                xAxis: '260'
                                },
                                {
                                xAxis: '325'
                                }
                            ],
                            [
                                {
                                xAxis: '325'
                                },
                                {
                                xAxis: '391'
                                }
                            ],
                            [
                                {
                                xAxis: '391'
                                },
                                {
                                xAxis: '456'
                                }
                            ],
                            [
                                {
                                xAxis: '456'
                                },
                                {
                                xAxis: '522'
                                }
                            ],
                            [
                                {
                                xAxis: '522'
                                },
                                {
                                xAxis: '1117'
                                }
                            ],
                            [
                                {
                                xAxis: '1117'
                                },
                                {
                                xAxis: '1189'
                                }
                            ],
                            [
                                {
                                xAxis: '1189'
                                },
                                {
                                xAxis: '1254'
                                }
                            ],
                            [
                                {
                                xAxis: '1254'
                                },
                                {
                                xAxis: '1319'
                                }
                            ],
                            [
                                {
                                xAxis: '1319'
                                },
                                {
                                xAxis: '1420'
                                }
                            ],
                            [
                                {
                                xAxis: '1420'
                                },
                                {
                                xAxis: '1485'
                                }
                            ],
                            [
                                {
                                xAxis: '1485'
                                },
                                {
                                xAxis: '1551'
                                }
                            ],
                            [
                                {
                                xAxis: '1551'
                                },
                                {
                                xAxis: '1616'
                                }
                            ],
                            [
                                {
                                xAxis: '1616'
                                },
                                {
                                xAxis: '1750'
                                }
                            ],
                            [
                                {
                                xAxis: '1750'
                                },
                                {
                                xAxis: '1817'
                                }
                            ],
                            [
                                {
                                xAxis: '1817'
                                },
                                {
                                xAxis: '1882'
                                }
                            ],
                            [
                                {
                                xAxis: '1882'
                                },
                                {
                                xAxis: '1947'
                                }
                            ],
                            [
                                {
                                xAxis: '1947'
                                },
                                {
                                xAxis: '2014'
                                }
                            ],
                            [
                                {
                                xAxis: '2014'
                                },
                                {
                                xAxis: '2081'
                                }
                            ],
                            [
                                {
                                xAxis: '2081'
                                },
                                {
                                xAxis: '2147'
                                }
                            ]
                            ]
                        }
                        }
                    ],
                    dataZoom: { endValue: 912 }
                };
                var chart = testHelper.create(echarts, 'main-overlapping', {
                    option: option,
                    title: [
                        'MarkArea when some ticks are overlapping',
                        'There should be **no overlapping around 456**',
                        'This test case should be fixed in the future.'
                    ]
                });
            });

        </script>
        <script>

            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    title: {
                        text: 'Distribution of Electricity',
                        subtext: 'Fake Data'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross'
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    dataZoom: [{}], // WITH ZOOMING
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // prettier-ignore
                        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                        formatter: '{value} W'
                        },
                        axisPointer: {
                        snap: true
                        },
                    },
                    series: [
                        {
                        name: 'Electricity',
                        type: 'line',
                        smooth: true,
                        // prettier-ignore
                        data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                        markArea: {
                            itemStyle: {
                            color: 'rgba(255, 173, 177, 0.4)'
                            },
                            data: [
                            [
                                {
                                name: 'Morning Peak',
                                xAxis: '07:30',
                                yAxis: -100
                                },
                                {
                                xAxis: '10:00',
                                yAxis: 900 // EXACT LIMIT HERE
                                }
                            ],
                            [
                                {
                                name: 'Evening Peak',
                                xAxis: '17:30'
                                },
                                {
                                xAxis: '21:15'
                                }
                            ],
                            [
                            {yAxis: 200}, {yAxis: 600, xAxis: '22:30'}, // EXACT LIMIT HERE
                                ]
                            ]
                        }
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main1', {
                    option: option
                });

            });

        </script>

        <script>
            require([
                'echarts',
            ], function (echarts) {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        type: 'bar',
                        data: [10, 52, 200, 334, 390, 330, 220],
                        itemStyle: {
                            opacity: .1
                        },
                        markArea: {
                            data: [
                                [
                                    {
                                        name: '所有数据范围区间',
                                        coord: ['min', 'min'],
                                        itemStyle: {
                                            color: 'lightgray',
                                            borderWidth: 2,
                                            borderColor: 'gray'
                                        },
                                        label: {
                                            position: 'insideLeft',
                                        }
                                    },
                                    {
                                        coord: ['max', 'max']
                                    }
                                ],
                                [
                                    {
                                        name: '[average, min] to [max, median]',
                                        coord: ['average', 'min'],
                                        itemStyle: {
                                            color: '#14c4ba',
                                            opacity: .5
                                        }
                                    },
                                    {
                                        coord: ['max', 'median']
                                    }
                                ],
                                [
                                    {
                                        name: '平均值到最大值',
                                        type: 'average',
                                        itemStyle: {
                                            color: 'lightblue',
                                            borderWidth: 2,
                                            borderColor: 'lightblue'
                                        }
                                    },
                                    {
                                        type: 'max'
                                    }
                                ],
                                [
                                    {
                                        name: '两个坐标之间的标域',
                                        coord: [1, 20]
                                    },
                                    {
                                        coord: ['c', 30]
                                    }
                                ],
                                [
                                    {
                                        name: 'yAxis 120~130',
                                        yAxis: 120
                                    },
                                    {
                                        yAxis: 130
                                    }
                                ],
                                [
                                    {
                                        name: '两个屏幕坐标之间的标域 px',
                                        x: 80,
                                        y: 50,
                                        itemStyle: {
                                            color: 'lightgreen'
                                        }
                                    },
                                    {
                                        x: 100,
                                        y: 100
                                    }
                                ],
                                [
                                    {
                                        name: '两个屏幕坐标之间的标域 px & %',
                                        x: 100,
                                        y: '20%'
                                    },
                                    {
                                        x: '90%',
                                        y: '30%'
                                    }
                                ]
                            ]
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main2', {
                    title: [
                        '**两个屏幕坐标之间的标域** should be displayed',
                        '**所有数据范围区间** should be displayed',
                        'Other mark areas should also be displayed',
                        'should have no errors in the console'
                    ],
                    option: option
                });
            });
            </script>
    </body>
</html>