test/legend.html - master - githubmirror/echarts

test/legend.html
1 129 строк32 KB
John Bampton
misc: fix spelling
02 апр 2025, 06:45
02 апр 2025, 06:4570f20ac

<!--
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">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/draggable.js"></script>
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #146402;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 300px;
            }
        </style>

        <div class="chart" id="plain"></div>
        <h1>No scroll, width 300, right: 10</h1>
        <div class="chart" id="plain2"></div>
        <h1>No scroll, has '\n' after 'line3', bottom: 20</h1>
        <div class="chart" id="plain3"></div>
        <h1>No scroll, vertical, has '\n' after 'line3', right 20</h1>
        <div class="chart" id="plain-v"></div>
        <h1>No scroll, vertical, top 'middle', left: 20, height: 150</h1>
        <div class="chart" id="plain-v2"></div>
        <h1>Scroll</h1>
        <div class="chart" id="scroll"></div>
         <h1>Scroll auto: try to change window size (width: 80%, right: 30)</h1>
        <div class="chart" id="scroll-auto"></div>
        <h1>Scroll auto: left: 30, right: 30, bottom: 0, position: 'start'</h1>
        <div class="chart" id="scroll-lr"></div>
        <h1>Scroll vertically</h1>
        <div class="chart" id="scroll-v"></div>
        <h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (Turn the second page and resize it until page button disappear)</h1>
        <div class="chart" id="scroll-v2"></div>

        <div id="legendHoverLink"></div>
        <div id="multi-pie"></div>
        <div id="icon-circle"></div>
        <div id="only-single-item"></div>
        <div id="vary-size"></div>
        <div id="index-to-no-name"></div>
        <h1>Legend page text color should be light in dark mode</h1>
        <div class="chart" id="dark-pageTextStyle"></div>

        <script>

            function makeSeries(seriesCount, categoryCount) {
                var series = [];
                var legendData = [];
                var xAxisData = [];

                for (var j = 0; j < categoryCount; j++) {
                    xAxisData.push('category' + j);
                }

                for (var i = 0; i < seriesCount; i++) {
                    var data = [];
                    for (var j = 0; j < categoryCount; j++) {
                        data.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    var seriesName = 'line' + i;
                    series.push({
                        name: seriesName,
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        symbolSize: 10,
                        data: data,
                        step: 'end'
                    });
                    legendData.push(seriesName);
                }

                return {
                    series: series,
                    legendData: legendData,
                    xAxisData: xAxisData
                }
            }
        </script>









        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(5, 3);

                var option = {
                    legend: {
                        selector: true,
                        selectorLabel: {
                            color: 'yellow',
                            borderColor: 'green',
                            backgroundColor: 'blue'
                        },
                        emphasis: {
                            selectorLabel: {
                                backgroundColor: 'red'
                            }
                        },
                        data: seriesInfo.legendData,
                        // backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.create(echarts, 'plain', {
                    title: [
                        'No scroll, left not set (should be center)',
                        'color: yellow, borderColor: green, backgroundColor: blue, emphasis backgroundColor: red'
                    ],
                    option: option
                });
            })
        </script>












        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(10, 3);

                var option = {
                    legend: {
                        right: 10,
                        width: 300,
                        selector: true,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        top: 100,
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain2', option);
            })
        </script>


















        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(10, 3);
                seriesInfo.legendData.splice(4, 0, '\n');

                var option = {
                    legend: {
                        bottom: 20,
                        selector: true,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        bottom: 100
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain3', option);
            })
        </script>








        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(20, 3);
                seriesInfo.legendData.splice(4, 0, '\n');

                var option = {
                    legend: {
                        orient: 'vertical',
                        right: 20,
                        selector: true,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        right: 240
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain-v', option);
            })
        </script>









        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(20, 3);

                var option = {
                    legend: {
                        orient: 'vertical',
                        left: 20,
                        top: 'center',
                        selector: true,
                        height: 150,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain-v2', option);
            })
        </script>








        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(50, 3);

                var option = {
                    legend: [{
                        type: 'scroll',
                        selector: true,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    }, {
                        type: 'scroll',
                        bottom: 0,
                        selector: true,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)',
                        pageButtonPosition: 'start'
                    }],
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll', option, {draggable: true});
            })
        </script>









        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(5, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        width: '80%',
                        right: 30,
                        selector: true,
                        data: seriesInfo.legendData,
                        pageIconSize: 50,
                        pageIconColor: 'red',
                        pageIconInactiveColor: 'green',
                        backgroundColor: 'rgba(0,100,50,0.2)',
                        pageTextStyle: {
                            color: 'yellow',
                            fontSize: 22
                        }
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-auto', option, {draggable: true, width: 400});
            })
        </script>











        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(55, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        bottom: 0,
                        right: 30,
                        left: 30,
                        data: seriesInfo.legendData,
                        selector: true,
                        pageIconSize: 5,
                        pageIconColor: 'red',
                        pageIconInactiveColor: 'green',
                        backgroundColor: 'rgba(0,100,50,0.2)',
                        pageButtonPosition: 'start',
                        pageButtonGap: 20,
                        pageTextStyle: {
                            fontSize: 9
                        }
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-lr', option, {draggable: true, width: 400});
            })
        </script>














        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(55, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        selector: true,
                        bottom: 0,
                        right: 30,
                        data: seriesInfo.legendData
                    },
                    tooltip: {
                    },
                    grid: {
                        right: 180
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-v', option, {draggable: true, width: 400});
            })
        </script>







        <script>
            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(5, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        selector: true,
                        top: 'middle',
                        left: 10,
                        height: '50%',
                        borderColor: '#819356',
                        borderWidth: 2,
                        borderRadius: 4,
                        data: seriesInfo.legendData,
                        pageButtonPosition: 'start'
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 180
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-v2', option, {draggable: true, width: 400});
            })
        </script>




        <script>

            var chart;
            var myChart;
            var option;

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var option = {
                    tooltip: {
                    },
                    legend: {
                        data: ['AAA']
                    },
                    xAxis: {
                        data: ['A', 'B', 'C']
                    },
                    yAxis: {
                    },
                    grid: {
                        right: '50%'
                    },
                    series: [
                        {
                            name: 'AAA',
                            type: 'bar',
                            data: [12, 33, 11]
                        },
                        {
                            name: 'AAA',
                            type: 'pie',
                            legendHoverLink: false,
                            center: ['75%', '50%'],
                            label: {
                                show: false,
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            data: [
                                { value: 0, name: 'A' },
                                { value: 367, name: 'B' },
                                { value: 20, name: 'C' }
                            ]
                        }
                    ]
                }

                chart = myChart = testHelper.create(echarts, 'legendHoverLink', {
                    title: 'legendHoverLink is disabled on pie',
                    option: option
                });
            });

        </script>










        <script>

            var chart;
            var myChart;
            var option;

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var option = {
                    tooltip: {
                    },
                    legend: {
                        data: ['a', 'b', 'c'],
                        selector: true
                    },
                    series: [
                        {
                            name: 'AAA',
                            type: 'pie',
                            center: ['75%', '50%'],
                            radius: '30%',
                            data: [
                                {name: 'a', value: 12},
                                {name: 'b', value: 34},
                                {name: 'c', value: 56}
                            ]
                        },
                        {
                            name: 'BBB',
                            type: 'pie',
                            center: ['25%', '50%'],
                            radius: '30%',
                            data: [
                                {name: 'a', value: 12},
                                {name: 'b', value: 34},
                                {name: 'c', value: 56}
                            ]
                        }
                    ]
                }

                chart = myChart = testHelper.create(echarts, 'multi-pie', {
                    title: 'Hover legend, the segments of BOTH pie should be hightlighted',
                    option: option
                });
            });

        </script>











        <script>

            var chart;
            var myChart;
            var option;

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {
                var data = [];
                for (var i = 0; i < 30; i++) {
                    data.push({name: i + '', value: Math.random()});
                }

                var option = {
                    tooltip: {
                    },
                    legend: {
                        type: 'scroll',
                        selector: true,
                        top: 10,
                        left: 0,
                        data: echarts.util.map(data, function (item) {
                            return {
                                name: item.name,
                                icon: 'circle'
                            };
                        })
                    },
                    series: [{
                        type: 'pie',
                        data: data
                    }]
                };

                testHelper.create(echarts, 'icon-circle', {
                    title: 'The first icon should not be overflow',
                    option: option
                });
            });

        </script>











        <script>

            var chart;
            var myChart;
            var option;

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {
                var data = [];
                for (var i = 0; i < 6; i++) {
                    data.push({name: i + '哈哈哈嘿嘿嘿', value: Math.random()});
                }

                var option = {
                    tooltip: {
                    },
                    legend: {
                        type: 'scroll',
                        top: 10,
                        left: 50,
                        width: 105,
                        data: echarts.util.map(data, function (item) {
                            return {
                                name: item.name,
                                icon: 'circle'
                            };
                        })
                    },
                    series: [{
                        type: 'pie',
                        radius: 20,
                        label: {show: false},
                        labelLine: {show: false},
                        data: data
                    }]
                };

                testHelper.create(echarts, 'only-single-item', {
                    title: 'Page up/down should be normal when only single item displayed',
                    option: option,
                    draggable: true
                });
            });

        </script>







        <script>
            require([
                'echarts',
            ], function (echarts) {
                var data = [];
                for (var i = 0; i < 26; i++) {
                    var name = '';
                    var nameNumber = Math.floor(Math.random() * 10);
                    for (var j = 0; j < nameNumber; j++) {
                        name += j;
                    }
                    data.push({
                        name: name,
                        value: Math.random()
                    });
                }

                var option = {
                    legend: [{
                        type: 'scroll',
                        selector: true,
                        itemGap: 30,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    }],
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    series: {
                        type: 'pie',
                        label: {show: false},
                        labelLine: {show: false},
                        radius: 30,
                        data: data
                    }
                };

                testHelper.create(echarts, 'vary-size', {
                    option: option,
                    draggable: true
                });
            })
        </script>










        <script>
            require([
                'echarts',
            ], function (echarts) {

                var seriesInfo = makeSeries(50, 3);
                var series = seriesInfo.series.slice();
                series.shift();

                var option = {
                    legend: [{
                        type: 'scroll',
                        selector: true,
                        data: seriesInfo.legendData
                    }],
                    tooltip: {
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                    },
                    series: series
                };

                testHelper.create(echarts, 'index-to-no-name', {
                    option: option,
                    title: [
                        'Pager should be OK when legend 0 (legendData index 0) is not be displayed.',
                        'should be at **page 1** at the beginning'
                    ],
                    draggable: true
                });
            })
        </script>

        <script>
            require([
                'echarts',
            ], function (echarts) {

                var seriesInfo = makeSeries(5, 3);

                var option = {
                    legend: [{
                        type: 'scroll',
                        width: 200,
                        data: seriesInfo.legendData
                    }],
                    series: seriesInfo.series,
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {}
                };
                var chart = echarts.init(document.getElementById('dark-pageTextStyle'), 'dark', {
                    renderer: 'svg'
                });
                chart.setOption(option);
            })
        </script>
    </body>
</html>