test/axis-data-min-max.html - master - githubmirror/echarts

test/axis-data-min-max.html
483 строки17 KB
100pah
refactor&feature:
17 фев 2026, 12:59
17 фев 2026, 12:59fe932a2
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="lib/simpleRequire.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <link rel="stylesheet" href="lib/reset.css" />
</head>

<body>
    <style>
        .chart {
            height: 350px;
            margin: 20px 0;
        }
    </style>

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

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

    <script>
        require(['echarts'], function (echarts) {
            // Basic data
            var baseData = [820, 932, 901, 934, 1290, 1330, 1320];
            var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

            // Data with negative values
            var negativeData = [120, -132, 201, -234, 290, -330, 320];

            // Log axis data (must be positive)
            var logData = [5, 20, 36, 100, 500, 1200, 3500];

            // Test 1: Basic dataMax usage (dataMax > actual data maximum)
            var chart1 = testHelper.create(echarts, 'main0', {
                title: 'dataMax > actual data',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        dataMax: 1555, // Greater than actual data maximum 1330
                    },
                    series: [
                        {
                            data: baseData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 2: dataMax < actual data maximum (should not affect range)
            var chart2 = testHelper.create(echarts, 'main1', {
                title: 'dataMax < actual data (no effect on range)',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        dataMax: 1000, // Less than actual data maximum 1330, should not affect
                    },
                    series: [
                        {
                            data: baseData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 3: Negative data + dataMin usage (dataMin < actual data minimum)
            var chart3 = testHelper.create(echarts, 'main2', {
                title: 'Negative data + dataMin < actual data',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        dataMin: -500, // Less than actual data minimum -330
                    },
                    series: [
                        {
                            data: negativeData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 4: Negative data + dataMin > actual data minimum (should not affect range)
            var chart4 = testHelper.create(echarts, 'main3', {
                title: 'Negative data + dataMin > actual data (no effect on range)',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        dataMin: -100, // Greater than actual data minimum -330, should not affect
                    },
                    series: [
                        {
                            data: negativeData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 5: Negative data + using both dataMin and dataMax
            var chart5 = testHelper.create(echarts, 'main4', {
                title: 'Negative data + using both dataMin and dataMax',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        dataMin: -500,
                        dataMax: 500,
                    },
                    series: [
                        {
                            data: negativeData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 6: Comparing with min/max properties
            var chart6 = testHelper.create(echarts, 'main5', {
                title: 'min/max vs dataMin/dataMax (negative data)',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        min: -500,
                        max: 500,
                    },
                    series: [
                        {
                            data: negativeData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 7: Using dataMin/dataMax on category axis (should have no effect)
            var chart7 = testHelper.create(echarts, 'main6', {
                title: 'dataMin/dataMax on category axis (no effect)',
                option: {
                    yAxis: {
                        type: 'category',
                        data: days,
                        dataMin: 2, // No effect on category axis
                        dataMax: 5, // No effect on category axis
                    },
                    xAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: negativeData,
                            type: 'bar'
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 8: Log axis + dataMin usage
            var chart8 = testHelper.create(echarts, 'main7', {
                title: 'Log axis + dataMin usage',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'log',
                        dataMin: 0.5, // Using a smaller fraction, much less than actual data minimum 5
                    },
                    series: [
                        {
                            data: logData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 9: Log axis + dataMax usage
            var chart9 = testHelper.create(echarts, 'main8', {
                title: 'Log axis + dataMax usage',
                option: {
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'log',
                        dataMax: 100000, // Greater than actual data maximum 3500
                    },
                    series: [
                        {
                            data: logData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    }
                }
            });

            // Test 10: Time axis + dataMin/dataMax usage
            var timeData = [];
            var timeLabels = [];
            var baseTime = new Date('2024-01-01').getTime();
            for (let i = 0; i < 7; i++) {
                var time = baseTime + i * 24 * 3600 * 1000; // Add days
                timeLabels.push(time);
                timeData.push([time, 820 + Math.random() * 500]);
            }

            var chart10 = testHelper.create(echarts, 'main9', {
                title: 'Time axis + dataMin/dataMax usage',
                option: {
                    xAxis: {
                        type: 'time',
                        dataMin: baseTime - 2 * 24 * 3600 * 1000, // 2 days before first data point
                        dataMax: baseTime + 8 * 24 * 3600 * 1000, // 1 day after last data point
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: timeData,
                            type: 'line',
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var date = new Date(params[0].value[0]);
                            return date.toLocaleDateString() + '<br/>' + 
                                   params[0].seriesName + ': ' + params[0].value[1].toFixed(2);
                        }
                    }
                }
            });
        });
    </script>





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

                var _ctx = {
                    yAxisInverse: false,
                    yAxisMinMax: [3, -3]
                };

                function createOption() {
                    var xAxisData = [];
                    var data1 = [];
                    var data2 = [];
                    var data3 = [];

                    for (var i = 0; i < 5; i++) {
                        xAxisData.push('Category' + i);
                        data1.push((-Math.random() - 0.2).toFixed(3));
                        data2.push((Math.random() + 0.3).toFixed(3));
                        data3.push((Math.random() + 0.2).toFixed(3));
                    }

                    xAxisData.push({
                        value: 'Category' + i,
                        textStyle: {
                            color: 'red'
                        }
                    });
                    data1.push('-');
                    data2.push('-');
                    data3.push('-');

                    for (; i < 10; i++) {
                        xAxisData.push('Category' + i);
                        data1.push((-Math.random() - 0.2).toFixed(3));
                        data2.push((Math.random() + 0.3).toFixed(3));
                        data3.push((Math.random() + 0.2).toFixed(3));
                    }

                    var option = {
                        legend: {
                            data: ['line', 'line2', 'line3']
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line'
                            }
                        },
                        xAxis: {
                            data: xAxisData,
                            boundaryGap: false,
                            // inverse: true,
                            splitArea: {
                                show: true
                            },
                        },
                        yAxis: {
                            splitLine: {
                                show: true
                            },
                            axisTick: {
                                show: true
                            },
                            axisLine: {
                                show: true
                            },
                            inverse: _ctx.yAxisInverse,
                            min: _ctx.yAxisMinMax[0],
                            max: _ctx.yAxisMinMax[1],
                        },
                        series: [{
                            name: 'line',
                            type: 'line',
                            stack: 'all',
                            symbolSize: 10,
                            data: data1,
                            areaStyle: {},
                            smooth: true
                        }, {
                            name: 'line2',
                            type: 'line',
                            stack: 'all',
                            symbolSize: 10,
                            data: data2,
                            areaStyle: {},
                            smooth: true
                        }, {
                            name: 'line3',
                            type: 'line',
                            stack: 'all',
                            symbolSize: 10,
                            data: data3,
                            areaStyle: {},
                            smooth: true
                        }]
                    };
                    return option;
                }

                function updateChart() {
                    myChart.setOption(createOption());
                }

                var myChart = testHelper.create(echarts, 'main_invalid_min_max_permissive', {
                    title: [
                        'Invalid but permissive: yAxis.min > yAxis.max',
                        'yAxis should inverse',
                    ],
                    option: createOption(),
                    height: 400,
                    inputsStyle: 'compact',
                    inputs: [{
                        type: 'select',
                        name: 'yAxis min/max:',
                        values: [
                            _ctx.yAxisMinMax,
                            [-0.5, 5],
                            [undefined, undefined],
                            ['dataMin', 'dataMax'],
                            ['dataMax', 'dataMin'],
                            [NaN, NaN],
                        ],
                        onchange() {
                            _ctx.yAxisMinMax = this.value;
                            updateChart();
                        }
                    }, {
                        type: 'select',
                        name: 'yAxis.inverse:',
                        values: [_ctx.yAxisInverse, !_ctx.yAxisInverse],
                        onchange() {
                            _ctx.yAxisInverse = this.value;
                            updateChart();
                        }
                    }]
                });
            });
        </script>



</body>

</html>