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