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 2021/10/11 13:45:26 UTC
[echarts] branch optimize-progressive updated: perf(progressive):
optimize performance for chart with progressive
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch optimize-progressive
in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/optimize-progressive by this push:
new 36ecdd1 perf(progressive): optimize performance for chart with progressive
36ecdd1 is described below
commit 36ecdd1757df57557bda220f105de299355167cd
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Oct 11 21:44:18 2021 +0800
perf(progressive): optimize performance for chart with progressive
---
src/chart/bar/BarView.ts | 23 ++++++++++++++++++++---
src/chart/candlestick/CandlestickView.ts | 25 +++++++++++++++++++++++--
src/chart/custom/CustomView.ts | 16 +++++++++++++++-
src/chart/parallel/ParallelView.ts | 9 +++++++++
4 files changed, 67 insertions(+), 6 deletions(-)
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index dce754a..f21adaf 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -19,14 +19,15 @@
import Path, {PathProps} from 'zrender/src/graphic/Path';
import Group from 'zrender/src/graphic/Group';
-import {extend, defaults, each, map} from 'zrender/src/core/util';
+import {extend, each, map} from 'zrender/src/core/util';
import {BuiltinTextPosition} from 'zrender/src/core/types';
import {
Rect,
Sector,
updateProps,
initProps,
- removeElementWithFadeOut
+ removeElementWithFadeOut,
+ traverseElements
} from '../../util/graphic';
import { getECData } from '../../util/innerStore';
import { enableHoverEmphasis, setStatesStylesFromModel } from '../../util/states';
@@ -63,6 +64,7 @@ import {EventCallback} from 'zrender/src/core/Eventful';
import { warn } from '../../util/log';
import {createSectorCalculateTextPosition, SectorTextPosition, setSectorTextRotation} from '../../label/sectorLabel';
import { saveOldStyle } from '../../animation/basicTrasition';
+import Element from 'zrender/src/Element';
const _eventPos = [0, 0];
@@ -128,6 +130,8 @@ class BarView extends ChartView {
private _model: BarSeriesModel;
+ private _progressiveEls: Element[];
+
constructor() {
super();
this._isFirstFrame = true;
@@ -145,6 +149,9 @@ class BarView extends ChartView {
if (coordinateSystemType === 'cartesian2d'
|| coordinateSystemType === 'polar'
) {
+ // Clear previously rendered progressive elements.
+ this._progressiveEls = null;
+
this._isLargeDraw
? this._renderLarge(seriesModel, ecModel, api)
: this._renderNormal(seriesModel, ecModel, api, payload);
@@ -163,10 +170,16 @@ class BarView extends ChartView {
}
incrementalRender(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
+ // Reset
+ this._progressiveEls = [];
// Do not support progressive in normal mode.
this._incrementalRenderLarge(params, seriesModel);
}
+ eachRendered(cb: (el: Element) => boolean | void) {
+ traverseElements(this._progressiveEls || this.group, cb);
+ }
+
private _updateDrawMode(seriesModel: BarSeriesModel): void {
const isLargeDraw = seriesModel.pipelineContext.large;
if (this._isLargeDraw == null || isLargeDraw !== this._isLargeDraw) {
@@ -409,7 +422,7 @@ class BarView extends ChartView {
private _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
this._removeBackground();
- createLarge(seriesModel, this.group, true);
+ createLarge(seriesModel, this.group, this._progressiveEls, true);
}
private _updateLargeClip(seriesModel: BarSeriesModel): void {
@@ -1069,6 +1082,7 @@ class LargePath extends Path<LargePathProps> {
function createLarge(
seriesModel: BarSeriesModel,
group: Group,
+ progressiveEls?: Element[],
incremental?: boolean
) {
// TODO support polar
@@ -1100,6 +1114,8 @@ function createLarge(
bgEl.__barWidth = barWidth;
setLargeBackgroundStyle(bgEl, backgroundModel, data);
group.add(bgEl);
+
+ progressiveEls && progressiveEls.push(bgEl);
}
const el = new LargePath({
@@ -1120,6 +1136,7 @@ function createLarge(
el.on('mousedown', largePathUpdateDataIndex);
el.on('mousemove', largePathUpdateDataIndex);
}
+ progressiveEls && progressiveEls.push(el);
}
// Use throttle to avoid frequently traverse to find dataIndex.
diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts
index 7e62360..9b2436d 100644
--- a/src/chart/candlestick/CandlestickView.ts
+++ b/src/chart/candlestick/CandlestickView.ts
@@ -32,6 +32,7 @@ import {CandlestickItemLayout} from './candlestickLayout';
import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
import Model from '../../model/Model';
import { saveOldStyle } from '../../animation/basicTrasition';
+import Element from 'zrender/src/Element';
const SKIP_PROPS = ['color', 'borderColor'] as const;
@@ -44,9 +45,13 @@ class CandlestickView extends ChartView {
private _data: SeriesData;
+ private _progressiveEls: Element[];
+
render(seriesModel: CandlestickSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
// If there is clipPath created in large mode. Remove it.
this.group.removeClipPath();
+ // Clear previously rendered progressive elements.
+ this._progressiveEls = null;
this._updateDrawMode(seriesModel);
@@ -66,11 +71,16 @@ class CandlestickView extends ChartView {
ecModel: GlobalModel,
api: ExtensionAPI
) {
+ this._progressiveEls = [];
this._isLargeDraw
? this._incrementalRenderLarge(params, seriesModel)
: this._incrementalRenderNormal(params, seriesModel);
}
+ eachRendered(cb: (el: Element) => boolean | void) {
+ graphic.traverseElements(this._progressiveEls || this.group, cb);
+ }
+
_updateDrawMode(seriesModel: CandlestickSeriesModel) {
const isLargeDraw = seriesModel.pipelineContext.large;
if (this._isLargeDraw == null || isLargeDraw !== this._isLargeDraw) {
@@ -185,11 +195,13 @@ class CandlestickView extends ChartView {
el.incremental = true;
this.group.add(el);
+
+ this._progressiveEls.push(el);
}
}
_incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: CandlestickSeriesModel) {
- createLarge(seriesModel, this.group, true);
+ createLarge(seriesModel, this.group, this._progressiveEls, true);
}
remove(ecModel: GlobalModel) {
@@ -335,7 +347,12 @@ class LargeBoxPath extends Path {
}
}
-function createLarge(seriesModel: CandlestickSeriesModel, group: graphic.Group, incremental?: boolean) {
+function createLarge(
+ seriesModel: CandlestickSeriesModel,
+ group: graphic.Group,
+ progressiveEls?: Element[],
+ incremental?: boolean
+) {
const data = seriesModel.getData();
const largePoints = data.getLayout('largePoints');
@@ -357,6 +374,10 @@ function createLarge(seriesModel: CandlestickSeriesModel, group: graphic.Group,
elP.incremental = true;
elN.incremental = true;
}
+
+ if (progressiveEls) {
+ progressiveEls.push(elP, elN);
+ }
}
function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickSeriesModel, data: SeriesData) {
diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts
index f084d84..91854af 100644
--- a/src/chart/custom/CustomView.ts
+++ b/src/chart/custom/CustomView.ts
@@ -201,6 +201,7 @@ export default class CustomChartView extends ChartView {
readonly type = CustomChartView.type;
private _data: SeriesData;
+ private _progressiveEls: Element[];
render(
customSeries: CustomSeriesModel,
@@ -208,6 +209,10 @@ export default class CustomChartView extends ChartView {
api: ExtensionAPI,
payload: Payload
): void {
+
+ // Clear previously rendered progressive elements.
+ this._progressiveEls = null;
+
const oldData = this._data;
const data = customSeries.getData();
const group = this.group;
@@ -271,6 +276,8 @@ export default class CustomChartView extends ChartView {
): void {
const data = customSeries.getData();
const renderItem = makeRenderItem(customSeries, data, ecModel, api);
+ const progressiveEls: Element[] = this._progressiveEls = [];
+
function setIncrementalAndHoverLayer(el: Displayable) {
if (!el.isGroup) {
el.incremental = true;
@@ -281,10 +288,17 @@ export default class CustomChartView extends ChartView {
const el = createOrUpdateItem(
null, null, idx, renderItem(idx, payload), customSeries, this.group, data
);
- el && el.traverse(setIncrementalAndHoverLayer);
+ if (el) {
+ el.traverse(setIncrementalAndHoverLayer);
+ progressiveEls.push(el);
+ }
}
}
+ eachRendered(cb: (el: Element) => boolean | void) {
+ graphicUtil.traverseElements(this._progressiveEls || this.group, cb);
+ }
+
filterForExposedEvent(
eventType: string, query: EventQueryItem, targetEl: Element, packedEvent: ECActionEvent
): boolean {
diff --git a/src/chart/parallel/ParallelView.ts b/src/chart/parallel/ParallelView.ts
index f3b478c..adb970e 100644
--- a/src/chart/parallel/ParallelView.ts
+++ b/src/chart/parallel/ParallelView.ts
@@ -30,6 +30,7 @@ import { OptionAxisType } from '../../coord/axisCommonTypes';
import { numericToNumber } from '../../util/number';
import { eqNaN } from 'zrender/src/core/util';
import { saveOldStyle } from '../../animation/basicTrasition';
+import Element from 'zrender/src/Element';
const DEFAULT_SMOOTH = 0.3;
@@ -46,6 +47,8 @@ class ParallelView extends ChartView {
private _initialized = false;
+ private _progressiveEls: Element[];
+
init() {
this.group.add(this._dataGroup);
}
@@ -59,6 +62,10 @@ class ParallelView extends ChartView {
api: ExtensionAPI,
payload: Payload
) {
+
+ // Clear previously rendered progressive elements.
+ this._progressiveEls = null;
+
const dataGroup = this._dataGroup;
const data = seriesModel.getData();
const oldData = this._data;
@@ -123,11 +130,13 @@ class ParallelView extends ChartView {
const coordSys = seriesModel.coordinateSystem;
const dimensions = coordSys.dimensions;
const seriesScope = makeSeriesScope(seriesModel);
+ const progressiveEls: Element[] = this._progressiveEls = [];
for (let dataIndex = taskParams.start; dataIndex < taskParams.end; dataIndex++) {
const line = addEl(data, this._dataGroup, dataIndex, dimensions, coordSys);
line.incremental = true;
updateElCommon(line, data, dataIndex, seriesScope);
+ progressiveEls.push(line);
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org