feat(line): show single symbol when pre and next data is null

src/chart/helper/SymbolDraw.ts

@@ -43,6 +43,7 @@ import Element from 'zrender/src/Element';
 import SeriesModel from '../../model/Series';
 
 interface UpdateOpt {
+    showSingleSymbol?: boolean;
     isIgnore?(idx: number): boolean
     clipShape?: CoordinateSystemClipArea,
     getSymbolPoint?(idx: number): number[]
@@ -60,6 +61,17 @@ interface SymbolLikeCtor {
 }
 
 function symbolNeedsDraw(data: SeriesData, point: number[], idx: number, opt: UpdateOpt) {
+    if (opt.showSingleSymbol) {
+        const dataCount = data.count();
+        if (
+            data.getRawDataItem(idx) === null
+            || (idx !== 0 && data.getRawDataItem(idx - 1) !== null)
+            || (idx !== dataCount - 1 && data.getRawDataItem(idx + 1) !== null)
+        ) {
+            return false;
+        }
+    }
+
     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

src/chart/line/LineView.ts

@@ -701,14 +701,17 @@ class LineView extends ChartView {
         if (
             !(polyline && prevCoordSys.type === coordSys.type && step === this._step)
         ) {
-            showSymbol && symbolDraw.updateData(data, {
-                isIgnore: isIgnoreFunc,
-                clipShape: clipShapeForSymbol,
-                disableAnimation: true,
-                getSymbolPoint(idx) {
-                    return [points[idx * 2], points[idx * 2 + 1]];
-                }
-            });
+            if (showSymbol || !connectNulls) {
+                symbolDraw.updateData(data, {
+                    showSingleSymbol: showSymbol === false && !connectNulls,
+                    isIgnore: isIgnoreFunc,
+                    clipShape: clipShapeForSymbol,
+                    disableAnimation: true,
+                    getSymbolPoint(idx) {
+                        return [points[idx * 2], points[idx * 2 + 1]];
+                    }
+                });
+            }
 
             hasAnimation && this._initSymbolLabelAnimation(
                 data,
@@ -779,14 +782,17 @@ class LineView extends ChartView {
 
             // Always update, or it is wrong in the case turning on legend
             // because points are not changed.
-            showSymbol && symbolDraw.updateData(data, {
-                isIgnore: isIgnoreFunc,
-                clipShape: clipShapeForSymbol,
-                disableAnimation: true,
-                getSymbolPoint(idx) {
-                    return [points[idx * 2], points[idx * 2 + 1]];
-                }
-            });
+            if (showSymbol || !connectNulls) {
+                symbolDraw.updateData(data, {
+                    showSingleSymbol: showSymbol === false && !connectNulls,
+                    isIgnore: isIgnoreFunc,
+                    clipShape: clipShapeForSymbol,
+                    disableAnimation: true,
+                    getSymbolPoint(idx) {
+                        return [points[idx * 2], points[idx * 2 + 1]];
+                    }
+                });
+            }
 
             // In the case data zoom triggered refreshing frequently
             // Data may not change if line has a category axis. So it should animate nothing.