test/axis-extrema.html - master - githubmirror/echarts

test/axis-extrema.html
867 строк24 KB
Ovilia
fix(theme): update v5 theme
28 май 2025, 11:43
28 май 2025, 11:4388d658a
<!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/facePrint.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            body {
            }
            .chart {
                position: relative;
                height: 300px;
            }
            h2 {
                text-align: center;
                font-size: 16px;
                line-height: 30px;
                font-weight: normal;
                background: #A3AEFF;
            }
        </style>

        <div class="chart" id="main1"></div>

        <h2>cartesian category axis | xAxis: {min: undefined, max: undefined}</h2>
        <div class="chart" id="main1.1"></div>

        <h2>cartesian category axis | xAxis.data is empty (always show nothing if dataZoom)</h2>
        <div class="chart" id="main1.2"></div>

        <h2>cartesian category axis | xAxis: {min: -10, max: '类目3'}</h2>
        <div class="chart" id="main2"></div>

        <h2>cartesian category axis | xAxis: {min: function, max: function}</h2>
        <div class="chart" id="main2.1"></div>

        <h2>cartesian value axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
        <div class="chart" id="main3"></div>

        <h2>cartesian value axis | xAxis: {min: -10, max: 10}</h2>
        <div class="chart" id="main4"></div>

        <h2>cartesian value axis | xAxis: {min: function, max: function}</h2>
        <div class="chart" id="main4.1"></div>

        <h2>cartesian value axis | xAxis: {min: function, max: function}</h2>
        <div class="chart" id="main4.2"></div>

        <h2>cartesian time axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
        <div class="chart" id="main5"></div>

        <h2>cartesian time axis | xAxis: {min: '2012-08-12', max: '2012-10-01'}</h2>
        <div class="chart" id="main6"></div>

        <h2>cartesian time axis | xAxis: {min: function, max: function}</h2>
        <div class="chart" id="main6.1"></div>

        <h2>polar category axis | radiuAxis: {min: 'dataMin', max: 'dataMax'}</h2>
        <div class="chart" id="main90.1"></div>

        <h2>polar category axis | radiuAxis: {min: function, max: function}</h2>
        <div class="chart" id="main90.2"></div>

        <h2>parallel category axis | parallelAxis: {min: undefined, max: undefined}</h2>
        <div class="chart" id="main91.1"></div>

        <h2>single category axis | singleAxis: {min: 'dataMin', max: 'dataMax'}</h2>
        <div class="chart" id="main92.1"></div>

        <h2>single category axis | singleAxis: {min: function, max: function}</h2>
        <div class="chart" id="main92.2"></div>


        <script>

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

                    if (!noDataZoom) {
                        var controller = document.createElement('div');
                        controller.style.cssText = 'position: absolute; right: 10px; top: 10px;';
                        main.appendChild(controller);
                        controller.innerHTML = [
                            '<button>Add DataZoom</button>',
                            '<button>Remove DataZoom</button>'
                        ].join('');

                        var btns = $(controller).children();
                        $(btns[0]).on('click', function () {
                            option.dataZoom = [{type: 'inside'}, {type: 'slider'}];
                            chart.setOption(option, true);
                        });
                        $(btns[1]).on('click', function () {
                            delete option.dataZoom;
                            chart.setOption(option, true);
                        });
                    }
                }
            });
        }

        </script>















        <script>
            makeChart('main1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
                    min: 'dataMin',
                    max: 'dataMax'
                },
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [43]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [43, 99]
                }]
            });
        </script>






        <script>
            makeChart('main1.1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
                },
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [43]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [43, 99]
                }]
            });
        </script>







        <script>
            makeChart('main1.2', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [43]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [43, 99]
                }]
            });
        </script>





        <script>
            makeChart('main2', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                grid: {
                    containLabel: true
                },
                xAxis: {
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
                    min: -10,
                    max: '类目3',
                    axisTick: {
                        interval: 0
                    },
                    axisLabel: {
                        interval: 0
                    }
                },
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [43]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [43, 99]
                }]
            });
        </script>





        <script>
            makeChart('main2.1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                grid: {
                    containLabel: true
                },
                xAxis: {
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
                    min: function (value) {
                        return value.min - 20;
                    },
                    max: function (value) {
                        return value.max + 20;
                    },
                    axisTick: {
                        interval: 0
                    },
                    axisLabel: {
                        interval: 0
                    }
                },
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [43]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [43, 99]
                }]
            });
        </script>






        <script>
            makeChart('main3', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {},
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [[2, 43]]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [[2, 43], [4, 99]]
                }]
            });
        </script>







        <script>
            makeChart('main4', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {min: -10, max: 10},
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [[2, 43]]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [[2, 43], [4, 99]]
                }]
            });
        </script>







        <script>
            makeChart('main4.1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    min: function (value) {
                        return value.min - 20;
                    },
                    max: function (value) {
                        return value.max + 20;
                    }
                },
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [[2, 43]]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [[2, 43], [4, 99]]
                }]
            });
        </script>

        <script>
            makeChart('main4.2', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    min: function (value) {
                        return null
                    },
                    max: function (value) {
                        return null;
                    }
                },
                yAxis: {},
                series: [{
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    name: 'one point',
                    type: 'line',
                    data: [[2, 43]]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [[2, 43], [4, 99]]
                }]
            });
        </script>





        <script>
            makeChart('main5', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {type: 'time'},
                yAxis: {},
                series: [{
                    name: 'one point',
                    type: 'line',
                    data: [
                        [new Date('2011-11-11'), 2112]
                    ]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [
                        [new Date('2011-11-11'), 2112],
                        [new Date('2012-11-12'), 122]
                    ]
                }, {
                    name: 'no point',
                    type: 'line',
                    data: []
                }]
            });
        </script>






        <script>
            makeChart('main6', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    type: 'time',
                    min: '2012-8-12',
                    max: '2012-10-01'
                },
                yAxis: {},
                series: [{
                    name: 'one point',
                    type: 'line',
                    data: [
                        [new Date('2012-9-12'), 11]
                    ]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [
                        ['2012-9-12', 11],
                        ['2012-9-18', 14]
                    ]
                }, {
                    name: 'no point',
                    type: 'line',
                    data: []
                }]
            });
        </script>






        <script>
            makeChart('main6.1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    type: 'time',
                    min: function (value) {
                        return value.min - 20 * 24 * 3600 * 1000;
                    },
                    max: function (value) {
                        return value.max + 20 * 24 * 3600 * 1000;
                    }
                },
                yAxis: {},
                series: [{
                    name: 'one point',
                    type: 'line',
                    data: [
                        [new Date('2012-9-12'), 11]
                    ]
                }, {
                    name: 'two points',
                    type: 'line',
                    data: [
                        ['2012-9-12', 11],
                        ['2012-9-18', 14]
                    ]
                }, {
                    name: 'no point',
                    type: 'line',
                    data: []
                }]
            });
        </script>







        <script>
            makeChart('main90.1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis'
                },
                polar: {},
                radiusAxis: {
                    min: 'dataMin',
                    max: 'dataMax',
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
                },
                angleAxis: {},
                series: [{
                    coordinateSystem: 'polar',
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    coordinateSystem: 'polar',
                    name: 'one point',
                    type: 'line',
                    data: [43]
                }, {
                    coordinateSystem: 'polar',
                    name: 'two points',
                    type: 'line',
                    data: [43, 99]
                }]
            });
        </script>







        <script>
            makeChart('main90.2', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis'
                },
                polar: {},
                radiusAxis: {
                    min: function (value) {
                        return value.min - 20;
                    },
                    max: function (value) {
                        return value.max + 20;
                    },
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
                },
                angleAxis: {},
                series: [{
                    coordinateSystem: 'polar',
                    name: 'no point',
                    type: 'line',
                    data: []
                }, {
                    coordinateSystem: 'polar',
                    name: 'one point',
                    type: 'line',
                    data: [43]
                }, {
                    coordinateSystem: 'polar',
                    name: 'two points',
                    type: 'line',
                    data: [43, 99]
                }]
            });
        </script>








        <script>
            makeChart('main91.1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                parallelAxis: [{
                    type: 'value',
                    dim: 0
                }, {
                    dim: 1,
                    type: 'category',
                    data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
                }],
                parallel: {
                },
                series: [{
                    name: 'no point',
                    type: 'parallel',
                    data: []
                }, {
                    name: 'one point',
                    type: 'parallel',
                    data: [[43, '良']]
                }, {
                    name: 'two points',
                    type: 'parallel',
                    data: [[43, '良'], [99, '重度污染']]
                }]
            }, true);
        </script>








        <script>
            makeChart('main92.1', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis'
                },
                singleAxis: {
                    type: 'category',
                    min: 'dataMin',
                    max: 'dataMax',
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
                },
                series: [{
                    coordinateSystem: 'singleAxis',
                    name: 'no point',
                    type: 'scatter',
                    symbolSize: 20,
                    data: []
                }, {
                    coordinateSystem: 'singleAxis',
                    name: 'one point',
                    type: 'scatter',
                    symbolSize: 20,
                    data: [[2]]
                }, {
                    coordinateSystem: 'singleAxis',
                    name: 'two points',
                    type: 'scatter',
                    symbolSize: 20,
                    data: [[2], [4]]
                }]
            }, true);
        </script>









        <script>
            makeChart('main92.2', {
                legend: {
                    data: ['no point', 'one point', 'two points'],
                    selectedMode: 'single'
                },
                tooltip: {
                    trigger: 'axis'
                },
                singleAxis: {
                    type: 'category',
                    min: function (value) {
                        return value.min - 20;
                    },
                    max: function (value) {
                        return value.max + 20;
                    },
                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
                },
                series: [{
                    coordinateSystem: 'singleAxis',
                    name: 'no point',
                    type: 'scatter',
                    symbolSize: 20,
                    data: []
                }, {
                    coordinateSystem: 'singleAxis',
                    name: 'one point',
                    type: 'scatter',
                    symbolSize: 20,
                    data: [[2]]
                }, {
                    coordinateSystem: 'singleAxis',
                    name: 'two points',
                    type: 'scatter',
                    symbolSize: 20,
                    data: [[2], [4]]
                }]
            }, true);
        </script>








    </body>
</html>