You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/09/22 09:27:55 UTC

[GitHub] [echarts] Ovilia commented on a diff in pull request #17669: bugfix #15694: support connectNulls series in data zoom

Ovilia commented on code in PR #17669:
URL: https://github.com/apache/echarts/pull/17669#discussion_r977419123


##########
src/component/dataZoom/SliderZoomView.ts:
##########
@@ -409,7 +409,18 @@ class SliderZoomView extends DataZoomView {
                 const otherCoord = isEmpty
                     ? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
 
-                // Attempt to draw data shadow precisely when there are empty value.
+                const connectNulls = (seriesModel as any).get('connectNulls');
+
+                if (connectNulls) {
+                    const otherC = isEmpty

Review Comment:
   `otherC` should have a more meaningful name



##########
src/component/dataZoom/SliderZoomView.ts:
##########
@@ -421,9 +432,10 @@ class SliderZoomView extends DataZoomView {
 
                 areaPoints.push([thisCoord, otherCoord]);
                 linePoints.push([thisCoord, otherCoord]);
+                }
 
                 thisCoord += step;
-                lastIsEmpty = isEmpty;
+                lastIsEmpty = connectNulls ? false : isEmpty;

Review Comment:
   Even if `connectNulls`, if all previous data is `null`, this should be empty



##########
src/component/dataZoom/SliderZoomView.ts:
##########
@@ -409,7 +409,18 @@ class SliderZoomView extends DataZoomView {
                 const otherCoord = isEmpty
                     ? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
 
-                // Attempt to draw data shadow precisely when there are empty value.
+                const connectNulls = (seriesModel as any).get('connectNulls');

Review Comment:
   Don't use `as any`



##########
test/data-zoom-connect-nulls.html:
##########
@@ -0,0 +1,536 @@
+<!--
+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">
+  <script src="lib/simpleRequire.js"></script>
+  <script src="lib/config.js"></script>
+</head>
+
+<body>
+  <style>
+    #main {
+      position: relative;
+      text-align: center;
+    }
+
+    .title {
+      display: block;
+      cursor: pointer;
+      text-decoration: none;
+      clear: both;
+      text-align: center;
+      margin: 0;
+      background: #eef;
+      line-height: 22px;
+    }
+
+    .block {
+      display: inline-block;
+      *display: inline;
+      *zoom: 1;
+      vertical-align: top;
+      margin: 30px 0 30px 50px;
+    }
+
+    .block .ec {
+      width: 800px;
+      height: 240px;
+    }
+
+    .block .info {
+      display: block;
+      text-align: left;
+      background: #eee;
+      border-radius: 3px;
+      font-size: 12px;
+      line-height: 18px;
+      padding: 0 5px;
+    }
+
+    .block .info td {
+      font-size: 12px;
+      border: 1px solid #bbb;
+      padding: 1px 3px;
+    }
+
+    strong {
+      color: red;
+      font-weight: bold;
+      font-size: 18px;
+      padding: 0 3px;
+    }
+  </style>
+  <h1>Data Zoom supports series with {"connectNulls": true}</h1>
+  <div>resolve: <a
+      href="https://github.com/apache/echarts/issues/15694">https://github.com/apache/echarts/issues/15694</a></div>
+  <div id="main"></div>
+
+  <script>
+    var xAxisData = [
+      "2022-01-01",
+      "2022-01-02",
+      "2022-01-03",
+      "2022-01-04",
+      "2022-01-05",
+      "2022-01-06",
+      "2022-01-07",
+      "2022-01-08",
+      "2022-01-09",
+      "2022-01-10",
+      "2022-01-11",
+      "2022-01-12",
+      "2022-01-13",
+      "2022-01-14",
+      "2022-01-15",
+      "2022-01-16",
+      "2022-01-17",
+      "2022-01-18",
+      "2022-01-19",
+      "2022-01-20",
+      "2022-01-21",
+      "2022-01-22",
+      "2022-01-23",
+      "2022-01-24",
+      "2022-01-25",
+      "2022-01-26",
+      "2022-01-27",
+      "2022-01-28",
+      "2022-01-29",
+      "2022-01-30",
+      "2022-01-31",
+      "2022-02-01",
+      "2022-02-02",
+      "2022-02-03",
+      "2022-02-04",
+      "2022-02-05",
+      "2022-02-06",
+      "2022-02-07",
+      "2022-02-08",
+      "2022-02-09",
+      "2022-02-10",
+      "2022-02-11",
+      "2022-02-12",
+      "2022-02-13",
+      "2022-02-14",
+      "2022-02-15",
+      "2022-02-16",
+      "2022-02-17",
+      "2022-02-18",
+      "2022-02-19",
+      "2022-02-20",
+      "2022-02-21",
+      "2022-02-22",
+      "2022-02-23",
+      "2022-02-24",
+      "2022-02-25",
+      "2022-02-26",
+      "2022-02-27",
+      "2022-02-28",
+      "2022-03-01",
+      "2022-03-02",
+      "2022-03-03",
+      "2022-03-04",
+      "2022-03-05",
+      "2022-03-06",
+      "2022-03-07",
+      "2022-03-08",
+      "2022-03-09",
+      "2022-03-10",
+      "2022-03-11",
+      "2022-03-12",
+      "2022-03-13",
+      "2022-03-14",
+      "2022-03-15",
+      "2022-03-16",
+      "2022-03-17",
+      "2022-03-18",
+      "2022-03-19",
+      "2022-03-20",
+      "2022-03-21",
+      "2022-03-22",
+      "2022-03-23",
+      "2022-03-24",
+      "2022-03-25",
+      "2022-03-26",
+      "2022-03-27",
+      "2022-03-28",
+      "2022-03-29",
+      "2022-03-30",
+      "2022-03-31",
+      "2022-04-01",
+      "2022-04-02",
+      "2022-04-03",
+      "2022-04-04",
+      "2022-04-05",
+      "2022-04-06",
+      "2022-04-07",
+      "2022-04-08",
+      "2022-04-09",
+      "2022-04-10",
+      "2022-04-11",
+      "2022-04-12",
+      "2022-04-13",
+      "2022-04-14",
+      "2022-04-15",
+      "2022-04-16",
+      "2022-04-17",
+      "2022-04-18",
+      "2022-04-19",
+      "2022-04-20",
+      "2022-04-21",
+      "2022-04-22",
+      "2022-04-23",
+      "2022-04-24",
+      "2022-04-25",
+      "2022-04-26",
+      "2022-04-27",
+      "2022-04-28",
+      "2022-04-29",
+      "2022-04-30",
+      "2022-05-01",
+      "2022-05-02",
+      "2022-05-03",
+      "2022-05-04",
+      "2022-05-05",
+      "2022-05-06",
+      "2022-05-07",
+      "2022-05-08",
+      "2022-05-09",
+      "2022-05-10",
+      "2022-05-11",
+      "2022-05-12",
+      "2022-05-13",
+      "2022-05-14",
+      "2022-05-15",
+      "2022-05-16",
+      "2022-05-17",
+      "2022-05-18",
+      "2022-05-19",
+      "2022-05-20",
+      "2022-05-21",
+      "2022-05-22",
+      "2022-05-23",
+      "2022-05-24",
+      "2022-05-25",
+      "2022-05-26",
+      "2022-05-27",
+      "2022-05-28",
+      "2022-05-29",
+      "2022-05-30",
+      "2022-05-31",
+      "2022-06-01",
+      "2022-06-02",
+      "2022-06-03",
+      "2022-06-04",
+      "2022-06-05",
+      "2022-06-06",
+      "2022-06-07",
+      "2022-06-08",
+      "2022-06-09",
+      "2022-06-10",
+      "2022-06-11",
+      "2022-06-12",
+      "2022-06-13",
+      "2022-06-14",
+      "2022-06-15",
+      "2022-06-16",
+      "2022-06-17",
+      "2022-06-18",
+      "2022-06-19",
+      "2022-06-20",
+      "2022-06-21",
+      "2022-06-22",
+      "2022-06-23",
+      "2022-06-24",
+      "2022-06-25",
+      "2022-06-26",
+      "2022-06-27",
+      "2022-06-28",
+      "2022-06-29",
+      "2022-06-30",
+    ]
+      ;
+    var data = [
+      ["2022-01-01", 0.00008218502588808185, "true"],
+      ["2022-01-02", 0.0001643700517766078, "true"],
+      ["2022-01-03", 0.0002465550776649117, "true"],
+      ["2022-01-04", null, "true"],
+      ["2022-01-05", 0.0004109251294415195, "true"],
+      ["2022-01-06", 0.0004931101553298234, "true"],
+      ["2022-01-07", 0.0005752951812179052, "true"],
+      ["2022-01-08", null, "true"],
+      ["2022-01-09", 0.000739665232994513, "true"],
+      ["2022-01-10", 0.0008218502588828169, "true"],
+      ["2022-01-11", 0.0009040352847711208, "true"],
+      ["2022-01-12", 0.0009862203106594247, "true"],
+      ["2022-01-13", 0.0010684053365475066, "true"],
+      ["2022-01-14", 0.0011505903624358105, "true"],
+      ["2022-01-15", null, "true"],
+      ["2022-01-16", 0.0013149604142121962, "true"],
+      ["2022-01-17", 0.001397145440100278, "true"],
+      ["2022-01-18", 0.001479330465988804, "true"],
+      ["2022-01-19", 0.001561515491877108, "true"],
+      ["2022-01-20", 0.0016437005177654118, "true"],
+      ["2022-01-21", 0.0017258855436534937, "true"],
+      ["2022-01-22", 0.0018080705695417976, "true"],
+      ["2022-01-23", 0.0018902555954301015, "true"],
+      ["2022-01-24", 0.0019724406213184054, "true"],
+      ["2022-01-25", 0.0020546256472067093, "true"],
+      ["2022-01-26", 0.002136810673095235, "true"],
+      ["2022-01-27", 0.002218995698983317, "true"],
+      ["2022-01-28", null, "true"],
+      ["2022-01-29", 0.002383365750759703, "true"],
+      ["2022-01-30", 0.0024655507766480067, "true"],
+      ["2022-01-31", 0.0025477358025360886, "true"],
+      ["2022-02-01", 0.0026299208284246145, "true"],
+      ["2022-02-02", 0.0027121058543129184, "true"],
+      ["2022-02-03", 0.0027942908802014443, "true"],
+      ["2022-02-04", 0.002876475906089526, "true"],
+      ["2022-02-05", 0.00295866093197783, "true"],
+      ["2022-02-06", 0.003040845957865912, "true"],
+      ["2022-02-07", 0.003123030983754438, "true"],
+      ["2022-02-08", 0.0032052160096425197, "true"],
+      ["2022-02-09", 0.0032874010355308236, "true"],
+      ["2022-02-10", null, "true"],
+      ["2022-02-11", 0.0034517710873074314, "true"],
+      ["2022-02-12", 0.0035339561131957353, "true"],
+      ["2022-02-13", 0.0036161411390840392, "true"],
+      ["2022-02-14", 0.003698326164972343, "true"],
+      ["2022-02-15", 0.003780511190860647, "true"],
+      ["2022-02-16", 0.003862696216748729, "true"],
+      ["2022-02-17", 0.003944881242637033, "true"],
+      ["2022-02-18", null, "true"],
+      ["2022-02-19", 0.0041092512944134185, "true"],
+      ["2022-02-20", 0.004191436320301722, "true"],
+      ["2022-02-21", 0.004273621346190248, "true"],
+      ["2022-02-22", 0.00435580637207833, "true"],
+      ["2022-02-23", 0.004437991397966634, "true"],
+      ["2022-02-24", 0.004520176423854938, "true"],
+      ["2022-02-25", 0.004602361449743464, "true"],
+      ["2022-02-26", 0.004684546475631768, "true"],
+      ["2022-02-27", 0.004766731501520072, "true"],
+      ["2022-02-28", 0.004848916527408154, "true"],
+      ["2022-03-01", null, "true"],
+      ["2022-03-02", 0.0050132865791849834, "true"],
+      ["2022-03-03", 0.005095471605073287, "true"],
+      ["2022-03-04", 0.005177656630961591, "true"],
+      ["2022-03-05", 0.005259841656849895, "true"],
+      ["2022-03-06", 0.005342026682737977, "true"],
+      ["2022-03-07", 0.005424211708626503, "true"],
+      ["2022-03-08", 0.005506396734514585, "true"],
+      ["2022-03-09", 0.005588581760403111, "true"],
+      ["2022-03-10", 0.005670766786291193, "true"],
+      ["2022-03-11", 0.0057529518121794965, "true"],
+      ["2022-03-12", null, "true"],
+      ["2022-03-13", 0.005917321863955882, "true"],
+      ["2022-03-14", 0.005999506889844186, "true"],
+      ["2022-03-15", 0.00608169191573249, "true"],
+      ["2022-03-16", 0.006163876941620794, "true"],
+      ["2022-03-17", 0.006246061967508876, "true"],
+      ["2022-03-18", 0.00632824699339718, "true"],
+      ["2022-03-19", 0.0064104320192854836, "true"],
+      ["2022-03-20", 0.0064926170451737875, "true"],
+      ["2022-03-21", 0.006574802071061869, "true"],
+      ["2022-03-22", 0.006656987096950395, "true"],
+      ["2022-03-23", 0.006739172122838699, "true"],
+      ["2022-03-24", 0.006821357148727003, "true"],
+      ["2022-03-25", 0.006903542174615085, "true"],
+      ["2022-03-26", 0.006985727200503389, "true"],
+      ["2022-03-27", 0.007067912226391693, "true"],
+      ["2022-03-28", null, "true"],
+      ["2022-03-29", 0.0072322822781680784, "true"],
+      ["2022-03-30", 0.007314467304056382, "true"],
+      ["2022-03-31", 0.007396652329944464, "true"],
+      ["2022-04-01", 0.007478837355832768, "true"],
+      ["2022-04-02", 0.007561022381721072, "true"],
+      ["2022-04-03", 0.007643207407609598, "true"],
+      ["2022-04-04", 0.007725392433497902, "true"],
+      ["2022-04-05", 0.007807577459386206, "true"],
+      ["2022-04-06", 0.007889762485274288, "true"],
+      ["2022-04-07", 0.007971947511162591, "true"],
+      ["2022-04-08", 0.008054132537050895, "true"],
+      ["2022-04-09", 0.0081363175629392, "true"],
+      ["2022-04-10", 0.008218502588827281, "true"],
+      ["2022-04-11", 0.008300687614715585, "true"],
+      ["2022-04-12", 0.008382872640603889, "true"],
+      ["2022-04-13", 0.008465057666492415, "true"],
+      ["2022-04-14", 0.008547242692380719, "true"],
+      ["2022-04-15", 0.008629427718269245, "true"],
+      ["2022-04-16", 0.008711612744157327, "true"],
+      ["2022-04-17", 0.00879379777004563, "true"],
+      ["2022-04-18", 0.008875982795933712, "true"],
+      ["2022-04-19", 0.008958167821822016, "true"],
+      ["2022-04-20", 0.009040352847710098, "true"],
+      ["2022-04-21", 0.009122537873598402, "true"],
+      ["2022-04-22", 0.009204722899486706, "true"],
+      ["2022-04-23", 0.00928690792537501, "true"],
+      ["2022-04-24", 0.009369092951263314, "true"],
+      ["2022-04-25", 0.00945127797715184, "true"],
+      ["2022-04-26", 0.009533463003040143, "true"],
+      ["2022-04-27", 0.009615648028928447, "true"],
+      ["2022-04-28", 0.00969783305481653, "true"],
+      ["2022-04-29", 0.009780018080705055, "true"],
+      ["2022-04-30", 0.009862203106593137, "true"],
+      ["2022-05-01", 0.009944388132481441, "true"],
+      ["2022-05-02", 0.010026573158369745, "true"],
+      ["2022-05-03", 0.01010875818425827, "true"],
+      ["2022-05-04", 0.010190943210146353, "true"],
+      ["2022-05-05", 0.010273128236034657, "true"],
+      ["2022-05-06", 0.010355313261922738, "true"],
+      ["2022-05-07", 0.010437498287811042, "true"],
+      ["2022-05-08", 0.010519683313699124, "true"],
+      ["2022-05-09", 0.010601868339587428, "true"],
+      ["2022-05-10", 0.01068405336547551, "true"],
+      ["2022-05-11", 0.010766238391364036, "true"],
+      ["2022-05-12", 0.01084842341725234, "true"],
+      ["2022-05-13", 0.010930608443140644, "true"],
+      ["2022-05-14", 0.011012793469028948, "true"],
+      ["2022-05-15", 0.011094978494917251, "true"],
+      ["2022-05-16", 0.011177163520805333, "true"],
+      ["2022-05-17", 0.011259348546693637, "true"],
+      ["2022-05-18", 0.011341533572581941, "true"],
+      ["2022-05-19", 0.011423718598470245, "true"],
+      ["2022-05-20", 0.011505903624358549, "true"],
+      ["2022-05-21", 0.01158808865024663, "true"],
+      ["2022-05-22", 0.011670273676134935, "true"],
+      ["2022-05-23", 0.011752458702023016, "true"],
+      ["2022-05-24", 0.011834643727911542, "true"],
+      ["2022-05-25", 0.011916828753799846, "true"],
+      ["2022-05-26", 0.01199901377968815, "true"],
+      ["2022-05-27", 0.012081198805576232, "true"],
+      ["2022-05-28", 0.012163383831464536, "true"],
+      ["2022-05-29", 0.012245568857352618, "true"],
+      ["2022-05-30", 0.012327753883240922, "true"],
+      ["2022-05-31", 0.012409938909129004, "true"],
+      ["2022-06-01", 0.012492123935017307, "true"],
+      ["2022-06-02", 0.01257430896090539, "true"],
+      ["2022-06-03", 0.012656493986793693, "true"],
+      ["2022-06-04", 0.012738679012681997, "true"],
+      ["2022-06-05", 0.012820864038570301, "true"],
+      ["2022-06-06", 0.012903049064458605, "true"],
+      ["2022-06-07", 0.01298523409034713, "true"],
+      ["2022-06-08", 0.013067419116235435, "true"],
+      ["2022-06-09", 0.013149604142123739, "true"],
+      ["2022-06-10", 0.01323178916801182, "true"],
+      ["2022-06-11", 0.013313974193900124, "true"],
+      ["2022-06-12", 0.013396159219788206, "true"],
+      ["2022-06-13", 0.01347834424567651, "true"],
+      ["2022-06-14", 0.013560529271564814, "true"],
+      ["2022-06-15", 0.013642714297453118, "true"],
+      ["2022-06-16", 0.0137248993233412, "true"],
+      ["2022-06-17", 0.013807084349229504, "true"],
+      ["2022-06-18", 0.013889269375117586, "true"],
+      ["2022-06-19", 0.01397145440100589, "true"],
+      ["2022-06-20", 0.014053639426894193, "true"],
+      ["2022-06-21", 0.01413582445278272, "true"],
+      ["2022-06-22", 0.014218009478670801, "true"],
+      ["2022-06-23", 0.014300194504559105, "true"],
+      ["2022-06-24", 0.014382379530447187, "true"],
+      ["2022-06-25", 0.01446456455633549, "true"],
+      ["2022-06-26", 0.014546749582223573, "true"],
+      ["2022-06-27", 0.014628934608111877, "true"],
+      ["2022-06-28", 0.014711119633999958, "true"],
+      ["2022-06-29", 0.014793304659888262, "true"],
+      ["2022-06-30", 0.014875489685776344, "true"],

Review Comment:
   Try to minify the data here. Just enough to reproduce the problem would be OK.



##########
test/data-zoom-connect-nulls.html:
##########
@@ -0,0 +1,536 @@
+<!--
+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">
+  <script src="lib/simpleRequire.js"></script>
+  <script src="lib/config.js"></script>
+</head>
+
+<body>
+  <style>
+    #main {
+      position: relative;
+      text-align: center;
+    }
+
+    .title {
+      display: block;
+      cursor: pointer;
+      text-decoration: none;
+      clear: both;
+      text-align: center;
+      margin: 0;
+      background: #eef;
+      line-height: 22px;
+    }
+
+    .block {
+      display: inline-block;
+      *display: inline;
+      *zoom: 1;
+      vertical-align: top;
+      margin: 30px 0 30px 50px;
+    }
+
+    .block .ec {
+      width: 800px;
+      height: 240px;
+    }
+
+    .block .info {
+      display: block;
+      text-align: left;
+      background: #eee;
+      border-radius: 3px;
+      font-size: 12px;
+      line-height: 18px;
+      padding: 0 5px;
+    }
+
+    .block .info td {
+      font-size: 12px;
+      border: 1px solid #bbb;
+      padding: 1px 3px;
+    }
+
+    strong {
+      color: red;
+      font-weight: bold;
+      font-size: 18px;
+      padding: 0 3px;
+    }
+  </style>
+  <h1>Data Zoom supports series with {"connectNulls": true}</h1>
+  <div>resolve: <a
+      href="https://github.com/apache/echarts/issues/15694">https://github.com/apache/echarts/issues/15694</a></div>
+  <div id="main"></div>
+
+  <script>
+    var xAxisData = [
+      "2022-01-01",
+      "2022-01-02",
+      "2022-01-03",
+      "2022-01-04",
+      "2022-01-05",
+      "2022-01-06",
+      "2022-01-07",
+      "2022-01-08",
+      "2022-01-09",
+      "2022-01-10",
+      "2022-01-11",
+      "2022-01-12",
+      "2022-01-13",
+      "2022-01-14",
+      "2022-01-15",
+      "2022-01-16",
+      "2022-01-17",
+      "2022-01-18",
+      "2022-01-19",
+      "2022-01-20",
+      "2022-01-21",
+      "2022-01-22",
+      "2022-01-23",
+      "2022-01-24",
+      "2022-01-25",
+      "2022-01-26",
+      "2022-01-27",
+      "2022-01-28",
+      "2022-01-29",
+      "2022-01-30",
+      "2022-01-31",
+      "2022-02-01",
+      "2022-02-02",
+      "2022-02-03",
+      "2022-02-04",
+      "2022-02-05",
+      "2022-02-06",
+      "2022-02-07",
+      "2022-02-08",
+      "2022-02-09",
+      "2022-02-10",
+      "2022-02-11",
+      "2022-02-12",
+      "2022-02-13",
+      "2022-02-14",
+      "2022-02-15",
+      "2022-02-16",
+      "2022-02-17",
+      "2022-02-18",
+      "2022-02-19",
+      "2022-02-20",
+      "2022-02-21",
+      "2022-02-22",
+      "2022-02-23",
+      "2022-02-24",
+      "2022-02-25",
+      "2022-02-26",
+      "2022-02-27",
+      "2022-02-28",
+      "2022-03-01",
+      "2022-03-02",
+      "2022-03-03",
+      "2022-03-04",
+      "2022-03-05",
+      "2022-03-06",
+      "2022-03-07",
+      "2022-03-08",
+      "2022-03-09",
+      "2022-03-10",
+      "2022-03-11",
+      "2022-03-12",
+      "2022-03-13",
+      "2022-03-14",
+      "2022-03-15",
+      "2022-03-16",
+      "2022-03-17",
+      "2022-03-18",
+      "2022-03-19",
+      "2022-03-20",
+      "2022-03-21",
+      "2022-03-22",
+      "2022-03-23",
+      "2022-03-24",
+      "2022-03-25",
+      "2022-03-26",
+      "2022-03-27",
+      "2022-03-28",
+      "2022-03-29",
+      "2022-03-30",
+      "2022-03-31",
+      "2022-04-01",
+      "2022-04-02",
+      "2022-04-03",
+      "2022-04-04",
+      "2022-04-05",
+      "2022-04-06",
+      "2022-04-07",
+      "2022-04-08",
+      "2022-04-09",
+      "2022-04-10",
+      "2022-04-11",
+      "2022-04-12",
+      "2022-04-13",
+      "2022-04-14",
+      "2022-04-15",
+      "2022-04-16",
+      "2022-04-17",
+      "2022-04-18",
+      "2022-04-19",
+      "2022-04-20",
+      "2022-04-21",
+      "2022-04-22",
+      "2022-04-23",
+      "2022-04-24",
+      "2022-04-25",
+      "2022-04-26",
+      "2022-04-27",
+      "2022-04-28",
+      "2022-04-29",
+      "2022-04-30",
+      "2022-05-01",
+      "2022-05-02",
+      "2022-05-03",
+      "2022-05-04",
+      "2022-05-05",
+      "2022-05-06",
+      "2022-05-07",
+      "2022-05-08",
+      "2022-05-09",
+      "2022-05-10",
+      "2022-05-11",
+      "2022-05-12",
+      "2022-05-13",
+      "2022-05-14",
+      "2022-05-15",
+      "2022-05-16",
+      "2022-05-17",
+      "2022-05-18",
+      "2022-05-19",
+      "2022-05-20",
+      "2022-05-21",
+      "2022-05-22",
+      "2022-05-23",
+      "2022-05-24",
+      "2022-05-25",
+      "2022-05-26",
+      "2022-05-27",
+      "2022-05-28",
+      "2022-05-29",
+      "2022-05-30",
+      "2022-05-31",
+      "2022-06-01",
+      "2022-06-02",
+      "2022-06-03",
+      "2022-06-04",
+      "2022-06-05",
+      "2022-06-06",
+      "2022-06-07",
+      "2022-06-08",
+      "2022-06-09",
+      "2022-06-10",
+      "2022-06-11",
+      "2022-06-12",
+      "2022-06-13",
+      "2022-06-14",
+      "2022-06-15",
+      "2022-06-16",
+      "2022-06-17",
+      "2022-06-18",
+      "2022-06-19",
+      "2022-06-20",
+      "2022-06-21",
+      "2022-06-22",
+      "2022-06-23",
+      "2022-06-24",
+      "2022-06-25",
+      "2022-06-26",
+      "2022-06-27",
+      "2022-06-28",
+      "2022-06-29",
+      "2022-06-30",
+    ]
+      ;
+    var data = [
+      ["2022-01-01", 0.00008218502588808185, "true"],
+      ["2022-01-02", 0.0001643700517766078, "true"],
+      ["2022-01-03", 0.0002465550776649117, "true"],
+      ["2022-01-04", null, "true"],
+      ["2022-01-05", 0.0004109251294415195, "true"],
+      ["2022-01-06", 0.0004931101553298234, "true"],
+      ["2022-01-07", 0.0005752951812179052, "true"],
+      ["2022-01-08", null, "true"],
+      ["2022-01-09", 0.000739665232994513, "true"],
+      ["2022-01-10", 0.0008218502588828169, "true"],
+      ["2022-01-11", 0.0009040352847711208, "true"],
+      ["2022-01-12", 0.0009862203106594247, "true"],
+      ["2022-01-13", 0.0010684053365475066, "true"],
+      ["2022-01-14", 0.0011505903624358105, "true"],
+      ["2022-01-15", null, "true"],
+      ["2022-01-16", 0.0013149604142121962, "true"],
+      ["2022-01-17", 0.001397145440100278, "true"],
+      ["2022-01-18", 0.001479330465988804, "true"],
+      ["2022-01-19", 0.001561515491877108, "true"],
+      ["2022-01-20", 0.0016437005177654118, "true"],
+      ["2022-01-21", 0.0017258855436534937, "true"],
+      ["2022-01-22", 0.0018080705695417976, "true"],
+      ["2022-01-23", 0.0018902555954301015, "true"],
+      ["2022-01-24", 0.0019724406213184054, "true"],
+      ["2022-01-25", 0.0020546256472067093, "true"],
+      ["2022-01-26", 0.002136810673095235, "true"],
+      ["2022-01-27", 0.002218995698983317, "true"],
+      ["2022-01-28", null, "true"],
+      ["2022-01-29", 0.002383365750759703, "true"],
+      ["2022-01-30", 0.0024655507766480067, "true"],
+      ["2022-01-31", 0.0025477358025360886, "true"],
+      ["2022-02-01", 0.0026299208284246145, "true"],
+      ["2022-02-02", 0.0027121058543129184, "true"],
+      ["2022-02-03", 0.0027942908802014443, "true"],
+      ["2022-02-04", 0.002876475906089526, "true"],
+      ["2022-02-05", 0.00295866093197783, "true"],
+      ["2022-02-06", 0.003040845957865912, "true"],
+      ["2022-02-07", 0.003123030983754438, "true"],
+      ["2022-02-08", 0.0032052160096425197, "true"],
+      ["2022-02-09", 0.0032874010355308236, "true"],
+      ["2022-02-10", null, "true"],
+      ["2022-02-11", 0.0034517710873074314, "true"],
+      ["2022-02-12", 0.0035339561131957353, "true"],
+      ["2022-02-13", 0.0036161411390840392, "true"],
+      ["2022-02-14", 0.003698326164972343, "true"],
+      ["2022-02-15", 0.003780511190860647, "true"],
+      ["2022-02-16", 0.003862696216748729, "true"],
+      ["2022-02-17", 0.003944881242637033, "true"],
+      ["2022-02-18", null, "true"],
+      ["2022-02-19", 0.0041092512944134185, "true"],
+      ["2022-02-20", 0.004191436320301722, "true"],
+      ["2022-02-21", 0.004273621346190248, "true"],
+      ["2022-02-22", 0.00435580637207833, "true"],
+      ["2022-02-23", 0.004437991397966634, "true"],
+      ["2022-02-24", 0.004520176423854938, "true"],
+      ["2022-02-25", 0.004602361449743464, "true"],
+      ["2022-02-26", 0.004684546475631768, "true"],
+      ["2022-02-27", 0.004766731501520072, "true"],
+      ["2022-02-28", 0.004848916527408154, "true"],
+      ["2022-03-01", null, "true"],
+      ["2022-03-02", 0.0050132865791849834, "true"],
+      ["2022-03-03", 0.005095471605073287, "true"],
+      ["2022-03-04", 0.005177656630961591, "true"],
+      ["2022-03-05", 0.005259841656849895, "true"],
+      ["2022-03-06", 0.005342026682737977, "true"],
+      ["2022-03-07", 0.005424211708626503, "true"],
+      ["2022-03-08", 0.005506396734514585, "true"],
+      ["2022-03-09", 0.005588581760403111, "true"],
+      ["2022-03-10", 0.005670766786291193, "true"],
+      ["2022-03-11", 0.0057529518121794965, "true"],
+      ["2022-03-12", null, "true"],
+      ["2022-03-13", 0.005917321863955882, "true"],
+      ["2022-03-14", 0.005999506889844186, "true"],
+      ["2022-03-15", 0.00608169191573249, "true"],
+      ["2022-03-16", 0.006163876941620794, "true"],
+      ["2022-03-17", 0.006246061967508876, "true"],
+      ["2022-03-18", 0.00632824699339718, "true"],
+      ["2022-03-19", 0.0064104320192854836, "true"],
+      ["2022-03-20", 0.0064926170451737875, "true"],
+      ["2022-03-21", 0.006574802071061869, "true"],
+      ["2022-03-22", 0.006656987096950395, "true"],
+      ["2022-03-23", 0.006739172122838699, "true"],
+      ["2022-03-24", 0.006821357148727003, "true"],
+      ["2022-03-25", 0.006903542174615085, "true"],
+      ["2022-03-26", 0.006985727200503389, "true"],
+      ["2022-03-27", 0.007067912226391693, "true"],
+      ["2022-03-28", null, "true"],
+      ["2022-03-29", 0.0072322822781680784, "true"],
+      ["2022-03-30", 0.007314467304056382, "true"],
+      ["2022-03-31", 0.007396652329944464, "true"],
+      ["2022-04-01", 0.007478837355832768, "true"],
+      ["2022-04-02", 0.007561022381721072, "true"],
+      ["2022-04-03", 0.007643207407609598, "true"],
+      ["2022-04-04", 0.007725392433497902, "true"],
+      ["2022-04-05", 0.007807577459386206, "true"],
+      ["2022-04-06", 0.007889762485274288, "true"],
+      ["2022-04-07", 0.007971947511162591, "true"],
+      ["2022-04-08", 0.008054132537050895, "true"],
+      ["2022-04-09", 0.0081363175629392, "true"],
+      ["2022-04-10", 0.008218502588827281, "true"],
+      ["2022-04-11", 0.008300687614715585, "true"],
+      ["2022-04-12", 0.008382872640603889, "true"],
+      ["2022-04-13", 0.008465057666492415, "true"],
+      ["2022-04-14", 0.008547242692380719, "true"],
+      ["2022-04-15", 0.008629427718269245, "true"],
+      ["2022-04-16", 0.008711612744157327, "true"],
+      ["2022-04-17", 0.00879379777004563, "true"],
+      ["2022-04-18", 0.008875982795933712, "true"],
+      ["2022-04-19", 0.008958167821822016, "true"],
+      ["2022-04-20", 0.009040352847710098, "true"],
+      ["2022-04-21", 0.009122537873598402, "true"],
+      ["2022-04-22", 0.009204722899486706, "true"],
+      ["2022-04-23", 0.00928690792537501, "true"],
+      ["2022-04-24", 0.009369092951263314, "true"],
+      ["2022-04-25", 0.00945127797715184, "true"],
+      ["2022-04-26", 0.009533463003040143, "true"],
+      ["2022-04-27", 0.009615648028928447, "true"],
+      ["2022-04-28", 0.00969783305481653, "true"],
+      ["2022-04-29", 0.009780018080705055, "true"],
+      ["2022-04-30", 0.009862203106593137, "true"],
+      ["2022-05-01", 0.009944388132481441, "true"],
+      ["2022-05-02", 0.010026573158369745, "true"],
+      ["2022-05-03", 0.01010875818425827, "true"],
+      ["2022-05-04", 0.010190943210146353, "true"],
+      ["2022-05-05", 0.010273128236034657, "true"],
+      ["2022-05-06", 0.010355313261922738, "true"],
+      ["2022-05-07", 0.010437498287811042, "true"],
+      ["2022-05-08", 0.010519683313699124, "true"],
+      ["2022-05-09", 0.010601868339587428, "true"],
+      ["2022-05-10", 0.01068405336547551, "true"],
+      ["2022-05-11", 0.010766238391364036, "true"],
+      ["2022-05-12", 0.01084842341725234, "true"],
+      ["2022-05-13", 0.010930608443140644, "true"],
+      ["2022-05-14", 0.011012793469028948, "true"],
+      ["2022-05-15", 0.011094978494917251, "true"],
+      ["2022-05-16", 0.011177163520805333, "true"],
+      ["2022-05-17", 0.011259348546693637, "true"],
+      ["2022-05-18", 0.011341533572581941, "true"],
+      ["2022-05-19", 0.011423718598470245, "true"],
+      ["2022-05-20", 0.011505903624358549, "true"],
+      ["2022-05-21", 0.01158808865024663, "true"],
+      ["2022-05-22", 0.011670273676134935, "true"],
+      ["2022-05-23", 0.011752458702023016, "true"],
+      ["2022-05-24", 0.011834643727911542, "true"],
+      ["2022-05-25", 0.011916828753799846, "true"],
+      ["2022-05-26", 0.01199901377968815, "true"],
+      ["2022-05-27", 0.012081198805576232, "true"],
+      ["2022-05-28", 0.012163383831464536, "true"],
+      ["2022-05-29", 0.012245568857352618, "true"],
+      ["2022-05-30", 0.012327753883240922, "true"],
+      ["2022-05-31", 0.012409938909129004, "true"],
+      ["2022-06-01", 0.012492123935017307, "true"],
+      ["2022-06-02", 0.01257430896090539, "true"],
+      ["2022-06-03", 0.012656493986793693, "true"],
+      ["2022-06-04", 0.012738679012681997, "true"],
+      ["2022-06-05", 0.012820864038570301, "true"],
+      ["2022-06-06", 0.012903049064458605, "true"],
+      ["2022-06-07", 0.01298523409034713, "true"],
+      ["2022-06-08", 0.013067419116235435, "true"],
+      ["2022-06-09", 0.013149604142123739, "true"],
+      ["2022-06-10", 0.01323178916801182, "true"],
+      ["2022-06-11", 0.013313974193900124, "true"],
+      ["2022-06-12", 0.013396159219788206, "true"],
+      ["2022-06-13", 0.01347834424567651, "true"],
+      ["2022-06-14", 0.013560529271564814, "true"],
+      ["2022-06-15", 0.013642714297453118, "true"],
+      ["2022-06-16", 0.0137248993233412, "true"],
+      ["2022-06-17", 0.013807084349229504, "true"],
+      ["2022-06-18", 0.013889269375117586, "true"],
+      ["2022-06-19", 0.01397145440100589, "true"],
+      ["2022-06-20", 0.014053639426894193, "true"],
+      ["2022-06-21", 0.01413582445278272, "true"],
+      ["2022-06-22", 0.014218009478670801, "true"],
+      ["2022-06-23", 0.014300194504559105, "true"],
+      ["2022-06-24", 0.014382379530447187, "true"],
+      ["2022-06-25", 0.01446456455633549, "true"],
+      ["2022-06-26", 0.014546749582223573, "true"],
+      ["2022-06-27", 0.014628934608111877, "true"],
+      ["2022-06-28", 0.014711119633999958, "true"],
+      ["2022-06-29", 0.014793304659888262, "true"],
+      ["2022-06-30", 0.014875489685776344, "true"],
+    ];
+    var echarts;
+    var zrUtil;
+    var charts = [];
+    var els = [];
+
+    require(['echarts'], function (ec) {
+      echarts = ec;
+      zrUtil = echarts.util;
+
+      makeChart({
+        xAxis: {
+          type: "category",
+          axisLabel: { hideOverlap: false, fontSize: 12 },
+          data: xAxisData
+        },
+        yAxis: {},
+        series: [
+          {
+            connectNulls: true,
+            symbol: "none",
+            title: "3%",
+            type: "line",
+            name: "3%",
+            data: data,
+          },
+        ],
+        dataZoom: [
+          {
+            type: "slider",
+            show: true,
+            textStyle: { color: "rgba(255, 255, 255, 0)" },
+          },
+        ],
+      }, 500);
+
+      makeChart({
+        xAxis: {
+          type: "category",
+          axisLabel: { hideOverlap: false, fontSize: 12 },
+          data: xAxisData
+        },
+        yAxis: {},
+        series: [
+          {
+            connectNulls: false,
+            symbol: "none",
+            title: "3%",
+            type: "line",
+            name: "3%",
+            data: data,
+          },
+        ],
+        dataZoom: [
+          {
+            type: "slider",
+            show: true,
+            textStyle: { color: "rgba(255, 255, 255, 0)" },
+          },
+        ],
+      }, 500);
+    });
+
+    function makeChart(opt, height) {

Review Comment:
   You should probably create the test html by using `npm run mktest xxx`.



##########
src/component/dataZoom/SliderZoomView.ts:
##########
@@ -409,7 +409,18 @@ class SliderZoomView extends DataZoomView {
                 const otherCoord = isEmpty
                     ? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
 
-                // Attempt to draw data shadow precisely when there are empty value.
+                const connectNulls = (seriesModel as any).get('connectNulls');
+
+                if (connectNulls) {
+                    const otherC = isEmpty
+                        ? null : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
+                    if (otherC !== null) {
+                        areaPoints.push([thisCoord, otherC]);
+                        linePoints.push([thisCoord, otherC]);
+                    }
+                }
+                else {
+                    // Attempt to draw data shadow precisely when there are empty value.
                 if (isEmpty && !lastIsEmpty && index) {

Review Comment:
   Intent should be increased



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org