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 <zwl.s...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org