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

src/chart/line/LineSeries.ts

@@ -112,7 +112,7 @@ export interface LineSeriesOption extends SeriesOption<LineStateOption<CallbackD
 
     connectNulls?: boolean
 
-    showSymbol?: boolean
+    showSymbol?: 'single' | boolean
     // false | 'auto': follow the label interval strategy.
     // true: show all symbols.
     showAllSymbol?: 'auto' | boolean
@@ -190,6 +190,9 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         symbolSize: 4,
         symbolRotate: null,
 
+        // true: show symbol
+        // false: hide symbol
+        // 'single':  will show symbol between null value.
         showSymbol: true,
         // `false`: follow the label interval strategy.
         // `true`: show all symbols.

src/chart/line/LineView.ts

@@ -400,6 +400,43 @@ function getIsIgnoreFunc(
     };
 }
 
+function getIsSingleSymbolIgnore(
+    seriesModel: LineSeriesModel,
+    data: SeriesData,
+    coordSys: Cartesian2D
+) {
+    const intervalAxis = coordSys.getAxesByScale('interval')[0];
+
+    if (!intervalAxis) {
+        return;
+    }
+
+    const intervalDataDim = data.mapDimension(intervalAxis.dim);
+
+    const count = data.count();
+
+    const singleDataIdxStateList: boolean[] = [];
+
+    for (let i = 0; i < count; i++) {
+        const intervalValue = data.get(intervalDataDim, i);
+
+        if (typeof intervalValue === 'number' && isNaN(intervalValue)) {
+            singleDataIdxStateList[i] = false;
+        }
+        else {
+            singleDataIdxStateList[i] = true;
+        }
+
+    }
+
+
+    return function (dataIndex: number) {
+        return singleDataIdxStateList[dataIndex - 1]
+                || !singleDataIdxStateList[dataIndex]
+                || singleDataIdxStateList[dataIndex + 1];
+    };
+}
+
 function canShowAllSymbolForCategory(
     categoryAxis: Axis2D,
     data: SeriesData
@@ -657,8 +694,14 @@ class LineView extends ChartView {
 
         const connectNulls = seriesModel.get('connectNulls');
 
-        const isIgnoreFunc = showSymbol && !isCoordSysPolar
-            && getIsIgnoreFunc(seriesModel, data, coordSys as Cartesian2D);
+        const isIgnoreFunc = showSymbol === true ? !isCoordSysPolar
+            && getIsIgnoreFunc(seriesModel, data, coordSys as Cartesian2D)
+            : (
+                !isCoordSysPolar
+                && showSymbol === 'single'
+                && connectNulls === false
+                && getIsSingleSymbolIgnore(seriesModel, data, coordSys as Cartesian2D)
+            );
 
         // Remove temporary symbols
         const oldData = this._data;
@@ -701,14 +744,16 @@ 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 === true || (showSymbol === 'single' && !connectNulls)) {
+                symbolDraw.updateData(data, {
+                    isIgnore: isIgnoreFunc,
+                    clipShape: clipShapeForSymbol,
+                    disableAnimation: true,
+                    getSymbolPoint(idx) {
+                        return [points[idx * 2], points[idx * 2 + 1]];
+                    }
+                });
+            }
 
             hasAnimation && this._initSymbolLabelAnimation(
                 data,
@@ -779,14 +824,16 @@ 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 === true || (showSymbol === 'single' && !connectNulls)) {
+                symbolDraw.updateData(data, {
+                    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.