fix(line): axis pointer highlights data outside of chart #11360 (#11548)

* fix(line): axis pointer highlights data outside of chart #11360 * fix: should't draw symbol outside clipShapeForSymbol
apache · Nov 6, 2019 · 33d14b8 · 33d14b8
1 parent fbbbbd3
commit 33d14b8
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js
@@ -369,6 +369,7 @@ export default ChartView.extend({
                 clipShapeForSymbol.r1 += 0.5;
             }
         }
+        this._clipShapeForSymbol = clipShapeForSymbol;
         // Initialization animation or coordinate system changed
         if (
             !(polyline && prevCoordSys.type === coordSys.type && step === this._step)
@@ -524,6 +525,10 @@ export default ChartView.extend({
                     // Null data
                     return;
                 }
+                // fix #11360: should't draw symbol outside clipShapeForSymbol
+                if (this._clipShapeForSymbol && !this._clipShapeForSymbol.contain(pt[0], pt[1])) {
+                    return;
+                }
                 symbol = new SymbolClz(data, dataIndex);
                 symbol.position = pt;
                 symbol.setZ(

diff --git a/test/clip.html b/test/clip.html
@@ -1330,5 +1330,66 @@
                 });
             });
         </script>
+
+
+
+        <div class="chart" id="line-highlight-point"></div>
+        <script>
+            require([
+                'echarts'
+            ], function (echarts) {
+                var option = {
+                    grid: {
+                        top: 130,
+                        bottom: 80
+                    },
+                    dataZoom: [{
+                            type: 'slider',
+                            show: true
+                        },
+                        {
+                            type: 'inside'
+                        }
+                    ],
+                    xAxis: {
+                        type: 'category',
+                        name: 'x',
+                        splitLine: {
+                        show: false
+                        },
+                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+                        axisPointer: {
+                        show: 'true'
+                        },
+                    },
+                    yAxis: {
+                        name: 'y',
+                        max: 20
+                    },
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    series: [{
+                        name: 'B',
+                        type: 'line',
+                        clip: true,
+                        data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
+                    }]
+                };
+                var chart = testHelper.create(echarts, 'line-highlight-point', {
+                    title: 'Line Clip on emphasis',
+                    option: option,
+                    height: 400,
+                    buttons: makeToggleChartButtons(function (clip) {
+                        chart.setOption({
+                            series: [{
+                                clip: clip
+                            }]
+                        })
+                    })
+                });
+            })
+        </script>
+
     </body>
 </html>