fix(line): use ignore function to implement line symbol show between …

…null

src/chart/helper/SymbolDraw.ts

@@ -43,7 +43,6 @@ 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[]
@@ -61,17 +60,6 @@ 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

@@ -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,13 @@ class LineView extends ChartView {
 
         const connectNulls = seriesModel.get('connectNulls');
 
-        const isIgnoreFunc = showSymbol && !isCoordSysPolar
-            && getIsIgnoreFunc(seriesModel, data, coordSys as Cartesian2D);
+        const isIgnoreFunc = showSymbol ? !isCoordSysPolar
+            && getIsIgnoreFunc(seriesModel, data, coordSys as Cartesian2D)
+            : (
+                !isCoordSysPolar
+                && !connectNulls
+                && getIsSingleSymbolIgnore(seriesModel, data, coordSys as Cartesian2D)
+            );
 
         // Remove temporary symbols
         const oldData = this._data;
@@ -703,7 +745,6 @@ class LineView extends ChartView {
         ) {
             if (showSymbol || !connectNulls) {
                 symbolDraw.updateData(data, {
-                    showSingleSymbol: showSymbol === false && !connectNulls,
                     isIgnore: isIgnoreFunc,
                     clipShape: clipShapeForSymbol,
                     disableAnimation: true,
@@ -784,7 +825,6 @@ class LineView extends ChartView {
             // because points are not changed.
             if (showSymbol || !connectNulls) {
                 symbolDraw.updateData(data, {
-                    showSingleSymbol: showSymbol === false && !connectNulls,
                     isIgnore: isIgnoreFunc,
                     clipShape: clipShapeForSymbol,
                     disableAnimation: true,