fix(axis): fix extra ticks added caused by rounding error. add test cases for splitArea

bf37db02 · pissang · Yi Shen · 2d12294f · bf37db02 · bf37db02
隐藏空白更改
内联并排

Showing with 188 addition and 2 deletion

src/coord/Axis.js src/coord/Axis.js +6 -2

test/axis-splitArea.html test/axis-splitArea.html +182 -0

未找到文件。
--- a/src/coord/Axis.js
+++ b/src/coord/Axis.js
@@ -18,7 +18,7 @@
 */

 import {each, map} from 'zrender/src/core/util';
-import {linearMap, getPixelPrecision} from '../util/number';
+import {linearMap, getPixelPrecision, round} from '../util/number';
 import {
    createAxisTicks,
    createAxisLabels,
@@ -307,7 +307,6 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
        last = ticksCoords[1] = {coord: axisExtent[0]};
    }
    else {
-
        var crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
        var shift = (ticksCoords[ticksLen - 1].coord - ticksCoords[0].coord) / crossLen;

@@ -330,6 +329,7 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith

    var inverse = axisExtent[0] > axisExtent[1];

+    // Handling clamp.
    if (littleThan(ticksCoords[0].coord, axisExtent[0])) {
        clamp ? (ticksCoords[0].coord = axisExtent[0]) : ticksCoords.shift();
    }
@@ -344,6 +344,10 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
    }

    function littleThan(a, b) {
+        // Avoid rounding error cause calculated tick coord different with extent.
+        // It may cause an extra unecessary tick added.
+        a = round(a);
+        b = round(b);
        return inverse ? a > b : a < b;
    }
 }

--- a/test/axis-splitArea.html
+++ b/test/axis-splitArea.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>
+        <div id="main1"></div>
+        <div id="main2"></div>
+
+
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#EAECF6'
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#EAECF6'
+                        }
+                    },
+                    axisLabel: {
+                        show: true
+                    },
+                    splitArea: {
+                        show: true,
+                        areaStyle: {
+                            color: ['white', 'white', 'white', 'white', 'white', 'white', '#008cd5'],
+                            opacity: 0.1,
+                        }
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#EAECF6'
+                        }
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: 'transparent'
+                        }
+                    },
+                },
+                series: [{
+                    data: [820, 932, 901, 934, 1290, 1330, 1320],
+                    type: 'line'
+                }, {
+                    data: [820, 932, 901, 934, 1290, 1330, 1320].map(t => t * 0.1),
+                    type: 'line'
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Color array should be in right order in splitArea.',
+                    "'white', 'white', 'white', 'white', 'white', 'white', '#008cd5'",
+                    'Case from issue #10948'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            option = {
+                color: ['#3398DB'],
+                tooltip : {
+                    trigger: 'axis',
+                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis : [
+                    {
+                        type : 'category',
+                        data : ['1', '2', '3', '4', '5', '6', '7','8'],
+                        axisTick: {
+                            alignWithLabel: true
+                        },
+                        splitArea:{
+                            show:true,
+                            areaStyle:{
+                                color:['green','red','red','red','red','red','red','black']
+                            }
+                        }
+                    }
+                ],
+                yAxis : [
+                    {
+                        type : 'value'
+                    }
+                ],
+                series : [
+                    {
+                        name:'直接访问',
+                        type:'bar',
+                        barWidth: '60%',
+                        data:[10, 52, 200, 334, 390, 330, 220,100]
+                    }
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Color array should be in right order in splitArea.',
+                    "'green','red','red','red','red','red','red','black'",
+                    'Case from issue #11438'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+    </body>
+</html>
+