githubmirror/echarts

test/bar-stack.html
828 строк29 KB
100pah
fix: Temporarily fix incorrect stack base dimension selection when both axes are value axes.
06 мар 2026, 16:16
06 мар 2026, 16:1618bedbb
<!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>
        </style>


        <div id="main1"></div>
        <div id="main2_source_format_original"></div>
        <div id="main2_dataset"></div>
        <div id="main3"></div>
        <div id="main_bar_stack_on_value_or_time_axis"></div>




        <script>

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

                var option = {
                    "tooltip": {
                        "trigger": "axis"
                    },
                    "xAxis": {
                        "data": [
                            "",
                            "Good",
                            "Slightly polluted",
                            "Excellent",
                            "Medially polluted",
                            "Severely polluted"
                        ]
                    },
                    "yAxis": {
                    },
                    grid: {
                        right: 200
                    },
                    "series": [
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Clear",
                            "data": [
                                [
                                    "",
                                    48
                                ],
                                [
                                    "Good",
                                    41.38805970149254
                                ],
                                [
                                    "Slightly polluted",
                                    58.78378378378378
                                ],
                                [
                                    "Excellent",
                                    21.5
                                ],
                                [
                                    "Medially polluted",
                                    64.66666666666667
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Cloudy",
                            "data": [
                                [
                                    "Good",
                                    41.49246231155779
                                ],
                                [
                                    "Slightly polluted",
                                    62.5
                                ],
                                [
                                    "Excellent",
                                    22.38888888888889
                                ],
                                [
                                    "Medially polluted",
                                    63.25
                                ],
                                [
                                    "Severely polluted",
                                    85.66666666666667
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Overcast",
                            "data": [
                                [
                                    "Good",
                                    39.73170731707317
                                ],
                                [
                                    "Excellent",
                                    22.93548387096774
                                ],
                                [
                                    "Slightly polluted",
                                    64.75
                                ],
                                [
                                    "Medially polluted",
                                    121.5
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Light rain",
                            "data": [
                                [
                                    "Slightly polluted",
                                    60.09090909090909
                                ],
                                [
                                    "Good",
                                    39.15277777777778
                                ],
                                [
                                    "Excellent",
                                    19.822222222222223
                                ],
                                [
                                    "Severely polluted",
                                    82
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Moderate to heavy rain",
                            "data": [
                                [
                                    "Excellent",
                                    20.2
                                ],
                                [
                                    "Good",
                                    33.875
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Fog",
                            "data": [
                                [
                                    "Medially polluted",
                                    123.5
                                ],
                                [
                                    "Slightly polluted",
                                    105.5
                                ],
                                [
                                    "Good",
                                    71
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Moderate rain",
                            "data": [
                                [
                                    "Excellent",
                                    19.125
                                ],
                                [
                                    "Good",
                                    30.071428571428573
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Shower",
                            "data": [
                                [
                                    "Excellent",
                                    21.571428571428573
                                ],
                                [
                                    "Good",
                                    37.523809523809526
                                ],
                                [
                                    "Slightly polluted",
                                    69.33333333333333
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Thundershower",
                            "data": [
                                [
                                    "Good",
                                    31.17241379310345
                                ],
                                [
                                    "Excellent",
                                    20.6
                                ],
                                [
                                    "Slightly polluted",
                                    43.75
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Heavy rain",
                            "data": [
                                [
                                    "Excellent",
                                    23.142857142857142
                                ],
                                [
                                    "Good",
                                    30.285714285714285
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Rainstorm",
                            "data": [
                                [
                                    "Excellent",
                                    19.142857142857142
                                ],
                                [
                                    "Good",
                                    31.083333333333332
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Slight to moderate rain",
                            "data": [
                                [
                                    "Good",
                                    33.23529411764706
                                ],
                                [
                                    "Excellent",
                                    18.857142857142858
                                ],
                                [
                                    "Slightly polluted",
                                    53
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        },
                        {
                            "type": "bar",
                            "stack": "WEATHER1",
                            "name": "Heavy rain to rainstorm",
                            "data": [
                                [
                                    "Excellent",
                                    18
                                ]
                            ],
                            "encode": {
                                "x": [
                                    0
                                ],
                                "y": [
                                    1
                                ]
                            }
                        }
                    ],
                    "legend": {
                        orient: 'vertical',
                        right: 10
                    }
                }

                testHelper.create(echarts, 'main1', {
                    title: 'Check bars should not be overflow the Y extent. (#9346)',
                    option: option,
                    height: 500
                });
            });

        </script>







        <script>

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

                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['a', 'b', 'c']
                    },
                    yAxis: {
                    },
                    legend: {
                    },
                    series: [{
                        name: 'a',
                        type: 'bar',
                        stack: 'all',
                        data: [10, 20, 30],
                        label: {show: true}
                    }, {
                        name: 'b',
                        type: 'bar',
                        stack: 'all',
                        label: {show: true},
                        data: [7, 17, 27]
                    }, {
                        name: 'c',
                        type: 'bar',
                        label: {show: true},
                        data: [9, 19, 29]
                    }]
                };

                var chart = testHelper.create(echarts, 'main2_source_format_original', {
                    title: 'data in series',
                    option: option,
                    height: 300,
                    buttons: [{
                        text: 'stack: b+c',
                        onclick: function () {
                            var option2 = {
                                series: [
                                    {name: 'a', stack: undefined},
                                    {name: 'b', stack: 'all'},
                                    {name: 'c', stack: 'all'}
                                ]
                            };
                            chart.setOption(option2);
                            commonAsserts(false, true, true);
                        }
                    }, {
                        text: 'stack: a+b',
                        onclick: function () {
                            var option2 = {
                                series: [
                                    {name: 'a', stack: 'all'},
                                    {name: 'b', stack: 'all'},
                                    {name: 'c', stack: undefined}
                                ]
                            };
                            chart.setOption(option2);
                            commonAsserts(true, true, false);
                        }
                    }]
                });

                commonAsserts(true, true, false);

                // After click, chunks count should be the same.
                function commonAsserts(aIsStack, bIsStack, cIsStack) {
                    testHelper.printAssert(chart, function (assert) {
                        var ecModel = chart.getModel();
                        var storageA = ecModel.getSeriesByIndex(0).getData().getStore();
                        var storageB = ecModel.getSeriesByIndex(1).getData().getStore();
                        var storageC = ecModel.getSeriesByIndex(2).getData().getStore();
                        assert(
                            storageA !== storageB
                            && storageB !== storageC
                            && storageC !== storageA
                        );
                        // 2 more dimension for data stack calculation for each series.
                        function getExpectedChunkCount(isStack) {
                            var dimIndexMax = 1;
                            if (isStack) {
                                return dimIndexMax + 1 + 2;
                            }
                            else {
                                return dimIndexMax + 1;
                            }
                        }
                        assert(storageA._chunks.length === getExpectedChunkCount(aIsStack));
                        assert(storageB._chunks.length === getExpectedChunkCount(bIsStack));
                        assert(storageC._chunks.length === getExpectedChunkCount(cIsStack));
                    });
                }

            });

        </script>







        <script>

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

                var option = {
                    dataset: {
                        source: [
                            ['a', 'b', 'c'],
                            [10, 20, 30],
                            [7, 17, 27],
                            [9, 19, 29]
                        ]
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                    },
                    legend: {
                    },
                    series: [{
                        name: 'a',
                        type: 'bar',
                        stack: 'all',
                        seriesLayoutBy: 'row',
                        encode: {x: 0, y: 1},
                        label: {show: true}
                    }, {
                        name: 'b',
                        type: 'bar',
                        stack: 'all',
                        seriesLayoutBy: 'row',
                        encode: {x: 0, y: 2},
                        label: {show: true},
                    }, {
                        name: 'c',
                        type: 'bar',
                        seriesLayoutBy: 'row',
                        encode: {x: 0, y: 3},
                        label: {show: true}
                    }]
                };

                var chart = testHelper.create(echarts, 'main2_dataset', {
                    title: 'data in dataset',
                    option: option,
                    height: 300,
                    buttons: [{
                        text: 'stack: b+c',
                        onclick: function () {
                            var option2 = {
                                series: [
                                    {name: 'a', stack: undefined},
                                    {name: 'b', stack: 'all'},
                                    {name: 'c', stack: 'all'}
                                ]
                            };
                            chart.setOption(option2);
                            commonAsserts([false, true, true]);
                        }
                    }, {
                        text: 'stack: a+b',
                        onclick: function () {
                            var option2 = {
                                series: [
                                    {name: 'a', stack: 'all'},
                                    {name: 'b', stack: 'all'},
                                    {name: 'c', stack: undefined}
                                ]
                            };
                            chart.setOption(option2);
                            commonAsserts([true, true, false]);
                        }
                    }]
                });

                var sharedStoreStacks = [];
                commonAsserts([true, true, false]);

                // After click, chunks count should be the same.
                function commonAsserts(isStackArr) {
                    for (var i = 0; i < isStackArr.length; i++) {
                        sharedStoreStacks[i] |= isStackArr[i];
                    }
                    testHelper.printAssert(chart, function (assert) {
                        var ecModel = chart.getModel();
                        var storageA = ecModel.getSeriesByIndex(0).getData().getStore();
                        var storageB = ecModel.getSeriesByIndex(1).getData().getStore();
                        var storageC = ecModel.getSeriesByIndex(2).getData().getStore();
                        assert(
                            storageA === storageB
                            && storageB === storageC
                        );
                        var stackSeriesCount = 0;
                        for (var i = 0; i < sharedStoreStacks.length; i++) {
                            if (sharedStoreStacks[i]) {
                                stackSeriesCount++;
                            }
                        }
                        var dimIndexMax = 3;
                        console.log(storageA._chunks.length);
                        // 2 more dimension for data stack calculation for each series.
                        assert(storageA._chunks.length === dimIndexMax + 1 + 2 * stackSeriesCount);
                    });
                }

            });

        </script>







        <script>

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

                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['a', 'b', 'c']
                    },
                    yAxis: {
                        inverse: true
                    },
                    legend: {
                    },
                    series: [{
                        type: 'bar',
                        stack: 'all',
                        data: [
                            10, 20, 30
                        ],
                        label: {
                            show: true,
                            fontSize: 30
                        },
                        name: 'positive'
                    }, {
                        type: 'bar',
                        stack: 'all',
                        label: {
                            show: true,
                            fontSize: 30
                        },
                        data: [
                            -10, 0, -15
                        ],
                        name: 'negative'
                    }]
                };

                var chart = testHelper.create(echarts, 'main3', {
                    title: 'Check 0 label should be at the correct place',
                    option: option,
                    height: 300
                });

            });

        </script>







        <script>

            require([
                'echarts',
                // 'data/flight.json'
                // 'theme/dark.js', // auto register if load.
            ], function (echarts /*, data */) {
                var _ctx = {
                    stack: true,
                    xAxisType: 'value',
                };

                function createOption() {
                    var option = {
                        xAxis: {
                            type: _ctx.xAxisType,
                        },
                        yAxis: {
                        },
                        legend: {
                            top: 5,
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                            }
                        },
                        series: [{
                            type: 'bar',
                            name: 'A',
                            symbolSize: 50,
                            itemStyle: {barBorderRadius: 3},
                            label: {show: true, position: 'top'},
                            data: [[1, 200], [100, 400], [500, 150]]
                        }, {
                            type: 'bar',
                            name: 'B',
                            symbolSize: 50,
                            itemStyle: {barBorderRadius: 3},
                            label: {show: true, position: 'top'},
                            data: [[1, 200], [100, 200], [500, 50]]
                        }, {
                            type: 'bar',
                            name: 'C',
                            symbolSize: 50,
                            itemStyle: {barBorderRadius: 3},
                            label: {show: true, position: 'top'},
                            data: [[1, 200], [100, 300], [500, 100]]
                        }]
                    };
                    if (_ctx.stack) {
                        option.series.forEach(function (item) {
                            item.stack = 'a';
                        });
                    }

                    return option;
                }

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

                var chart = testHelper.create(echarts, 'main_bar_stack_on_value_or_time_axis', {
                    title: [
                        'bar stack on value/time axis',
                    ],
                    option: createOption(),

                    inputsStyle: 'compact',
                    inputs: [{
                        type: 'select',
                        text: 'stack:',
                        values: [true, false],
                        onchange() {
                            _ctx.stack = this.value;
                            updateChart();
                        }
                    }, {
                        type: 'select',
                        text: 'xAxisType:',
                        values: [_ctx.xAxisType, 'time'],
                        onchange() {
                            _ctx.xAxisType = this.value;
                            updateChart();
                        }
                    }]

                }); // End of `testHelper.create`

            }); // End of `require`
        </script>





    </body>
</html>