You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2022/09/14 04:17:02 UTC
[echarts] 01/01: fix(timeline): fix chart can't work when axis line is not shown.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch fix-timeline
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 20134763b95a52686f5f36a258bf9206f821b0b2
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Wed Sep 14 12:13:18 2022 +0800
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(-)
diff --git a/src/component/timeline/SliderTimelineView.ts b/src/component/timeline/SliderTimelineView.ts
index 32eb7d6fc..f993e5713 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 42f3d8e2e..c08e7ae77 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 000000000..9b9518dfc
--- /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": [...]
\ No newline at end of file
diff --git a/test/timeline-case.html b/test/timeline-case.html
new file mode 100644
index 000000000..d6ba3cfba
--- /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>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org