You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/10/19 13:08:17 UTC
[incubator-echarts] branch next updated: feat(gauge): add value
animation in gauge
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new f57a88f feat(gauge): add value animation in gauge
f57a88f is described below
commit f57a88fbe7ee2e0fb9b902e83fe68a16210d76a1
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Oct 19 21:07:53 2020 +0800
feat(gauge): add value animation in gauge
---
src/chart/gauge/GaugeSeries.ts | 16 ++++++++--
src/chart/gauge/GaugeView.ts | 68 ++++++++++++++++++++++++++++++++----------
src/util/model.ts | 4 +++
3 files changed, 71 insertions(+), 17 deletions(-)
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index bfe4b36..cca18ef 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -77,6 +77,11 @@ interface TitleOption extends LabelOption {
*/
offsetCenter?: (number | string)[]
formatter?: LabelFormatter | string
+
+ /**
+ * If do value animtion.
+ */
+ valueAnimation?: boolean
}
interface DetailOption extends LabelOption {
@@ -85,6 +90,11 @@ interface DetailOption extends LabelOption {
*/
offsetCenter?: (number | string)[]
formatter?: LabelFormatter | string
+
+ /**
+ * If do value animtion.
+ */
+ valueAnimation?: boolean
}
export interface GaugeStateOption {
@@ -273,7 +283,8 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
offsetCenter: [0, '20%'],
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#464646',
- fontSize: 16
+ fontSize: 16,
+ valueAnimation: true
},
detail: {
show: true,
@@ -290,7 +301,8 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
color: '#464646',
fontSize: 30,
fontWeight: 'bold',
- lineHeight: 30
+ lineHeight: 30,
+ valueAnimation: true
}
};
}
diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index c4d7208..00603a0 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -20,16 +20,17 @@
import PointerPath from './PointerPath';
import * as graphic from '../../util/graphic';
import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
-import {createTextStyle} from '../../label/labelStyle';
+import {createTextStyle, setLabelValueAnimation, animateLabelValue} from '../../label/labelStyle';
import ChartView from '../../view/Chart';
import {parsePercent, round, linearMap} from '../../util/number';
import GaugeSeriesModel, { GaugeDataItemOption } from './GaugeSeries';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../ExtensionAPI';
-import { ColorString, ECElement } from '../../util/types';
+import { ColorString, ECElement, ParsedValue } from '../../util/types';
import List from '../../data/List';
import Sausage from '../../util/shape/sausage';
import {createSymbol} from '../../util/symbol';
+import { labeledStatement } from '@babel/types';
interface PosInfo {
cx: number
@@ -74,7 +75,10 @@ class GaugeView extends ChartView {
type = GaugeView.type;
private _data: List;
- private _progressData: graphic.Path[];
+ private _progressEls: graphic.Path[];
+
+ private _titleEls: graphic.Text[];
+ private _detailEls: graphic.Text[];
render(seriesModel: GaugeSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
@@ -86,6 +90,8 @@ class GaugeView extends ChartView {
this._renderMain(
seriesModel, ecModel, api, colorList, posInfo
);
+
+ this._data = seriesModel.getData();
}
dispose() {}
@@ -330,7 +336,7 @@ class GaugeView extends ChartView {
const group = this.group;
const oldData = this._data;
- const oldProgressData = this._progressData;
+ const oldProgressData = this._progressEls;
const progressList = [] as graphic.Path[];
const showPointer = seriesModel.get(['pointer', 'show']);
@@ -491,8 +497,7 @@ class GaugeView extends ChartView {
}
});
- this._data = data;
- this._progressData = progressList;
+ this._progressEls = progressList;
}
}
@@ -536,6 +541,25 @@ class GaugeView extends ChartView {
const contentGroup = new graphic.Group();
+ const newTitleEls: graphic.Text[] = [];
+ const newDetailEls: graphic.Text[] = [];
+ const hasAnimation = seriesModel.isAnimationEnabled();
+
+ data.diff(this._data)
+ .add((idx) => {
+ newTitleEls[idx] = new graphic.Text({
+ silent: true
+ });
+ newDetailEls[idx] = new graphic.Text({
+ silent: true
+ });
+ })
+ .update((idx, oldIdx) => {
+ newTitleEls[idx] = this._titleEls[oldIdx];
+ newDetailEls[idx] = this._detailEls[oldIdx];
+ })
+ .execute();
+
data.each(function (idx) {
const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
const value = data.get(valueDim, idx) as number;
@@ -549,8 +573,8 @@ class GaugeView extends ChartView {
const titleOffsetCenter = itemTitleModel.get('offsetCenter');
const titleX = posInfo.cx + parsePercent(titleOffsetCenter[0], posInfo.r);
const titleY = posInfo.cy + parsePercent(titleOffsetCenter[1], posInfo.r);
- itemGroup.add(new graphic.Text({
- silent: true,
+ const labelEl = newTitleEls[idx];
+ labelEl.attr({
style: createTextStyle(itemTitleModel, {
x: titleX,
y: titleY,
@@ -558,7 +582,13 @@ class GaugeView extends ChartView {
align: 'center',
verticalAlign: 'middle'
}, {inheritColor: autoColor})
- }));
+ });
+ setLabelValueAnimation(
+ labelEl, {normal: itemTitleModel}, seriesModel.getRawValue(idx) as ParsedValue, () => data.getName(idx)
+ );
+ hasAnimation && animateLabelValue(labelEl, idx, data, seriesModel);
+
+ itemGroup.add(labelEl);
}
const itemDetailModel = itemModel.getModel('detail');
@@ -571,26 +601,34 @@ class GaugeView extends ChartView {
const detailColor = (
seriesModel.get(['progress', 'show']) ? data.getItemVisual(idx, 'style').fill : autoColor
) as string;
- itemGroup.add(new graphic.Text({
- silent: true,
+ const labelEl = newDetailEls[idx];
+ const formatter = itemDetailModel.get('formatter');
+ labelEl.attr({
style: createTextStyle(itemDetailModel, {
x: detailX,
y: detailY,
- text: formatLabel(
- value, itemDetailModel.get('formatter')
- ),
+ text: formatLabel(value, formatter),
width: isNaN(width) ? null : width,
height: isNaN(height) ? null : height,
align: 'center',
verticalAlign: 'middle'
}, {inheritColor: detailColor})
- }));
+ });
+ setLabelValueAnimation(
+ labelEl, {normal: itemTitleModel}, seriesModel.getRawValue(idx) as ParsedValue,
+ (value: number) => formatLabel(value, formatter)
+ );
+ hasAnimation && animateLabelValue(labelEl, idx, data, seriesModel);
+
+ itemGroup.add(labelEl);
}
contentGroup.add(itemGroup);
});
this.group.add(contentGroup);
+ this._titleEls = newTitleEls;
+ this._detailEls = newDetailEls;
}
}
diff --git a/src/util/model.ts b/src/util/model.ts
index 9ee4127..9215b13 100644
--- a/src/util/model.ts
+++ b/src/util/model.ts
@@ -1011,6 +1011,10 @@ export function interpolateRawValues(
): (string | number)[] | string | number {
const isAutoPrecision = precision == null || precision === 'auto';
+ if (targetValue == null) {
+ return targetValue;
+ }
+
if (typeof targetValue === 'number') {
const value = interpolateNumber(
sourceValue as number || 0,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org