test/hoverFocus2.html - master - githubmirror/echarts

test/hoverFocus2.html
424 строки14 KB
timshen
refactor: move hightlight multiple series testcase to hoverFocus2.html
22 июн 2021, 12:36
22 июн 2021, 12:3652adb46
<!DOCTYPE html>
<!--
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="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>



        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>





        <script>
            function makeToggleChartButtons(changeFocus) {
                return  [{
                    text: 'Set focus: series',
                    onclick: function () {
                        changeFocus({ focus: 'series' });
                    }
                }, {
                    text: 'Set focus: self',
                    onclick: function () {
                        changeFocus({ focus: 'self' });
                    }
                }, {
                    text: 'Set blurScope: series',
                    onclick: function () {
                        changeFocus({ blurScope: 'series' });
                    }
                }, {
                    text: 'Set blurScope: coordinateSystem',
                    onclick: function () {
                        changeFocus({ blurScope: 'coordinateSystem' });
                    }
                }, {
                    text: 'Set blurScope: global',
                    onclick: function () {
                        changeFocus({ blurScope: 'global' });
                    }
                }];
            }
        </script>

        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;

            option = {
                grid: {
                    right: '20%'
                },
                legend: {
                    data: ['蒸发量', '降水量', '平均温度']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '蒸发量',
                        min: 0,
                        max: 250,
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '降水量',
                        min: 0,
                        max: 250,
                        position: 'right',
                        offset: 80,
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '温度',
                        min: 0,
                        max: 25,
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name: '平均温度',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };


            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    'Multiple series on same grid'
                ],
                buttons: makeToggleChartButtons(function (newOpt) {
                    option.series.forEach(function (seriesOpt) {
                        seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
                    });
                    chart.setOption(option);
                }),
                option: option
            });
        });
        </script>


        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                var dataAll = [
                    [
                        [10.0, 8.04],
                        [8.0, 6.95],
                        [13.0, 7.58],
                        [9.0, 8.81],
                        [11.0, 8.33],
                        [14.0, 9.96],
                        [6.0, 7.24],
                        [4.0, 4.26],
                        [12.0, 10.84],
                        [7.0, 4.82],
                        [5.0, 5.68]
                    ],
                    [
                        [10.0, 9.14],
                        [8.0, 8.14],
                        [13.0, 8.74],
                        [9.0, 8.77],
                        [11.0, 9.26],
                        [14.0, 8.10],
                        [6.0, 6.13],
                        [4.0, 3.10],
                        [12.0, 9.13],
                        [7.0, 7.26],
                        [5.0, 4.74]
                    ],
                    [
                        [10.0, 7.46],
                        [8.0, 6.77],
                        [13.0, 12.74],
                        [9.0, 7.11],
                        [11.0, 7.81],
                        [14.0, 8.84],
                        [6.0, 6.08],
                        [4.0, 5.39],
                        [12.0, 8.15],
                        [7.0, 6.42],
                        [5.0, 5.73]
                    ],
                    [
                        [8.0, 6.58],
                        [8.0, 5.76],
                        [8.0, 7.71],
                        [8.0, 8.84],
                        [8.0, 8.47],
                        [8.0, 7.04],
                        [8.0, 5.25],
                        [19.0, 12.50],
                        [8.0, 5.56],
                        [8.0, 7.91],
                        [8.0, 6.89]
                    ]
                ];

                var markLineOpt = {
                    animation: false,
                    label: {
                        formatter: 'y = 0.5 * x + 3',
                        align: 'right'
                    },
                    lineStyle: {
                        type: 'solid'
                    },
                    tooltip: {
                        formatter: 'y = 0.5 * x + 3'
                    },
                    data: [[{
                        coord: [0, 3],
                        symbol: 'none'
                    }, {
                        coord: [20, 13],
                        symbol: 'none'
                    }]]
                };

                option = {
                    title: {
                        text: 'Anscombe\'s quartet',
                        left: 'center',
                        top: 0
                    },
                    grid: [
                        {x: '7%', y: '7%', width: '38%', height: '38%'},
                        {x2: '7%', y: '7%', width: '38%', height: '38%'},
                        {x: '7%', y2: '7%', width: '38%', height: '38%'},
                        {x2: '7%', y2: '7%', width: '38%', height: '38%'}
                    ],
                    tooltip: {
                        formatter: 'Group {a}: ({c})'
                    },
                    xAxis: [
                        {gridIndex: 0, min: 0, max: 20},
                        {gridIndex: 1, min: 0, max: 20},
                        {gridIndex: 2, min: 0, max: 20},
                        {gridIndex: 3, min: 0, max: 20}
                    ],
                    yAxis: [
                        {gridIndex: 0, min: 0, max: 15},
                        {gridIndex: 1, min: 0, max: 15},
                        {gridIndex: 2, min: 0, max: 15},
                        {gridIndex: 3, min: 0, max: 15}
                    ],
                    series: [
                        {
                            name: 'I',
                            type: 'scatter',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            data: dataAll[0],
                            symbolSize: 20,
                            markLine: markLineOpt
                        },
                        {
                            name: 'II',
                            type: 'scatter',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: dataAll[1],
                            symbolSize: 20,
                            markLine: markLineOpt
                        },
                        {
                            name: 'III',
                            type: 'scatter',
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            data: dataAll[2],
                            symbolSize: 20,
                            markLine: markLineOpt
                        },
                        {
                            name: 'IV',
                            type: 'scatter',
                            xAxisIndex: 3,
                            yAxisIndex: 3,
                            data: dataAll[3],
                            symbolSize: 20,
                            markLine: markLineOpt
                        }
                    ]
                };
                var chart = testHelper.create(echarts, 'main1', {
                    title: [
                        'Multiple grid'
                    ],
                    buttons: makeToggleChartButtons(function (newOpt) {
                        option.series.forEach(function (seriesOpt) {
                            seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
                        });
                        chart.setOption(option);
                    }),
                    option: option
                });
            });
            </script>




        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option;

            option = {
                xAxis: {
                    data: ['a', 'b', 'c']
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [1212, 3232, 2525]
                }, {
                    type: 'bar',
                    emphasis: {
                        // itemStyle: {
                        //     color: 'red'
                        // },
                        focus: 'series'
                    },
                    data: [1212, 3232, 2525]
                }]
            };

            var buttons = makeToggleChartButtons(function (newOpt) {
                option.series.forEach(function (seriesOpt) {
                    seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
                });
                chart.setOption(option);
            });

            buttons.push({
                text: 'highlight seriesIndex: 0, dataIndex: 1',
                onclick: function () {
                    chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: 1
                    });
                }
            }, {
                text: 'highlight seriesIndex: 1, dataIndex: 1',
                onclick: function () {
                    chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 1,
                        dataIndex: 1
                    });
                }
            }, {
                text: 'downplay seriesIndex: 1, dataIndex: 1',
                onclick: function () {
                    chart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 1,
                        dataIndex: 1
                    });
                }
            }, {
                text: 'downplay all',
                onclick: function () {
                    chart.dispatchAction({
                        type: 'downplay'
                    });
                }
            }, {
                text: 'Highlight all',
                onclick: function () {
                    chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: [0, 1],
                    });
                }
            });

            var chart = testHelper.create(echarts, 'main2', {
                title: [
                    'API trigger highlight'
                ],
                option: option,
                // height: 300,
                buttons: buttons
                // recordCanvas: true,
            });
        });
        </script>


    </body>
</html>