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 f680d16ed18c529990a556f950063b7b4a34cd4b
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Wed Sep 2 18:03:34 2020 +0800
feat(line): new animation for grid and polar
---
src/chart/helper/createClipPathFromCoordSys.ts | 31 +++++--
src/chart/line/LineView.ts | 83 ++++++++++++-----
test/line-animation.html | 103 +++++++++++++++++----
test/polarLine.html | 122 ++++++++++++++++++++++++-
4 files changed, 290 insertions(+), 49 deletions(-)
diff --git a/src/chart/helper/createClipPathFromCoordSys.ts
b/src/chart/helper/createClipPathFromCoordSys.ts
index c8b1f82..d0d21a7 100644
--- a/src/chart/helper/createClipPathFromCoordSys.ts
+++ b/src/chart/helper/createClipPathFromCoordSys.ts
@@ -34,7 +34,6 @@ function createGridClipPath(
seriesModel: SeriesModelWithLineWidth
) {
const rect = cartesian.getArea();
- const isHorizontal = cartesian.getBaseAxis().isHorizontal();
let x = rect.x;
let y = rect.y;
@@ -62,11 +61,19 @@ function createGridClipPath(
});
if (hasAnimation) {
- clipPath.shape[isHorizontal ? 'width' : 'height'] = 0;
+ const isHorizontal = cartesian.getBaseAxis().isHorizontal();
+ if (isHorizontal) {
+ clipPath.shape.width = 0;
+ }
+ else {
+ clipPath.shape.y = y + height;
+ clipPath.shape.height = 0;
+ }
graphic.initProps(clipPath, {
shape: {
width: width,
- height: height
+ height: height,
+ y: y
}
}, seriesModel);
}
@@ -82,12 +89,14 @@ function createPolarClipPath(
const sectorArea = polar.getArea();
// Avoid float number rounding error for symbol on the edge of axis extent.
+ const r0 = round(sectorArea.r0, 1);
+ const r = round(sectorArea.r, 1);
const clipPath = new graphic.Sector({
shape: {
cx: round(polar.cx, 1),
cy: round(polar.cy, 1),
- r0: round(sectorArea.r0, 1),
- r: round(sectorArea.r, 1),
+ r0: r0,
+ r: r,
startAngle: sectorArea.startAngle,
endAngle: sectorArea.endAngle,
clockwise: sectorArea.clockwise
@@ -95,10 +104,18 @@ function createPolarClipPath(
});
if (hasAnimation) {
- clipPath.shape.endAngle = sectorArea.startAngle;
+ const isRadial = polar.getBaseAxis().dim === 'angle';
+
+ if (isRadial) {
+ clipPath.shape.endAngle = sectorArea.startAngle;
+ }
+ else {
+ clipPath.shape.r = r0;
+ }
graphic.initProps(clipPath, {
shape: {
- endAngle: sectorArea.endAngle
+ endAngle: sectorArea.endAngle,
+ r: r
}
}, seriesModel);
}
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index cdcc025..5d12887 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -461,7 +461,12 @@ class LineView extends ChartView {
isIgnore: isIgnoreFunc,
clipShape: clipShapeForSymbol
});
- this._initAnimation(data, isCoordSysPolar, clipShapeForSymbol);
+
+ this._initAnimation(
+ data,
+ coordSys,
+ clipShapeForSymbol
+ );
if (step) {
// TODO If stacked series is not step
@@ -752,9 +757,21 @@ class LineView extends ChartView {
_initAnimation(
data: List,
- isCoordSysPolar: boolean,
+ coordSys: Polar | Cartesian2D,
clipShape: PolarArea | Cartesian2DArea
) {
+ let isHorizontalOrRadial: boolean;
+ let isCoordSysPolar: boolean;
+ const baseAxis = coordSys.getBaseAxis();
+ if (coordSys.type === 'cartesian2d') {
+ isHorizontalOrRadial = (baseAxis as Axis2D).isHorizontal();
+ isCoordSysPolar = false;
+ }
+ else if (coordSys.type === 'polar') {
+ isHorizontalOrRadial = baseAxis.dim === 'angle';
+ isCoordSysPolar = true;
+ }
+
const seriesModel = data.hostModel;
let seriesDuration = seriesModel.get('animationDuration');
if (typeof seriesDuration === 'function') {
@@ -768,35 +785,55 @@ class LineView extends ChartView {
data.eachItemGraphicEl(function (symbol, idx) {
const el = (symbol as SymbolClz).childAt(0) as Displayable;
if (el) {
- const symbolSize = data.getItemVisual(
- idx,
- 'symbolSize'
- );
- const symbolSizeArr = zrUtil.isArray(symbolSize)
- ? symbolSize : [symbolSize, symbolSize];
- const lineWidth = el.style.lineWidth;
-
- const total = isCoordSysPolar
- ? 0
- : (clipShape as Cartesian2DArea).width;
- const start = isCoordSysPolar
- ? 0
- : (clipShape as Cartesian2DArea).x;
+ const point = [symbol.x, symbol.y];
+ let start, end, current;
+ if (isCoordSysPolar) {
+ const polarClip = clipShape as PolarArea;
+ const coord = (coordSys as Polar).pointToCoord(point);
+ if (isHorizontalOrRadial) {
+ start = polarClip.startAngle;
+ end = polarClip.endAngle;
+ current = -coord[1] / 180 * Math.PI;
+ }
+ else {
+ start = polarClip.r0;
+ end = polarClip.r;
+ current = coord[0];
+ }
+ }
+ else {
+ const gridClip = clipShape as Cartesian2DArea;
+ if (isHorizontalOrRadial) {
+ start = gridClip.x;
+ end = gridClip.x + gridClip.width;
+ current = symbol.x;
+ }
+ else {
+ start = gridClip.y + gridClip.height;
+ end = gridClip.y;
+ current = symbol.y;
+ }
+ }
+ const ratio = end === start ? 0 : (current - start) / (end -
start);
let delay;
if (typeof seriesDalay === 'function') {
delay = seriesDalay(idx);
}
else {
- delay = (
- total === 0
- ? 0
- : seriesDuration / total * (symbol.x - start)
- ) + seriesDalayValue;
+ delay = (seriesDuration * ratio) + seriesDalayValue;
}
el.stopAnimation();
+ const symbolSize = data.getItemVisual(
+ idx,
+ 'symbolSize'
+ );
+ const symbolSizeArr = zrUtil.isArray(symbolSize)
+ ? symbolSize : [symbolSize, symbolSize];
+ const lineWidth = el.style.lineWidth;
+
el.attr({
scaleX: 1,
scaleY: 1,
@@ -816,8 +853,10 @@ class LineView extends ChartView {
});
const text = el.getTextContent();
- const textOpacity = text.style.opacity == null ? 1 :
text.style.opacity;
if (text) {
+ const textOpacity = !text.style || text.style.opacity ==
null
+ ? 1
+ : text.style.opacity;
text.stopAnimation();
text.attr({
style: {
diff --git a/test/line-animation.html b/test/line-animation.html
index 66bb57e..f89818c 100644
--- a/test/line-animation.html
+++ b/test/line-animation.html
@@ -42,10 +42,7 @@ under the License.
font-size: 14px;
}
.chart {
- height: 500px;
- }
- #main0, #main1 {
- height: 300px;
+ height: 600px;
}
button {
font-size: 16px;
@@ -81,7 +78,7 @@ under the License.
var data = [];
var value = 200;
var positive = 1;
- for (let i = 0; i < 10; ++i) {
+ for (let i = 0; i < 100; ++i) {
xData.push(i + '');
value = positive * Math.round(Math.random() * 50) + value;
data.push(value);
@@ -92,22 +89,95 @@ under the License.
}
option = {
- title: {
- text: 'Default Line Animation',
- subtext: 'Symbol and text should sync with line
clipPath'
- },
- xAxis: {
+ title: [{
+ text: 'Default Line Animation, all should be
left-to-right, bottom-to top',
+ subtext: 'Symbol and text should sync with line
clipPath\n\naxis not inversed',
+ textAlign: 'center',
+ left: '50%',
+ top: 0
+ }, {
+ subtext: '(axis inversed)',
+ textAlign: 'center',
+ left: '50%',
+ top: '52%'
+ }],
+ xAxis: [{
data: xData
- },
- yAxis: {},
+ }, {
+ gridIndex: 1
+ }, {
+ data: xData,
+ inverse: true,
+ gridIndex: 2
+ }, {
+ gridIndex: 3,
+ inverse: true
+ }],
+ yAxis: [{
+ }, {
+ data: xData,
+ gridIndex: 1
+ }, {
+ inverse: true,
+ gridIndex: 2
+ }, {
+ data: xData,
+ gridIndex: 3,
+ inverse: true
+ }],
+ grid: [{
+ left: 80,
+ top: 100,
+ right: '52%',
+ bottom: '55%'
+ }, {
+ left: '52%',
+ top: 100,
+ right: 50,
+ bottom: '55%'
+ }, {
+ left: 80,
+ right: '52%',
+ top: '60%',
+ bottom: 30
+ }, {
+ left: '52%',
+ right: 50,
+ top: '60%',
+ bottom: 30
+ }],
series: [{
type: 'line',
data: data,
label: {
show: true
}
+ }, {
+ type: 'line',
+ data: data,
+ label: {
+ show: true
+ },
+ xAxisIndex: 1,
+ yAxisIndex: 1
+ }, {
+ type: 'line',
+ data: data,
+ label: {
+ show: true
+ },
+ xAxisIndex: 2,
+ yAxisIndex: 2
+ }, {
+ type: 'line',
+ data: data,
+ label: {
+ show: true
+ },
+ xAxisIndex: 3,
+ yAxisIndex: 3
}],
- animationDuration: 3000,
+ animationDuration: 10000,
animationDurationUpdate: 1000
};
chart.setOption(option);
@@ -132,7 +202,7 @@ under the License.
var data = [];
var value = 200;
var positive = 1;
- for (let i = 0; i < 10; ++i) {
+ for (let i = 0; i < 100; ++i) {
xData.push(i + '');
value = positive * Math.round(Math.random() * 50) + value;
data.push(value);
@@ -142,6 +212,7 @@ under the License.
}
}
+ var duration = 10000;
option = {
title: {
text: 'Label Animation with animationDelay callback',
@@ -164,11 +235,11 @@ under the License.
}
else {
// cubicIn is x=t^3 so t=x^(1/3)
- return (Math.pow((i + 0.5) / data.length, 1 /
3)) * 3000;
+ return (Math.pow((i + 0.5) / data.length, 1 /
3)) * duration;
}
}
}],
- animationDuration: 3000,
+ animationDuration: duration,
animationDurationUpdate: 1000
};
chart.setOption(option);
diff --git a/test/polarLine.html b/test/polarLine.html
index 64bc0b9..be8a4bd 100644
--- a/test/polarLine.html
+++ b/test/polarLine.html
@@ -26,12 +26,14 @@ under the License.
</head>
<body>
<style>
- html, body, #main {
+ html, body, #main1, #main0 {
width: 100%;
- height: 100%;
+ height: 500px;
}
</style>
- <div id="main"></div>
+ <div id="main0"></div>
+ <div id="main1"></div>
+
<script>
require([
@@ -44,7 +46,7 @@ under the License.
// 'echarts/component/markLine'
], function (echarts) {
- var chart = echarts.init(document.getElementById('main'),
null, {
+ var chart = echarts.init(document.getElementById('main0'),
null, {
});
@@ -82,12 +84,16 @@ under the License.
symbolOffset: [20, -20]
}
},
+ animationDuration: 5000,
series: [{
coordinateSystem: 'polar',
name: 'line',
stack: 'all',
type: 'line',
symbolSize: 10,
+ label: {
+ show: true
+ },
itemStyle: {
normal: {
areaStyle: {}
@@ -105,6 +111,9 @@ under the License.
stack: 'all',
type: 'line',
symbolSize: 10,
+ label: {
+ show: true
+ },
itemStyle: {
normal: {
areaStyle: {}
@@ -124,6 +133,9 @@ under the License.
stack: 'all',
type: 'line',
symbolSize: 10,
+ label: {
+ show: true
+ },
itemStyle: {
normal: {
areaStyle: {}
@@ -135,5 +147,107 @@ under the License.
})
</script>
+
+
+ <script>
+
+ require([
+ 'echarts'
+ // 'echarts/chart/line',
+ // 'echarts/component/legend',
+ // 'echarts/component/polar',
+ // 'echarts/component/tooltip',
+ // 'echarts/component/markPoint',
+ // 'echarts/component/markLine'
+ ], function (echarts) {
+
+ var chart = echarts.init(document.getElementById('main1'),
null, {
+
+ });
+
+ var xAxisData = [];
+ var data1 = [];
+ var data2 = [];
+ var data3 = [];
+
+ for (var i = 0; i < 10; i++) {
+ xAxisData.push('类目' + i);
+ data1.push((Math.random() * 2 + 1).toFixed(3));
+ data3.push((Math.random() + 0.5).toFixed(3));
+ data2.push((Math.random() + 0.5).toFixed(3));
+ }
+
+ chart.setOption({
+ legend: {
+ data: ['line', 'line2', 'line3']
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ polar: {
+ radius: [40, 200]
+ },
+ angleAxis: {
+ axisLine: {
+ symbol: 'arrow',
+ symbolOffset: [20, -20]
+ }
+ },
+ radiusAxis: {
+ // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
+ data: xAxisData,
+ startAngle: 30
+ },
+ animationDuration: 5000,
+ series: [{
+ coordinateSystem: 'polar',
+ name: 'line',
+ stack: 'all',
+ type: 'line',
+ symbolSize: 10,
+ label: {
+ show: true
+ },
+ markPoint: {
+ data: [{
+ type: 'max'
+ }]
+ },
+ data: data1
+ }, {
+ coordinateSystem: 'polar',
+ name: 'line2',
+ stack: 'all',
+ type: 'line',
+ symbolSize: 10,
+ label: {
+ show: true
+ },
+ markLine: {
+ data: [[{
+ type: 'max'
+ }, {
+ type: 'min'
+ }]]
+ },
+ data: data2
+ }, {
+ coordinateSystem: 'polar',
+ name: 'line3',
+ stack: 'all',
+ type: 'line',
+ symbolSize: 10,
+ label: {
+ show: true
+ },
+ data: data3
+ }]
+ });
+ })
+
+ </script>
</body>
</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
