From 20134763b95a52686f5f36a258bf9206f821b0b2 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Wed, 14 Sep 2022 12:13:18 +0800
Subject: [PATCH] fix(timeline): fix chart can't work when axis line is not
 shown.

---
 src/component/timeline/SliderTimelineView.ts |  11 +-
 test/runTest/actions/__meta__.json           |   1 +
 test/runTest/actions/timeline-case.json      |   1 +
 test/timeline-case.html                      | 113 +++++++++++++++++++
 4 files changed, 122 insertions(+), 4 deletions(-)
 create mode 100644 test/runTest/actions/timeline-case.json
 create mode 100644 test/timeline-case.html

diff --git a/src/component/timeline/SliderTimelineView.ts b/src/component/timeline/SliderTimelineView.ts
index 32eb7d6fc2..f993e57138 100644
--- a/src/component/timeline/SliderTimelineView.ts
+++ b/src/component/timeline/SliderTimelineView.ts
@@ -420,7 +420,7 @@ class SliderTimelineView extends TimelineView {
 
         this._tickSymbols = [];
 
-        // The value is dataIndex, see the costomized scale.
+        // The value is dataIndex, see the customized scale.
         each(ticks, (tick: ScaleTick) => {
             const tickCoord = axis.dataToCoord(tick.value);
             const itemModel = data.getItemModel<TimelineDataItemOption>(tick.value);
@@ -470,7 +470,7 @@ class SliderTimelineView extends TimelineView {
         this._tickLabels = [];
 
         each(labels, (labelItem) => {
-            // The tickValue is dataIndex, see the costomized scale.
+            // The tickValue is dataIndex, see the customized scale.
             const dataIndex = labelItem.tickValue;
 
             const itemModel = data.getItemModel<TimelineDataItemOption>(dataIndex);
@@ -626,8 +626,11 @@ class SliderTimelineView extends TimelineView {
         this._currentPointer.x = toCoord;
         this._currentPointer.markRedraw();
 
-        this._progressLine.shape.x2 = toCoord;
-        this._progressLine.dirty();
+        const progressLine = this._progressLine;
+        if (progressLine) {
+            progressLine.shape.x2 = toCoord;
+            progressLine.dirty();
+        }
 
         const targetDataIndex = this._findNearestTick(toCoord);
         const timelineModel = this.model;
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 42f3d8e2ef..c08e7ae77e 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -175,6 +175,7 @@
   "symbol": 1,
   "symbol2": 1,
   "themeRiver": 1,
+  "timeline-case": 1,
   "timeScale": 1,
   "timeScale2": 1,
   "toolbox-textStyle": 1,
diff --git a/test/runTest/actions/timeline-case.json b/test/runTest/actions/timeline-case.json
new file mode 100644
index 0000000000..9b9518dfcb
--- /dev/null
+++ b/test/runTest/actions/timeline-case.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":456,"x":236,"y":511},{"type":"mousemove","time":659,"x":232,"y":484},{"type":"mousemove","time":876,"x":235,"y":465},{"type":"mousedown","time":1031,"x":236,"y":463},{"type":"mousemove","time":1088,"x":238,"y":462},{"type":"mousemove","time":1288,"x":333,"y":463},{"type":"mousemove","time":1494,"x":464,"y":457},{"type":"mousemove","time":1711,"x":464,"y":457},{"type":"mousemove","time":1955,"x":465,"y":457},{"type":"mousemove","time":2155,"x":581,"y":446},{"type":"mousemove","time":2355,"x":596,"y":446},{"type":"mousemove","time":2561,"x":600,"y":446},{"type":"mouseup","time":2731,"x":600,"y":446},{"time":2732,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2744,"x":600,"y":446},{"type":"mousemove","time":2960,"x":598,"y":453},{"type":"mousemove","time":3122,"x":597,"y":454},{"type":"mousedown","time":3315,"x":598,"y":457},{"type":"mousemove","time":3328,"x":598,"y":457},{"type":"mousemove","time":3388,"x":597,"y":457},{"type":"mousemove","time":3588,"x":462,"y":469},{"type":"mousemove","time":3788,"x":414,"y":463},{"type":"mouseup","time":4033,"x":414,"y":463},{"time":4034,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4053,"x":414,"y":463},{"type":"mousemove","time":4255,"x":417,"y":466},{"type":"mousedown","time":4419,"x":418,"y":467},{"type":"mousemove","time":4461,"x":418,"y":467},{"type":"mousemove","time":4472,"x":416,"y":468},{"type":"mousemove","time":4680,"x":272,"y":472},{"type":"mousemove","time":4894,"x":232,"y":468},{"type":"mouseup","time":4979,"x":232,"y":468},{"time":4980,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5196,"x":232,"y":468},{"type":"mousemove","time":5238,"x":231,"y":468},{"type":"mousedown","time":5363,"x":232,"y":464},{"type":"mousemove","time":5438,"x":242,"y":464},{"type":"mousemove","time":5638,"x":390,"y":481},{"type":"mousemove","time":5846,"x":420,"y":484},{"type":"mouseup","time":5851,"x":420,"y":484},{"time":5852,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6054,"x":418,"y":513},{"type":"mousemove","time":6255,"x":408,"y":531},{"type":"mousemove","time":6588,"x":406,"y":532},{"type":"mousemove","time":6794,"x":405,"y":532},{"type":"mousemove","time":7044,"x":397,"y":532},{"type":"mousemove","time":7171,"x":396,"y":533},{"type":"mousemove","time":7377,"x":382,"y":535},{"type":"mousemove","time":8588,"x":380,"y":534}],"scrollY":0,"scrollX":0,"timestamp":1663128694475}]
\ No newline at end of file
diff --git a/test/timeline-case.html b/test/timeline-case.html
new file mode 100644
index 0000000000..d6ba3cfba5
--- /dev/null
+++ b/test/timeline-case.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<!--
+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/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+
+
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option = {
+                timeline: {
+                    data: ['9月1日', '9月2日', '9月3日'],
+                    axisType: 'category',
+                    show: true,
+                    autoPlay: false,
+                    playInterval: 1000,
+                    lineStyle: {
+                        show: false
+                    }
+                },
+                options: [{
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    calculable: true,
+                    xAxis: {
+                        type: 'category',
+                        axisLabel: {
+                            interval: 0
+                        },
+                        data: ['1', ' 2', '3', '4', '5', '6', '7', '8']
+                    },
+                    yAxis: [
+                        {},
+                        {
+                            type: 'value'
+                        }
+                    ],
+                    series: [{
+                        yAxisIndex: 1,
+                        type: 'bar',
+                        data: [5, 6, 8, 28, 8, 24, 11, 16]
+                    }]
+                }, {
+                    title: {
+                        text: '9月2日'
+                    },
+                    series: [{
+                        data: [45, 43, 64, 134, 188, 43, 109, 12]
+                    }]
+                },
+                {
+                    title: {
+                        text: '9月3日'
+                    },
+                    series: [{
+                        data: [110, 32, 111, 176, 73, 59, 181, 9]
+                    }]
+                }]
+            };
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Drag the timeline',
+                    'The chart should be rendered correctly without any error message in the console',
+                    'Case from https://github.com/apache/echarts/issues/17643'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+