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

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)
@@ -521,6 +522,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(

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>