fix: bar chart abnormal when dataZoom filterMode: 'empty'. Fix #9882

fbb47dd8 · sushuang · Ovilia · 243b22f4 · fbb47dd8 · fbb47dd8
4 changed file
--- a/src/component/dataZoom/AxisProxy.js
+++ b/src/component/dataZoom/AxisProxy.js
@@ -390,7 +390,7 @@ AxisProxy.prototype = {
                each(dataDims, function (dim) {
                    if (filterMode === 'empty') {
                        seriesModel.setData(
-                            seriesData.map(dim, function (value) {
+                            seriesData = seriesData.map(dim, function (value) {
                                return !isInWindow(value) ? NaN : value;
                            })
                        );

--- a/src/data/List.js
+++ b/src/data/List.js
@@ -859,14 +859,11 @@ listProto.getValues = function (dimensions, idx /*, stack */) {
 */
 listProto.hasValue = function (idx) {
    var dataDimsOnCoord = this._dimensionsSummary.dataDimsOnCoord;
-    var dimensionInfos = this._dimensionInfos;
    for (var i = 0, len = dataDimsOnCoord.length; i < len; i++) {
-        if (
-            // Ordinal type can be string or number
-            dimensionInfos[dataDimsOnCoord[i]].type !== 'ordinal'
-            // FIXME check ordinal when using index?
-            && isNaN(this.get(dataDimsOnCoord[i], idx))
-        ) {
+        // Ordinal type originally can be string or number.
+        // But when an ordinal type is used on coord, it can
+        // not be string but only number. So we can also use isNaN.
+        if (isNaN(this.get(dataDimsOnCoord[i], idx))) {
            return false;
        }
    }

--- a/src/layout/barGrid.js
+++ b/src/layout/barGrid.js
@@ -295,7 +295,8 @@ export function layout(seriesType, ecModel) {
            var value = data.get(valueDim, idx);
            var baseValue = data.get(baseDim, idx);

-            if (isNaN(value)) {
+            // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
+            if (isNaN(value) || isNaN(baseValue)) {
                continue;
            }


--- a/test/bar-others.html
+++ b/test/bar-others.html
+<!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/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+        <div id="main0"></div>
+
+
+        <script>
+
+            var option;
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                // $.getJSON('./data/nutrients.json', function (data) {
+                // });
+
+                var option = {
+                    xAxis: {
+                        data: ['a', 'b', 'c', 'd', 'e']
+                    },
+                    yAxis: {},
+                    dataZoom: {
+                        filterMode: 'empty',
+                        start: 90,
+                        end: 90
+                    },
+                    series: {
+                        type: 'bar',
+                        data: [
+                            55,
+                            13,
+                            187,
+                            {value: 123, itemStyle: {color: 'blue'}},
+                            {value: 88, itemStyle: {color: 'yellow'}}
+                        ]
+                    }
+                }
+
+                var chart = testHelper.create(echarts, 'main0', {
+                    title: 'extreme data zoom range with filterMode: "empty": Should only **show one bar**',
+                    option: option
+                });
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file