Fix #7913 (rounding error in clip symbol for line chart)

apache · Mar 12, 2018 · 89087f5 · 89087f5
1 parent 632b514
commit 89087f5
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 6 deletions.
diff --git a/src/chart/helper/SymbolDraw.js b/src/chart/helper/SymbolDraw.js
@@ -22,11 +22,13 @@ var symbolDrawProto = SymbolDraw.prototype;
 function symbolNeedsDraw(data, point, idx, opt) {
     return point && !isNaN(point[0]) && !isNaN(point[1])
         && !(opt.isIgnore && opt.isIgnore(idx))
-        // We do not set clipShape on group, because it will
-        // cut part of the symbol element shape.
+        // We do not set clipShape on group, because it will cut part of
+        // the symbol element shape. We use the same clip shape here as
+        // the line clip.
         && !(opt.clipShape && !opt.clipShape.contain(point[0], point[1]))
         && data.getItemVisual(idx, 'symbol') !== 'none';
 }
+
 /**
  * Update symbols draw by new data
  * @param {module:echarts/data/List} data

diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js
@@ -9,6 +9,7 @@ import * as graphic from '../../util/graphic';
 import * as modelUtil from '../../util/model';
 import {Polyline, Polygon} from './poly';
 import ChartView from '../../view/Chart';
+import {round} from '../../util/number';
 import {prepareDataCoordInfo, getStackedOnPoint} from './helper';
 
 function isPointsSame(points1, points2) {
@@ -81,6 +82,14 @@ function createGridClipShape(cartesian, hasAnimation, seriesModel) {
         width += expandSize * 2;
     }
 
+    // Avoid numberic rounding error (when the point is on the edge,
+    // the result may be unexpectedly by rounding error).
+    // See #7913 and `test/dataZoom-clip.html`.
+    x = round(x, 1);
+    y = round(y, 1);
+    width = round(width, 1);
+    height = round(height, 1);
+
     var clipPath = new graphic.Rect({
         shape: {
             x: x,
@@ -114,10 +123,10 @@ function createPolarClipShape(polar, hasAnimation, seriesModel) {
 
     var clipPath = new graphic.Sector({
         shape: {
-            cx: polar.cx,
-            cy: polar.cy,
-            r0: radiusExtent[0],
-            r: radiusExtent[1],
+            cx: round(polar.cx, 1),
+            cy: round(polar.cy, 1),
+            r0: round(radiusExtent[0], 1),
+            r: round(radiusExtent[1], 1),
             startAngle: -angleExtent[0] * RADIAN,
             endAngle: -angleExtent[1] * RADIAN,
             clockwise: angleAxis.inverse

diff --git a/test/dataZoom-clip.html b/test/dataZoom-clip.html
@@ -18,6 +18,7 @@
         </style>
 
         <div id="main0"></div>
+        <div id="main1"></div>
 
 
 
@@ -94,5 +95,66 @@
 
 
         </script>
+
+
+
+
+
+
+        <script>
+            option = {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['first', 'middle', 'last']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name:'邮件营销',
+                        type:'line',
+                        stack: '总量',
+                        symbolSize: 20,
+                        data:[120, 132, 101]
+                    },
+                    // {
+                    //     name:'联盟广告',
+                    //     type:'line',
+                    //     stack: '总量',
+                    //     symbolSize: 20,
+                    //     data:[220, 182, 191]
+                    // }
+                ]
+            };
+
+            chart = myChart = testHelper.create(echarts, 'main1', {
+                title: 'The first and last symbols (on the edge) should be displayed.',
+                option: option
+            });
+
+
+        </script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     </body>
 </html>