You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/09/08 09:54:25 UTC
[incubator-echarts] 02/06: feat(line)!: support both series and
item delay with animationDelay callbacks
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch line-label
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 6e2831e717b047f1d021f255775a96593e8e1107
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Sep 2 15:09:40 2020 +0800
feat(line)!: support both series and item delay with animationDelay callbacks
BREAKING CHANGE: May not be compatible with 4.x.
Since default symbol animation with line charts has been changed in 5.0 to be
displayed when the clipPath of the line goes through the data point,
animationDelay callback now has two meanings:
animationDelay: function (i) { return ... }
(1) If `i` is `null`, the callback should return the delay of the overall
series animation, that is, the delay before the line clipPath starts
changing.
(2) If `i` is a `number`, the callback should return the delay of the certain
delay of each data item.
In ECharts 4.x, however, since the label animation shows along with the line
animation, only the `number` form is used.
---
src/chart/line/LineView.ts | 25 +++++---
test/line-animation.html | 148 +++++++++++++++++++++++++++++++++++++++------
2 files changed, 145 insertions(+), 28 deletions(-)
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 00425cc..cdcc025 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -760,10 +760,10 @@ class LineView extends ChartView {
if (typeof seriesDuration === 'function') {
seriesDuration = seriesDuration(null);
}
- let seriesDalay = seriesModel.get('animationDelay') || 0;
- if (typeof seriesDalay === 'function') {
- seriesDalay = seriesDalay(null);
- }
+ const seriesDalay = seriesModel.get('animationDelay') || 0;
+ const seriesDalayValue = typeof seriesDalay === 'function'
+ ? seriesDalay(null)
+ : seriesDalay;
data.eachItemGraphicEl(function (symbol, idx) {
const el = (symbol as SymbolClz).childAt(0) as Displayable;
@@ -782,11 +782,18 @@ class LineView extends ChartView {
const start = isCoordSysPolar
? 0
: (clipShape as Cartesian2DArea).x;
- const delay = (
- total === 0
- ? 0
- : seriesDuration / total * (symbol.x - start)
- ) + seriesDalay;
+
+ let delay;
+ if (typeof seriesDalay === 'function') {
+ delay = seriesDalay(idx);
+ }
+ else {
+ delay = (
+ total === 0
+ ? 0
+ : seriesDuration / total * (symbol.x - start)
+ ) + seriesDalayValue;
+ }
el.stopAnimation();
diff --git a/test/line-animation.html b/test/line-animation.html
index 5934eef..66bb57e 100644
--- a/test/line-animation.html
+++ b/test/line-animation.html
@@ -32,7 +32,7 @@ under the License.
</head>
<body>
<style>
- h1 {
+ h2 {
line-height: 60px;
height: 60px;
background: #146402;
@@ -44,13 +44,139 @@ under the License.
.chart {
height: 500px;
}
+ #main0, #main1 {
+ height: 300px;
+ }
button {
font-size: 16px;
}
</style>
+ <h2>Default Label Animation</h2>
+ <div class="chart" id="main0"></div>
+
+
+ <h2>Label Animation with animationDelay callback</h2>
+ <div class="chart" id="main1"></div>
+
+
+ <h2>dataZoom Animation</h2>
<button onclick="change()">CHANGE</button>
- <div class="chart" id="main"></div>
+ <div class="chart" id="main2"></div>
+
+
+
+ <script>
+
+ var echarts;
+ var chart;
+
+ require([
+ 'echarts'
+ ], function (ec) {
+ echarts = ec;
+ chart = myChart = echarts.init(document.getElementById('main0'));
+
+ var xData = [];
+ var data = [];
+ var value = 200;
+ var positive = 1;
+ for (let i = 0; i < 10; ++i) {
+ xData.push(i + '');
+ value = positive * Math.round(Math.random() * 50) + value;
+ data.push(value);
+
+ if (Math.random() > 0.7) {
+ positive = -1 * positive;
+ }
+ }
+
+ option = {
+ title: {
+ text: 'Default Line Animation',
+ subtext: 'Symbol and text should sync with line clipPath'
+ },
+ xAxis: {
+ data: xData
+ },
+ yAxis: {},
+ series: [{
+ type: 'line',
+ data: data,
+ label: {
+ show: true
+ }
+ }],
+ animationDuration: 3000,
+ animationDurationUpdate: 1000
+ };
+ chart.setOption(option);
+
+ });
+
+ </script>
+
+
+ <script>
+
+ var echarts;
+ var chart;
+
+ require([
+ 'echarts'
+ ], function (ec) {
+ echarts = ec;
+ chart = myChart = echarts.init(document.getElementById('main1'));
+
+ var xData = [];
+ var data = [];
+ var value = 200;
+ var positive = 1;
+ for (let i = 0; i < 10; ++i) {
+ xData.push(i + '');
+ value = positive * Math.round(Math.random() * 50) + value;
+ data.push(value);
+
+ if (Math.random() > 0.7) {
+ positive = -1 * positive;
+ }
+ }
+
+ option = {
+ title: {
+ text: 'Label Animation with animationDelay callback',
+ subtext: 'Symbol and text should sync with line clipPath'
+ },
+ xAxis: {
+ data: xData
+ },
+ yAxis: {},
+ series: [{
+ type: 'line',
+ data: data,
+ label: {
+ show: true
+ },
+ animationEasing: 'cubicIn',
+ animationDelay: function (i) {
+ if (i == null) {
+ return null;
+ }
+ else {
+ // cubicIn is x=t^3 so t=x^(1/3)
+ return (Math.pow((i + 0.5) / data.length, 1 / 3)) * 3000;
+ }
+ }
+ }],
+ animationDuration: 3000,
+ animationDurationUpdate: 1000
+ };
+ chart.setOption(option);
+
+ });
+
+ </script>
+
@@ -64,25 +190,9 @@ under the License.
require([
'echarts'
- // 'echarts/chart/line',
- // 'echarts/chart/bar',
- // 'echarts/chart/pie',
- // 'echarts/chart/scatter',
- // 'echarts/chart/map',
- // 'echarts/chart/parallel',
- // 'echarts/chart/radar',
- // 'echarts/component/grid',
- // 'echarts/component/polar',
- // 'echarts/component/geo',
- // 'echarts/component/singleAxis',
- // 'echarts/component/legend',
- // 'echarts/component/tooltip',
- // 'echarts/component/toolbox',
- // 'echarts/component/visualMap',
- // 'echarts/component/dataZoom'
], function (ec) {
echarts = ec;
- chart = myChart = echarts.init(document.getElementById('main'));
+ chart = myChart = echarts.init(document.getElementById('main2'));
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org