githubmirror/echarts

test/axis-interval2.html
1 357 строк43 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>
        <script src="lib/draggable.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #a60;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 500px;
            }
        </style>

        <div class="chart" id="main0"></div>
        <div class="chart" id="main1"></div>
        <div class="chart" id="main2"></div>
        <div class="chart" id="main3"></div>
        <div class="chart" id="main4"></div>
        <div class="chart" id="main5"></div>
        <div class="chart" id="main6"></div>
        <div class="chart" id="main6.5"></div>
        <div class="chart" id="main7"></div>
        <div class="chart" id="main8"></div>
        <div class="chart" id="main9"></div>
        <div class="chart" id="main10"></div>


        <script>

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

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

                var count = 100;
                for (var i = 0; i < count; i++) {

                    if (i === 14 || i === 20) {
                        xAxisData.push({
                            value: '类目' + i,
                            textStyle: {
                                color: 'red'
                            }
                        });
                    } else {
                        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 itemStyle = {
                    normal: {
                        borderColor: 'white',
                        borderWidth: 3,
                        lineStyle: {
                            width: 1
                        }
                    }
                };

                // var rawData = [[0.877,1.384,0,0,0,1.422,1.363,0.867,0.782,1.025,0.819,0.638,1.192,0.56,1.17,1.056,0.804,0.657,1.157,0.906,1.462,0.856,1.384,0.978,0.766,0.683,1.383,0.65,1.343,1.303,1.298,0.812,0.665,1.182,0.528,0.613,1.101,0.959,0.997,1.381,1.172,1.01,1.23,0.596,1.256,1.406,1.172,0.85,1.194,1.313,1.142,0.985,1.059,1.07,1.205,1.359,0.93,0.514,1.197,1.259,1.225,1.371,0.825,0.967,0.569,1.432,0.892,1.36,0.644,1.096,1.006,0.613,0.549,1.263,1.203,0.556,1.044,1.338,0.8,1.137,1.164,1.44,0.995,0.989,1.098,0.563,0.768,0.584,0.794,1.33,0.687,0.89,1.317,1.466,1.01,0.886,0.964,1.244,1.421,0.922],[1.369,1.092,1.446,1.472,0.873,1.093,1.136,1.057,0.832,0.633,1.054,1.169,0.727,0.674,1.361,0.842,0.762,0.621,0.964,0.87,1.425,0.543,0.877,0.779,0.568,1.352,1.065,1.381,0.938,0.805,0.686,0.994,1.485,0.915,0.504,1.141,1.167,1.101,1.423,0.789,0.942,0.863,1.02,1.443,0.732,1.197,0.993,0.738,0.923,1.355,0.796,0.707,0.729,1.27,1.034,0.704,1.375,1.377,0.953,0.555,1.211,1.37,1.399,1.183,0.591,0.803,0.969,0.866,1.086,1.35,1.378,0.834,1.048,1.084,1.267,0.965,1.064,0.954,1.39,0.564,0.742,1.033,1.293,0.74,0.709,0.962,0.863,1.455,0.894,0.876,0.827,0.662,1.33,0.857,0.71,1.423,1.131,1.224,0.725,1.446],[0.895,1.487,0.63,1.245,1.184,0.738,0.905,1.299,1.16,0.904,0.902,1.231,0.919,1.067,1.319,0.939,1.424,1.348,0.537,0.519,0.542,1.091,1.351,1.337,0.674,1.112,1.218,1.317,0.62,0.686,0.683,1.273,1.096,1.324,1.448,1.157,0.8,0.878,0.83,1.069,1.261,0.968,1.043,0.55,0.73,0.886,0.8,0.943,0.597,0.93,0.794,1.43,0.941,1.376,0.647,0.848,1.273,0.853,0.585,0.899,0.649,1.217,1.097,1.273,1.165,0.648,0.622,1.111,0.626,0.75,1.477,1.13,0.6,0.855,1.463,1.414,1.487,0.992,0.948,1.333,0.791,0.654,0.511,1.471,0.626,1.286,0.547,1.082,1.195,1.29,0.794,1.294,1.136,0.807,0.647,1.415,0.674,0.869,1.437,0.711]];
                // data1 = rawData[0];
                // data2 = rawData[1];
                // data3 = rawData[2];

                var option = {
                    legend: {
                        data: ['line', 'line2', 'line3']
                    },
                    visualMap: null, // 用于测试 option 中含有null的情况。
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
                        data: xAxisData,
                        boundaryGap: false,
                        // inverse: true,
                        splitArea: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            // showMaxLabel: true,
                            // showMinLabel: true
                        }
                    },
                    grid: {
                        left: '10%',
                        right: '10%'
                    },
                    yAxis: {
                        axisLabel: {
                            textStyle: {
                                color: 'red'
                            }
                        },
                        splitArea: {
                            show: true
                        }
                    },
                    dataZoom: [{
                        type: 'inside',
                        // start: 10,
                        // end: 12
                        startValue: 11,
                        endValue: 85
                    }, {
                        type: 'slider',
                        // start: 10,
                        // end: 12
                        startValue: 11,
                        endValue: 85
                    }],
                    // animationDurationUpdate: 2000,
                    // animation: false,
                    series: [
                        null,  // 用于测试 option 中含有null的情况。
                        {
                            name: 'line',
                            type: 'line',
                            stack: 'all',
                            symbol: 'path://M164,210.677v33.47l154.656,66.356L468,243.681v-33.004H164L164,210.677z M164,282.255L164,282.255v134.76h304V282.061l-149.012,66.615L164,282.255L164,282.255z',
                            symbolKeepAspect: true,
                            symbolSize: 40,
                            data: data1,
                            itemStyle: itemStyle,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: 12
                                }
                            },
                            lineStyle: {
                                normal: {
                                    shadowBlur: 4,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3
                                }
                            },
                            step: 'end'
                        },
                        {
                            label: {
                                normal: {
                                    show: true,
                                    position: 'outside'
                                }
                            },
                            name: 'line2',
                            type: 'line',
                            stack: 'all',
                            symbol: 'circle',
                            symbolSize: 10,
                            data: data2,
                            itemStyle: itemStyle,
                            step: 'end'
                        },
                        {
                            name: 'line3',
                            type: 'line',
                            stack: 'all',
                            symbol: 'triangle',
                            symbolSize: 10,
                            data: data3,
                            itemStyle: itemStyle,
                            step: 'end'
                        }
                    ]
                };

                chart = myChart = testHelper.create(echarts, 'main0', {
                    title: [
                        '(0) Move the slider zoom, check the tick and symbol animation stable (not change ticks selection)',
                        '(1) Adjust (zoom) the slider zoom to the extent of just change the tick interval.',
                        '(2) Move the slider zoom, CHECK whether the interval is stable (no jitter).'
                    ],
                    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);
                    data1.push((Math.random() * 5).toFixed(2));
                    data2.push(-Math.random().toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var itemStyle = {
                    normal: {
                        barBorderRadius: 5,
                        label: {
                            show: true,
                            position: 'outside'
                        }
                    },
                    emphasis: {
                        label: {
                            position: 'outside'
                        },
                        barBorderColor: '#fff',
                        barBorderWidth: 1,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                };

                var option = {
                    backgroundColor: '#eef',
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        name: '横轴',
                        silent: false,
                        inverse: true,
                        axisTick: {
                            alignWithLabel: true
                        },
                        // axisLabel: {
                        //     show: false
                        // },
                        // axisTick: {
                        //     show: false
                        // },
                        axisLine: {
                            onZero: true,
                            // lineStyle: {
                            //     width: 40
                            // }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'green'
                            }
                        },
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        inverse: true,
                        // axisLabel: {
                        //     show: false
                        // },
                        axisTick: {
                            show: false
                        },
                        // splitLine: {
                        //     show: false
                        // },
                        splitArea: {
                            show: false
                        }
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {}],
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        itemStyle: itemStyle,
                        cursor: 'move',
                        data: data1
                    }, {
                        name: 'bar2',
                        type: 'bar',
                        stack: 'one',
                        itemStyle: itemStyle,
                        cursor: 'default',
                        data: data2
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        itemStyle: itemStyle,
                        data: data3
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main1', {
                    title: [
                        '(0) Zoom and check the splitLine(green) and splitArea when axis interval exists',
                        '(1) Check not split a single data item when odd category tick interval'
                    ],
                    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);
                    data1.push((Math.random() * 5).toFixed(2));
                    data2.push(-Math.random().toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var itemStyle = {
                    normal: {
                        barBorderRadius: 5,
                        label: {
                            show: true,
                            position: 'outside'
                        }
                    },
                    emphasis: {
                        label: {
                            position: 'outside'
                        },
                        barBorderColor: '#fff',
                        barBorderWidth: 1,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                };

                var option = {
                    backgroundColor: '#eef',
                    legend: {
                    },
                    tooltip: {
                    },
                    xAxis: {
                        data: xAxisData,
                        name: '横轴',
                        silent: false,
                        axisTick: {
                            alignWithLabel: true
                        },
                        // axisLabel: {
                        //     show: false
                        // },
                        // axisTick: {
                        //     show: false
                        // },
                        axisLine: {
                            onZero: true
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'green'
                            }
                        },
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        inverse: true,
                        // axisLabel: {
                        //     show: false
                        // },
                        axisTick: {
                            show: false
                        },
                        // splitLine: {
                        //     show: false
                        // },
                        splitArea: {
                            show: false
                        }
                    },
                    animationDurationUpdate: 800,
                    dataZoom: [{
                        type: 'inside',
                        startValue: 17,
                        endValue: 24,
                        zoomLock: true
                    }, {
                        startValue: 17,
                        endValue: 24,
                        zoomLock: true
                    }],
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        itemStyle: itemStyle,
                        cursor: 'move',
                        data: data1
                    }, {
                        name: 'bar2',
                        type: 'bar',
                        stack: 'one',
                        itemStyle: itemStyle,
                        cursor: 'default',
                        data: data2
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        itemStyle: itemStyle,
                        data: data3
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main2', {
                    title: [
                        '(0) Move and check splitArea and splitLine(green) animation (zoom locked)'
                    ],
                    option: option
                });
            });

        </script>
















        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var itemStyle = {
                    normal: {
                        barBorderRadius: 5,
                        label: {
                            show: true,
                            position: 'outside'
                        }
                    },
                    emphasis: {
                        label: {
                            position: 'outside'
                        },
                        barBorderColor: '#fff',
                        barBorderWidth: 1,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                };

                var option = {
                    backgroundColor: '#eef',
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        name: '横轴',
                        silent: false,
                        axisLine: {
                            onZero: true
                        },
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    dataZoom: [{
                        type: 'inside',
                        startValue: 17,
                        endValue: 24,
                        zoomLock: true
                    }, {
                        startValue: 17,
                        endValue: 24,
                        zoomLock: true
                    }],
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        itemStyle: itemStyle,
                        cursor: 'move',
                        data: data1
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        itemStyle: itemStyle,
                        data: data3
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main3', {
                    title: [
                        'alignWithTick: default (false), and boundaryGap: default (true)'
                    ],
                    option: option
                });
            });

        </script>











        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('c' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        axisTick: {
                            interval: 4,
                            alignWithLabel: true
                        },
                        axisLabel: {
                        },
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    dataZoom: [{
                        type: 'inside',
                        startValue: 17,
                        endValue: 24
                    }, {
                        startValue: 17,
                        endValue: 24
                    }],
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        cursor: 'move',
                        data: data1
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        data: data3
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main4', {
                    title: [
                        'axisTick.interval is different from axisLabel.interval'
                    ],
                    option: option
                });
            });

        </script>








        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('c' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: [{
                        data: xAxisData,
                        name: 'axisLabel.interval is function',
                        nameLocation: 'middle',
                        nameGap: 20,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: function (categoryIdx, categoryValue) {
                                return categoryIdx % 5 === 0;
                            }
                        },
                        splitArea: {
                            show: true
                        }
                    }, {
                        data: xAxisData,
                        name: 'axisTick.interval is function',
                        nameLocation: 'middle',
                        nameGap: 20,
                        gridIndex: 1,
                        axisTick: {
                            interval: function (categoryIdx, categoryValue) {
                                return categoryIdx % 5 === 0;
                            },
                            alignWithLabel: true
                        },
                        axisLabel: {
                        },
                        splitArea: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    }, {
                        gridIndex: 1,
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    }],
                    grid: [{
                        bottom: '60%'
                    }, {
                        top: '52%',
                        bottom: 80
                    }],
                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: [0, 1],
                        startValue: 17,
                        endValue: 24
                    }, {
                        xAxisIndex: [0, 1],
                        startValue: 17,
                        endValue: 24
                    }],
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        cursor: 'move',
                        data: data1
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        data: data3
                    }, {
                        name: 'bar',
                        type: 'bar',
                        stack: 'one1',
                        cursor: 'move',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: data1
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two1',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: data3
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main5', {
                    title: [
                        'axisLabel.interval and axisTick.interval are function'
                    ],
                    option: option,
                    info: {xAxis: option.xAxis}
                });
            });

        </script>














        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('c' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    dataZoom: [{
                        type: 'inside',
                        startValue: 17,
                        endValue: 24
                    }, {
                        startValue: 17,
                        endValue: 24
                    }],
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        cursor: 'move',
                        data: data1
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        data: data3
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main6', {
                    title: [
                        'Only axisTick show, zoom and check axis tick.'
                    ],
                    option: option,
                    info: {xAxis: option.xAxis}
                });
            });

        </script>














        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('c' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: 0,
                        startValue: 17,
                        endValue: 84
                    }, {
                        type: 'inside',
                        xAxisIndex: 1,
                        startValue: 17,
                        endValue: 84
                    }, {
                        xAxisIndex: [0, 1],
                        startValue: 17,
                        endValue: 84
                    }],
                    xAxis: [{
                        data: xAxisData,
                        // axisTick: {
                        //     alignWithLabel: true
                        // },
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: true
                        },
                        splitLine: {
                            show: true
                        }
                    }, {
                        data: xAxisData,
                        gridIndex: 1,
                        splitArea: {
                            show: true
                        },
                        splitLine: {
                            show: true
                        }
                    }],
                    yAxis: [{
                    }, {
                        gridIndex: 1,
                        axisLabel: {
                            showMaxLabel: false
                        }
                    }],
                    grid: [{
                        bottom: '50%'
                    }, {
                        top: '50%'
                    }],
                    series: [{
                        name: 'bar',
                        type: 'line',
                        stack: 'one',
                        cursor: 'move',
                        data: data1
                    }, {
                        name: 'bar3',
                        type: 'line',
                        stack: 'two',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: data3
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main6.5', {
                    title: [
                        'The first grid has no label, the second grid has label.',
                        'splitLine and axisTick should be the same between the two grids.'
                    ],
                    option: option,
                    info: {xAxis: option.xAxis}
                });
            });

        </script>








        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('c' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: true
                        },
                        min: -300,
                        max: 333333
                    },
                    yAxis: {
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                    }],
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        cursor: 'move'
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main7', {
                    title: [
                        'No data but has xAxis.min and xAxis.max, should no ticks and labels.',
                        'label.show: false, should no dead loop.'
                    ],
                    option: option,
                    info: {xAxis: option.xAxis}
                });
            });

        </script>







        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('c' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                }

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        splitArea: {
                            interval: 3,
                            show: true,
                            areaStyle: {
                                color: ['blue', 'red']
                            }
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                    }],
                    series: []
                };

                chart = myChart = testHelper.create(echarts, 'main8', {
                    title: [
                        'Check splitArea correct for indivisible interval.',
                        'Move left handle of the dataZoom and check splitArea correct'
                    ],
                    option: option,
                    info: {xAxis: option.xAxis}
                });
            });

        </script>






        <script>

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

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: 0
                    }, {
                    }],
                    grid: {
                        top: 10,
                        left: 100
                    },
                    xAxis: [{
                        type: 'category',
                        splitArea: {
                            show: true
                        },
                        splitLine: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        axisLabel: {
                            formatter: 'GOOD {value}',
                            fontSize: 20
                        }
                    }, {
                        axisLabel: {
                            showMaxLabel: false
                        }
                    }],
                    series: [{
                        type: 'scatter',
                        data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main9', {
                    title: [
                        'Drag to resize the yAxis util labels changes, and then drag back.',
                        'Labels of yAxis should be able to back too the original state.'
                    ],
                    width: 300,
                    height: 300,
                    option: option,
                    draggable: true
                });

            });

        </script>




        <script>

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

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('c' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                }

                var option = {
                    legend: {
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: 0,
                        start: 14.63022259346915,
                        end: 77.06506102371338
                    }, {
                        start: 14.63022259346915,
                        end: 77.06506102371338
                    }],
                    xAxis: [{
                        data: xAxisData,
                        splitArea: {
                            show: true
                        },
                        splitLine: {
                            show: true
                        }
                    }],
                    yAxis: [{
                    }],
                    series: [{
                        name: 'bar',
                        type: 'line',
                        stack: 'one',
                        cursor: 'move',
                        data: data1
                    }]
                };

                chart = myChart = testHelper.create(echarts, 'main10', {
                    title: [
                        'The dataZoom window range is at the critical value of changing axis interval from 2 to 3.',
                        'Move the dataZoom bar, the **xAxis labels should be stable**.',
                        'That is, xAxis labels should not be sometimes [c21, c24, c27] sometimes [c20, c24, c28]'
                    ],
                    option: option,
                    // Should be fixed this width to make the dataZoom window range at the critical value.
                    width: 653,
                    height: 300,
                    autoResize: false
                });

            });

        </script>






    </body>
</html>