From c771fdbe05a54629d98625cdfa9169d38e7a4fb3 Mon Sep 17 00:00:00 2001
From: "linghao.su" <slh001@live.cn>
Date: Tue, 27 Jun 2023 23:54:51 +0800
Subject: [PATCH] feat(line): show single symbol when pre and next data is null

---
 src/chart/helper/SymbolDraw.ts |  12 ++++
 src/chart/line/LineView.ts     |  38 +++++++-----
 test/lines-single-symbol.html  | 104 +++++++++++++++++++++++++++++++++
 3 files changed, 138 insertions(+), 16 deletions(-)
 create mode 100644 test/lines-single-symbol.html

diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts
index 93e13848e1..220a352fa6 100644
--- a/src/chart/helper/SymbolDraw.ts
+++ b/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
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 435fa2a90c..395f73cfda 100644
--- a/src/chart/line/LineView.ts
+++ b/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.
diff --git a/test/lines-single-symbol.html b/test/lines-single-symbol.html
new file mode 100644
index 0000000000..572cbe1141
--- /dev/null
+++ b/test/lines-single-symbol.html
@@ -0,0 +1,104 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/facePrint.js"></script>
+    </head>
+    <body>
+        <style>
+            html,
+            body,
+            #main0,
+            #main1 {
+                width: 100%;
+                height: 80%;
+            }
+        </style>
+        <div id="main0"></div>
+        <div id="main1"></div>
+        <script>
+            require(["echarts"], function (echarts) {
+                var chart = echarts.init(document.getElementById("main0"));
+
+                chart.setOption({
+                    title: {
+                        text: "line series will null symbol",
+                    },
+                    xAxis: {
+                        type: "category",
+                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    },
+                    yAxis: {
+                        type: "value",
+                    },
+                    tooltip: {
+                        trigger: "axis",
+                    },
+                    series: [
+                        {
+                            showSymbol: false,
+                            data: [820, null, 901, null, 1290, 1330, 1320],
+                            type: "line",
+                            smooth: true,
+                        },
+                    ],
+                });
+
+                window.onresize = chart.resize;
+            });
+        </script>
+        <script>
+            require(["echarts"], function (echarts) {
+                var chart = echarts.init(document.getElementById("main1"));
+
+                chart.setOption({
+                    title: {
+                        text: "line series will null symbol but connectNulls",
+                    },
+                    xAxis: {
+                        type: "category",
+                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    },
+                    yAxis: {
+                        type: "value",
+                    },
+                    tooltip: {
+                        trigger: "axis",
+                    },
+                    series: [
+                        {
+                            showSymbol: false,
+                            data: [820, null, 901, null, 1290, 1330, 1320],
+                            type: "line",
+                            smooth: true,
+                            connectNulls: true,
+                        },
+                    ],
+                });
+
+                window.onresize = chart.resize;
+            });
+        </script>
+    </body>
+</html>