test/bar-overflow-plot2.html - master - githubmirror/echarts

test/bar-overflow-plot2.html
661 строка26 KB
100pah
fix: (1) Fix: fix bar overflow issue on category axis with boundaryGap: false - use the newly added containShape handler. (2) Fix regression: Drop the previous containShape strategy on bar series, use a simple strategy for better compatibility. (3) Fix regression: Fix new added bar clip feature on single data item case. (4) Fix regression: Clarify code.
02 апр 2026, 13:03
02 апр 2026, 13:033973b21

<!--
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>

        <div id="main_onZero" class="chart"></div>
        <div id="main_category_axis" class="chart"></div>
        <div id="main_value_axis" class="chart"></div>



        <script type="text/javascript">
            require(['echarts'], function (echarts) {

                var _ctx = {
                    yAxisOnZero: {
                        text: 'yAxis.axisLine.onZero:',
                        value: 'NOT_SET',
                        values: ['NOT_SET', true, false, undefined, 'auto'],
                    },
                    useDataZoom: {
                        text: 'useDataZoom:',
                        value: true,
                        values: [true, false],
                    },
                    xAxisShowMinMaxLabel: {
                        text: 'xAxisShowMinMaxLabel:',
                        value: undefined,
                        values: [undefined, true, false],
                    },
                    br: {},
                    dataZoomLabelPrecision: {
                        text: 'dataZoomLabelPrecision:',
                        value: undefined,
                        values: [undefined, 0, 2, 4, 8],
                    },
                    stack: {
                        text: 'stack',
                        value: false,
                        values: [false, true],
                    },
                };

                function createData() {
                    var MIN_X = -0.0025;
                    var MAX_X = 0.0035;
                    var actualMinX = Infinity;
                    var data0 = [];
                    var data1 = [];
                    var bar_partially_negative = [];

                    var last = 360;
                    var lastDelta = 20;
                    var dataSet = {bar_a: [], bar_b: [], bar_partially_negative: []};
                    var minXSet = {bar_a: Infinity, bar_b: Infinity, bar_partially_negative: Infinity};

                    for (var i = MIN_X; i <= MAX_X; i = +(i + 0.0001).toFixed(10)) {
                        lastDelta += (Math.random() - 0.5) * 5;
                        last += lastDelta;
                        if (i >= 0) {
                            addItem('bar_a', i, last);
                            addItem('bar_b', i, Math.max(90, last - Math.random() * 700));
                        }
                        if (i < 0.0030) {
                            addItem('bar_partially_negative', i, Math.max(70, last + Math.random() * 600));
                        }
                    }
                    function addItem(prop, x, y) {
                        dataSet[prop].push([x, y]);
                        minXSet[prop] = Math.min(minXSet[prop], x);
                    }
                    console.log(dataSet, minXSet)

                    return {dataSet, minXSet};
                }

                var _data = createData();

                function createOption() {
                    var option = {
                        grid: {
                            top: 50,
                            bottom: 100,
                            show: true,
                            backgroundColor: '#fee',
                            borderWidth: 0,
                        },
                        legend: {
                            top: 5,
                            selected: {
                                'bar_partially_negative': false,
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        dataZoom: _ctx.useDataZoom.value
                            ? [{
                                type: 'slider',
                                labelPrecision: _ctx.dataZoomLabelPrecision.value,
                                valuePrecision: 4,
                            }, {
                                type: 'inside',
                                labelPrecision: _ctx.dataZoomLabelPrecision.value,
                                valuePrecision: 4,
                            }]
                            : undefined,
                        xAxis: {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                showMinLabel: _ctx.xAxisShowMinMaxLabel.value,
                                showMaxLabel: _ctx.xAxisShowMinMaxLabel.value,
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        series: [{
                            name: 'bar_a',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_a
                        }, {
                            name: 'bar_b',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_b
                        }, {
                            name: 'bar_partially_negative',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_partially_negative
                        }]
                    };

                    if (_ctx.yAxisOnZero.value !== 'NOT_SET') {
                        option.yAxis.axisLine.onZero = _ctx.yAxisOnZero.value;
                    }
                    if (_ctx.stack.value) {
                        option.series.forEach(individualSeries => {
                            individualSeries.stack = 'a';
                        });
                    }

                    return option;
                }

                function updateChart() {
                    myChart.setOption(createOption(), {notMerge: true});
                }

                var myChart = testHelper.create(echarts, 'main_onZero', {
                    title: [
                        'Bars must not overflow the xAxis. (value xAxis)',
                        'Check yAxis onZero to xAxis (xAxis is value axis).',
                        `series data min value is **${testHelper.printObject(_data.minXSet)}**`,
                        `dataZoom min label should **not below zero**`,
                    ],
                    option: createOption(),
                    inputsStyle: 'compact',
                    inputs: testHelper.createInputsSimply(_ctx, updateChart),
                });
            })
        </script>






        <script type="text/javascript">
            require(['echarts'], function (echarts) {

                var _ctx = {
                    dataCount: {
                        value: 'ALL',
                        values: ['ALL', 0, 1, 2, 3]
                    },
                    useDataZoom: {
                        text: 'useDataZoom:',
                        value: true,
                        values: [true, false],
                    },
                    br0: {},
                    xAxisShowMinMaxLabel: {
                        text: 'xAxisShowMinMaxLabel:',
                        value: undefined,
                        values: [undefined, true, false],
                    },
                    br1: {},
                    xAxisContainShape: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', false, true]
                    },
                    clip: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', false, true],
                    },
                    br2: {},
                    dataZoomLabelPrecision: {
                        text: 'dataZoomLabelPrecision:',
                        value: undefined,
                        values: [undefined, 0, 2, 4, 8],
                    },
                    stack: {
                        text: 'stack',
                        value: false,
                        values: [false, true],
                    },
                    xAxisBoundaryGap: {
                        value: false,
                        values: [false, true],
                    },
                    barWidth: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', 30, '20%', 100]
                    },
                };

                function createOption() {

                    function createData() {
                        var MIN_X = -0.0025;
                        var MAX_X = 0.0035;
                        var actualMinX = Infinity;

                        var last = 360;
                        var lastDelta = 20;
                        var dataSet = {bar_a: [], bar_b: [], bar_c: []};
                        var minXSet = {bar_a: Infinity, bar_b: Infinity, bar_c: Infinity};

                        var idx = 0;
                        for (var i = MIN_X;
                            i <= MAX_X
                            && (_ctx.dataCount.value === 'ALL' || idx < _ctx.dataCount.value);
                            i = +(i + 0.0001).toFixed(10), idx++
                        ) {
                            lastDelta += (Math.random() - 0.5) * 5;
                            last += lastDelta;
                            var xVal = (i + 'c').replace('.', '/');
                            addItem('bar_a', xVal, last);
                            addItem('bar_b', xVal, Math.max(90, last - Math.random() * 700));
                            addItem('bar_c', xVal, Math.max(70, last + Math.random() * 600));
                        }
                        function addItem(prop, x, y) {
                            dataSet[prop].push([x, y]);
                            minXSet[prop] = Math.min(minXSet[prop], x);
                        }
                        console.log(dataSet, minXSet)

                        return {dataSet, minXSet};
                    }

                    var _data = createData();

                    var option = {
                        grid: {
                            top: 50,
                            bottom: 100,
                            width: 400,
                            show: true,
                            backgroundColor: '#eef',
                            borderWidth: 0,
                        },
                        legend: {
                            top: 5,
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        dataZoom: _ctx.useDataZoom.value
                            ? [{
                                type: 'slider',
                                labelPrecision: _ctx.dataZoomLabelPrecision.value,
                                start: 20,
                                end: 40,
                            }, {
                                type: 'inside',
                                labelPrecision: _ctx.dataZoomLabelPrecision.value,
                                start: 20,
                                end: 40,
                            }]
                            : undefined,
                        xAxis: {
                            type: 'category',
                            boundaryGap: _ctx.xAxisBoundaryGap.value,
                            splitLine: {
                                show: true
                            },
                            axisTick: {
                                show: true
                            },
                            axisLabel: {
                                showMinLabel: _ctx.xAxisShowMinMaxLabel.value,
                                showMaxLabel: _ctx.xAxisShowMinMaxLabel.value,
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: true,
                            },
                            axisTick: {
                                show: true,
                            },
                            splitLine: {
                                show: true
                            }
                        },
                        series: [{
                            name: 'bar_a',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_a
                        }, {
                            name: 'bar_b',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_b
                        }, {
                            name: 'bar_c',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_c
                        }]
                    };

                    if (_ctx.stack.value) {
                        option.series.forEach(individualSeries => {
                            individualSeries.stack = 'a';
                        });
                    }
                    if (_ctx.barWidth.value !== 'NOT_SET') {
                        option.series.forEach(individualSeries => {
                            individualSeries.barWidth = _ctx.barWidth.value;
                        });
                    }
                    if (_ctx.xAxisContainShape.value !== 'NOT_SET') {
                        option.xAxis.containShape = _ctx.xAxisContainShape.value;
                    }
                    if (_ctx.clip.value !== 'NOT_SET') {
                        option.series.forEach(function (series) {
                            series.clip = _ctx.clip.value;
                        });
                    }

                    return option;
                }

                function updateChart() {
                    myChart.setOption(createOption(), {notMerge: true});
                }

                var myChart = testHelper.create(echarts, 'main_category_axis', {
                    title: [
                        'Bars must not overflow the xAxis. (category xAxis)',
                    ],
                    option: createOption(),
                    inputsStyle: 'compact',
                    inputs: testHelper.createInputsSimply(_ctx, updateChart),
                });
            })
        </script>






        <script type="text/javascript">
            require(['echarts'], function (echarts) {

                var _ctx = {
                    dataCount: {
                        value: 'ALL',
                        values: ['ALL', 0, 1, 2, 3]
                    },
                    useDataZoom: {
                        text: 'useDataZoom:',
                        value: true,
                        values: [true, false],
                    },
                    br0: {},
                    yAxisOnZero: {
                        text: 'yAxis.axisLine.onZero:',
                        value: 'NOT_SET',
                        values: ['NOT_SET', true, false, undefined, 'auto'],
                    },
                    xAxisShowMinMaxLabel: {
                        text: 'xAxisShowMinMaxLabel:',
                        value: undefined,
                        values: [undefined, true, false],
                    },
                    br1: {},
                    xAxisMin: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', 0, -0.5, -1],
                    },
                    xAxisMax: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', 0, 0.5, 1],
                    },
                    xAxisContainShape: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', false, true]
                    },
                    clip: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', false, true],
                    },
                    br2: {},
                    dataZoomLabelPrecision: {
                        text: 'dataZoomLabelPrecision:',
                        value: undefined,
                        values: [undefined, 0, 2, 4, 8],
                    },
                    stack: {
                        text: 'stack',
                        value: false,
                        values: [false, true],
                    },
                    xAxisBoundaryGap: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', ['20%', '20%']],
                    },
                    barWidth: {
                        value: 'NOT_SET',
                        values: ['NOT_SET', 30, '20%', 100]
                    },
                };

                function createOption() {

                    function createData() {
                        var MIN_X = -0.0025;
                        var MAX_X = 0.0035;
                        var actualMinX = Infinity;

                        var last = 360;
                        var lastDelta = 20;
                        var dataSet = {bar_a: [], bar_b: [], bar_c: []};
                        var minXSet = {bar_a: Infinity, bar_b: Infinity, bar_c: Infinity};

                        var idx = 0;
                        for (var i = MIN_X;
                            i <= MAX_X
                            && (_ctx.dataCount.value === 'ALL' || idx < _ctx.dataCount.value);
                            i = +(i + 0.0001).toFixed(10), idx++
                        ) {
                            lastDelta += (Math.random() - 0.5) * 5;
                            last += lastDelta;
                            var xVal = idx;
                            addItem('bar_a', xVal, last);
                            addItem('bar_b', xVal, Math.max(90, last - Math.random() * 700));
                            addItem('bar_c', xVal, Math.max(70, last + Math.random() * 600));
                        }
                        function addItem(prop, x, y) {
                            dataSet[prop].push([x, y]);
                            minXSet[prop] = Math.min(minXSet[prop], x);
                        }
                        console.log(dataSet, minXSet)

                        return {dataSet, minXSet};
                    }

                    var _data = createData();

                    var option = {
                        grid: {
                            top: 50,
                            bottom: 100,
                            width: 400,
                            show: true,
                            backgroundColor: '#eef',
                            borderWidth: 0,
                        },
                        legend: {
                            top: 5,
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        dataZoom: _ctx.useDataZoom.value
                            ? [{
                                type: 'slider',
                                labelPrecision: _ctx.dataZoomLabelPrecision.value,
                                start: 20,
                                end: 40,
                            }, {
                                type: 'inside',
                                labelPrecision: _ctx.dataZoomLabelPrecision.value,
                                start: 20,
                                end: 40,
                            }]
                            : undefined,
                        xAxis: {
                            type: 'value',
                            splitLine: {
                                show: true
                            },
                            axisTick: {
                                show: true
                            },
                            axisLabel: {
                                showMinLabel: _ctx.xAxisShowMinMaxLabel.value,
                                showMaxLabel: _ctx.xAxisShowMinMaxLabel.value,
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: true,
                            },
                            axisTick: {
                                show: true,
                            },
                            splitLine: {
                                show: true
                            }
                        },
                        series: [{
                            name: 'bar_a',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_a
                        }, {
                            name: 'bar_b',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_b
                        }, {
                            name: 'bar_c',
                            type: 'bar',
                            itemStyle: {
                                barBorderRadius: 3,
                            },
                            // barMaxWidth: 10,
                            data: _data.dataSet.bar_c
                        }]
                    };

                    if (_ctx.yAxisOnZero.value !== 'NOT_SET') {
                        option.yAxis.axisLine.onZero = _ctx.yAxisOnZero.value;
                    }
                    if (_ctx.stack.value) {
                        option.series.forEach(individualSeries => {
                            individualSeries.stack = 'a';
                        });
                    }
                    if (_ctx.barWidth.value !== 'NOT_SET') {
                        option.series.forEach(individualSeries => {
                            individualSeries.barWidth = _ctx.barWidth.value;
                        });
                    }
                    if (_ctx.xAxisContainShape.value !== 'NOT_SET') {
                        option.xAxis.containShape = _ctx.xAxisContainShape.value;
                    }
                    if (_ctx.xAxisMin.value !== 'NOT_SET') {
                        option.xAxis.min = _ctx.xAxisMin.value;
                    }
                    if (_ctx.xAxisMax.value !== 'NOT_SET') {
                        option.xAxis.max = _ctx.xAxisMax.value;
                    }
                    if (_ctx.clip.value !== 'NOT_SET') {
                        option.series.forEach(function (series) {
                            series.clip = _ctx.clip.value;
                        });
                    }
                    if (_ctx.xAxisBoundaryGap.value !== 'NOT_SET') {
                        option.xAxis.boundaryGap = _ctx.xAxisBoundaryGap.value;
                    }

                    return option;
                }

                function updateChart() {
                    myChart.setOption(createOption(), {notMerge: true});
                }

                var myChart = testHelper.create(echarts, 'main_value_axis', {
                    title: [
                        'Bars must not overflow the xAxis. (value xAxis)',
                    ],
                    option: createOption(),
                    inputsStyle: 'compact',
                    inputs: testHelper.createInputsSimply(_ctx, updateChart),
                });
            })
        </script>


    </body>
</html>