githubmirror/echarts

test/dataZoom-toolbox.html
820 строк26 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:478544dd7
<!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">
        <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>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            .chart {
                position: relative;
                height: 500px;
                max-width: 1000px;
                margin: 0 auto;
            }
            h2 {
                text-align: center;
                font-size: 16px;
                line-height: 40px;
                font-weight: normal;
                background: #078302;
                color: #eee;
            }
        </style>

        <h2>scatter</h2>
        <div class="chart" id="main1"></div>
        <h2>Test: (1) click zoom btn (2) select (3) click zoom btn, expect: not change</h2>
        <div class="chart" id="main-test-y-range"></div>
        <h2>Multiple Y axis (default)</h2>
        <div class="chart" id="main-multiple-y-axis-default"></div>
        <h2>Specify Y axis (yAxisIndex: [1, 2, 4], xAxisIndex: false, should be 'lineY' brush)</h2>
        <div class="chart" id="main-specify-y-axis"></div>
        <h2>Specify Y axis (yAxisIndex: false, should be 'lineX' brush)</h2>
        <div class="chart" id="main-specify-x-axis"></div>

        <div id="main0"></div>
        <div id="main-refer-by-axis-id"></div>

        <script>

            var lastChart;
            var globalColor = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];

            function makeChart(id, option, cb) {
                require([
                    'echarts'
                ], function (echarts, globalDefault) {
                    var main = document.getElementById(id);
                    if (main) {
                        var chartMain = document.createElement('div');
                        chartMain.style.cssText = 'height:100%';
                        main.appendChild(chartMain);
                        var chart = lastChart = echarts.init(chartMain);

                        if (typeof option === 'function') {
                            option = option(echarts, globalDefault);
                        }

                        chart.setOption(option);

                        window.addEventListener('resize', chart.resize);

                        cb && cb(echarts, chart);
                    }

                });
            }

        </script>















        <script>
            var data1 = [];
            var data2 = [];
            var data3 = [];

            function random(max) {
                return (Math.random() * max).toFixed(3);
            };

            for (var i = 0; i < 100; i++) {
                data1.push([random(15), random(10), random(1)]);
                // data1.push([i, 10, i]);
                data2.push([random(10), random(10), random(1)]);
                data3.push([random(15), random(10), random(1)]);
            }

            makeChart('main1', {
                legend: {
                    data: ['scatter', 'scatter2', 'scatter3']
                },
                animationDuration: 1000,
                animationDurationUpdate: 1000,
                toolbox: {
                    feature: {
                        dataView: {},
                        dataZoom: {
                            show: true,
                            yAxisIndex: null,
                            // brushStyle: {
                            //     borderWidth: 2,
                            //     color: 'blue',
                            //     opacity: 0.1,
                            //     borderColor: '#596A76',
                            // }
                        },
                        restore: {show: true},
                        saveAsImage: {}
                    }
                },
                tooltip: {
                },
                xAxis: {
                    type: 'value',
                    min: 'dataMin',
                    max: 'dataMax',
                    splitLine: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 'dataMin',
                    max: 'dataMax',
                    splitLine: {
                        show: true
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        xAxisIndex: [0],
                        start: 10,
                        end: 70
                    },
                    {
                        show: true,
                        yAxisIndex: [0],
                        start: 0,
                        end: 20
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 10,
                        end: 70
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0],
                        start: 0,
                        end: 20
                    }
                ],
                series: [
                    {
                        name: 'scatter',
                        type: 'scatter',
                        itemStyle: {
                            normal: {
                                opacity: 0.8,
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] * 40;
                        },
                        data: data1
                    },
                    {
                        name: 'scatter2',
                        type: 'scatter',
                        itemStyle: {
                            normal: {
                                opacity: 0.8
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] * 40;
                        },
                        data: data2
                    },
                    {
                        name: 'scatter3',
                        type: 'scatter',
                        itemStyle: {
                            normal: {
                                opacity: 0.8,
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] * 40;
                        },
                        data: data3
                    }
                ]
            });
        </script>











        <script>
            makeChart('main-test-y-range', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {},
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }],
                    dataZoom: [{
                        type: 'slider',
                        height: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 1,
                        orient: 'vertical',
                        left: 365,
                        width: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 2,
                        orient: 'vertical',
                        left: 445,
                        width: 20
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }]
                };
            });
        </script>









        <script>
            makeChart('main-multiple-y-axis-default', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {},
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }, {
                        left: 550,
                        right: 40
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }, {
                        data: ['z', 'y', 'x', 'w', 'v', 'u'],
                        gridIndex: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'left',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[3]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[4]
                            }
                        }
                    }],
                    dataZoom: [{
                        type: 'slider',
                        height: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 1,
                        orient: 'vertical',
                        left: 365,
                        width: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 2,
                        orient: 'vertical',
                        left: 445,
                        width: 20
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }, {
                        name: 'B1',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 3,
                        data: [5, 1, 5, 1, 5, 3]
                    }, {
                        name: 'B2',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 4,
                        data: [1, 5, 1, 5, 1, 10]
                    }]
                };
            });
        </script>








        <script>
            makeChart('main-specify-y-axis', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: [1, 2, 4],
                                xAxisIndex: false
                            },
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }, {
                        left: 550,
                        right: 40
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }, {
                        data: ['z', 'y', 'x', 'w', 'v', 'u'],
                        gridIndex: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'left',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[3]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[4]
                            }
                        }
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }, {
                        name: 'B1',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 3,
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'B2',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 4,
                        data: [1, 5, 1, 5, 1, 10]
                    }]
                };
            });
        </script>










        <script>
            makeChart('main-specify-x-axis', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }, {
                        left: 550,
                        right: 40
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }, {
                        data: ['z', 'y', 'x', 'w', 'v', 'u'],
                        gridIndex: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'left',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[3]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[4]
                            }
                        }
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }, {
                        name: 'B1',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 3,
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'B2',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 4,
                        data: [1, 5, 1, 5, 1, 10]
                    }]
                };
            });
        </script>





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

            option = {
                toolbox: {
                    feature: {
                        dataZoom: {
                            // yAxisIndex: false
                        }
                    }
                },
                legend: {},
                xAxis: {
                    data: ['I', 'II', 'III']
                },
                yAxis: {},
                series: [{
                    name: 'x',
                    type: 'bar',
                    stack: 'a',
                    data: [11, 22, 33]
                }, {
                    name: 'y',
                    type: 'bar',
                    stack: 'a',
                    data: [44, 33, 22]
                }]
            };

            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    '(1) Use toolbox.dataZoom to brush a small rect in grid.',
                    '(2) Click a legend item to disappear a series and click again to show the series.',
                    '[Check]: the extent of yAxis: should be able to return to **the previous state after (1) did**.',
                    '(3) Click "back" in toolbox.dataZoom',
                    '[Check]: Back normally.'
                ],
                option: option
                // height: 300,
                // buttons: [{text: 'btn-txt', onclick: function () {}}],
                // recordCanvas: true,
            });
        });
        </script>




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

            option = {
                toolbox: {
                    feature: {
                        dataZoom: {
                            xAxisId: 'xr',
                            yAxisId: ['yl0', 'yl1']
                        }
                    }
                },
                legend: {},
                grid: [{
                    right: '60%',
                    bottom: '60%',
                }, {
                    id: 'gr',
                    left: '60%',
                    bottom: '60%',
                }, {
                    id: 'gb',
                    top: '60%',
                }],
                xAxis: [{

                }, {
                    id: 'xr',
                    gridId: 'gr'
                }, {
                    id: 'xb',
                    gridId: 'gb'
                }],
                yAxis: [{
                    id: 'yl0'
                }, {
                    id: 'yl1'
                }, {
                    id: 'yr',
                    gridId: 'gr'
                }, {
                    id: 'yb',
                    gridId: 'gb'
                }],
                series: [{
                    type: 'line',
                    yAxisId: 'yl0',
                    data: [[11, 12], [22, 45], [33, 76]]
                }, {
                    type: 'line',
                    yAxisId: 'yl1',
                    data: [[11, 2212], [22, 3345], [33, 4476]]
                }, {
                    type: 'line',
                    xAxisId: 'xr',
                    yAxisId: 'yr',
                    data: [[45, 65], [13, 25], [56, 71]]
                }, {
                    type: 'line',
                    xAxisId: 'xb',
                    yAxisId: 'yb',
                    data: [[123, 654], [234, 321], [345, 812]]
                }]
            };

            var chart = testHelper.create(echarts, 'main-refer-by-axis-id', {
                title: [
                    'Test toolbox datazoom refer with axis id',
                    'left grid: toolbox only work **on two yAxis**',
                    'right grid: toolbox only work **on xAxis**',
                    'bottom grid: toolbox **does not work**'
                ],
                option: option
                // height: 300,
                // buttons: [{text: 'btn-txt', onclick: function () {}}],
                // recordCanvas: true,
            });
        });
        </script>



    </body>
</html>