This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch enhance-morph
in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/enhance-morph by this push:
new 3e6297c feat(ut): remove the old transition code in custom series
3e6297c is described below
commit 3e6297cf5237d75ee85b4f12a177ed0982625261
Author: pissang <bm2736...@gmail.com>
AuthorDate: Thu Jun 17 14:55:42 2021 +0800
feat(ut): remove the old transition code in custom series
---
src/animation/morphTransitionHelper.ts | 24 ---
src/chart/custom/CustomSeries.ts | 2 -
src/chart/custom/CustomView.ts | 284 ++++++++-------------------------
src/chart/lines/LinesView.ts | 2 -
test/custom-hexbin.html | 8 +-
test/custom-shape-morphing.html | 13 +-
test/custom-shape-morphing2.html | 66 +++-----
7 files changed, 102 insertions(+), 297 deletions(-)
diff --git a/src/animation/morphTransitionHelper.ts
b/src/animation/morphTransitionHelper.ts
index 1890bfd..285e41c 100644
--- a/src/animation/morphTransitionHelper.ts
+++ b/src/animation/morphTransitionHelper.ts
@@ -215,28 +215,4 @@ export function getPathList(
}
});
return pathList;
-}
-
-
-export function isPath(el: Element): el is Path {
- return el instanceof Path;
-}
-export function isDisplayable(el: Element) : el is Displayable {
- return el instanceof Displayable;
-}
-
-export function copyElement(sourceEl: Element, targetEl: Element) {
- targetEl.copyTransform(sourceEl);
- if (isDisplayable(targetEl) && isDisplayable(sourceEl)) {
- targetEl.setStyle(sourceEl.style);
- targetEl.z = sourceEl.z;
- targetEl.z2 = sourceEl.z2;
- targetEl.zlevel = sourceEl.zlevel;
- targetEl.invisible = sourceEl.invisible;
- targetEl.ignore = sourceEl.ignore;
-
- if (isPath(targetEl) && isPath(sourceEl)) {
- targetEl.setShape(sourceEl.shape);
- }
- }
}
\ No newline at end of file
diff --git a/src/chart/custom/CustomSeries.ts b/src/chart/custom/CustomSeries.ts
index 9cfd263..5c87a59 100644
--- a/src/chart/custom/CustomSeries.ts
+++ b/src/chart/custom/CustomSeries.ts
@@ -299,8 +299,6 @@ export const customInnerStore = makeInner<{
// customText: string;
txConZ2Set: number;
leaveToProps: ElementProps;
- // Can morph: "morph" specified in option and el is Path.
- morph: boolean;
option: CustomElementOption;
userDuring: CustomBaseElementOption['during'];
}, Element>();
diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts
index f0caaf1..ed88d72 100644
--- a/src/chart/custom/CustomView.ts
+++ b/src/chart/custom/CustomView.ts
@@ -19,14 +19,14 @@
import {
hasOwn, assert, isString, retrieve2, retrieve3, defaults, each,
- keys, bind, eqNaN, indexOf, curry, filter, map
+ keys, bind, eqNaN, indexOf
} from 'zrender/src/core/util';
import * as graphicUtil from '../../util/graphic';
import { setDefaultStateProxy, enableHoverEmphasis } from '../../util/states';
import * as labelStyleHelper from '../../label/labelStyle';
import {getDefaultLabel} from '../helper/labelHelper';
import {getLayoutOnAxis} from '../../layout/barGrid';
-import DataDiffer, { DataDiffMode } from '../../data/DataDiffer';
+import DataDiffer from '../../data/DataDiffer';
import Model from '../../model/Model';
import ChartView from '../../view/Chart';
import {createClipPath} from '../helper/createClipPathFromCoordSys';
@@ -94,13 +94,6 @@ import CustomSeriesModel, {
PrepareCustomInfo
} from './CustomSeries';
import {
- getPathList,
- applyMorphAnimation,
- isPath,
- isDisplayable,
- copyElement
-} from '../../animation/morphTransitionHelper';
-import {
prepareShapeOrExtraAllPropsFinal,
prepareShapeOrExtraTransitionFrom,
prepareStyleTransitionFrom,
@@ -178,6 +171,27 @@ const prepareCustoms: Dictionary<PrepareCustomInfo> = {
};
+function isPath(el: Element): el is graphicUtil.Path {
+ return el instanceof graphicUtil.Path;
+}
+function isDisplayable(el: Element) : el is Displayable {
+ return el instanceof Displayable;
+}
+function copyElement(sourceEl: Element, targetEl: Element) {
+ targetEl.copyTransform(sourceEl);
+ if (isDisplayable(targetEl) && isDisplayable(sourceEl)) {
+ targetEl.setStyle(sourceEl.style);
+ targetEl.z = sourceEl.z;
+ targetEl.z2 = sourceEl.z2;
+ targetEl.zlevel = sourceEl.zlevel;
+ targetEl.invisible = sourceEl.invisible;
+ targetEl.ignore = sourceEl.ignore;
+
+ if (isPath(targetEl) && isPath(sourceEl)) {
+ targetEl.setShape(sourceEl.shape);
+ }
+ }
+}
export default class CustomChartView extends ChartView {
static type = 'custom';
@@ -202,134 +216,39 @@ export default class CustomChartView extends ChartView {
group.removeAll();
}
- // By default, merge mode is applied. In most cases, custom series is
- // used in the scenario that data amount is not large but graphic
elements
- // is complicated, where merge mode is probably necessary for
optimization.
- // For example, reuse graphic elements and only update the transform
when
- // roam or data zoom according to `actionType`.
-
- const transOpt = customSeries.uniTransitionMap;
-
- function updateMorphingPathProps(
- dataIndex: number,
- from: graphicUtil.Path, to: graphicUtil.Path,
- rawFrom: graphicUtil.Path, rawTo: graphicUtil.Path
- ) {
- // element has been updated if rawTo is same with to.
- const elOption = customInnerStore(rawTo).option;
- if (elOption) {
- const transFromProps = {} as ElementProps;
- const propsToSet = {} as ElementProps;
- const styleOpt = elOption.style;
- prepareShapeOrExtraTransitionFrom('extra', from, elOption,
transFromProps, false);
- prepareShapeOrExtraAllPropsFinal('extra', elOption,
propsToSet);
- prepareStyleTransitionFrom(from, elOption, styleOpt,
transFromProps, false);
- (propsToSet as DisplayableProps).style = styleOpt;
-
- applyPropsDirectly(to, propsToSet);
- applyPropsTransition(to, dataIndex, customSeries,
transFromProps, false);
- applyMiscProps(to, elOption, false);
- }
- }
-
- // Enable user to disable transition animation by both set
- // `from` and `to` dimension as `null`/`undefined`.
- if (transOpt && (transOpt.from == null || transOpt.to == null)) {
+ if (customSeries.get(['universalTransition', 'enabled'])) {
+ // Always create new if universalTransition is enabled.
+ // So the old will not be replaced and can be transition later.
+ // TODO check if UniversalTransition feature is installed.
oldData && oldData.each(function (oldIdx) {
doRemoveEl(oldData.getItemGraphicEl(oldIdx), customSeries,
group);
});
data.each(function (newIdx) {
createOrUpdateItem(
- api, null, false, newIdx, renderItem(newIdx, payload),
customSeries, group, data
+ api, null, newIdx, renderItem(newIdx, payload),
customSeries, group, data
);
});
}
else {
-
- const diffMode: DataDiffMode = transOpt ? 'multiple' : 'oneToOne';
-
- (new DataDiffer(
- oldData ? oldData.getIndices() : [],
- data.getIndices(),
- createGetKey(oldData, diffMode, transOpt && transOpt.from),
- createGetKey(data, diffMode, transOpt && transOpt.to),
- null,
- diffMode
- ))
- .add(function (newIdx) {
- createOrUpdateItem(
- api, null, false, newIdx, renderItem(newIdx, payload),
customSeries, group,
- data
- );
- })
- .remove(function (oldIdx) {
- doRemoveEl(oldData.getItemGraphicEl(oldIdx), customSeries,
group);
- })
- .update(function (newIdx, oldIdx) {
- const oldEl = oldData.getItemGraphicEl(oldIdx);
-
- const oldPathList = getPathList(oldEl);
-
- const newEl = createOrUpdateItem(
- api, oldEl, oldPathList.length > 0, newIdx,
renderItem(newIdx, payload), customSeries, group,
- data
- );
-
- const newPathList = filter(getPathList(newEl), el =>
customInnerStore(el).morph);
- applyMorphAnimation(
- oldPathList, newPathList, customSeries, newIdx,
curry(updateMorphingPathProps, newIdx)
- );
- })
- .updateManyToOne(function (newIdx, oldIndices) {
- const oldElList = [];
- for (let i = 0; i < oldIndices.length; i++) {
- const oldEl = oldData.getItemGraphicEl(oldIndices[i]);
- group.remove(oldEl);
- oldElList.push(oldEl);
- }
-
- const oldPathList = getPathList(oldElList);
-
- const updateMorphingPathPropsWithIdx =
curry(updateMorphingPathProps, newIdx);
-
- const newEl = createOrUpdateItem(
- api, null, oldElList.length > 0, newIdx,
renderItem(newIdx, payload), customSeries, group,
- data
- );
-
- const newPathList = filter(getPathList(newEl), el =>
customInnerStore(el).morph);
- applyMorphAnimation(
- oldPathList, newPathList, customSeries, newIdx,
updateMorphingPathPropsWithIdx
- );
- })
- .updateOneToMany(function (newIndices, oldIdx) {
- const newLen = newIndices.length;
- const oldEl = oldData.getItemGraphicEl(oldIdx);
- group.remove(oldEl);
-
- const oldPathList = getPathList(oldEl);
-
- const newElList = [];
- for (let i = 0; i < newLen; i++) {
- newElList.push(createOrUpdateItem(
- api, null, oldPathList.length > 0,
- newIndices[i], renderItem(newIndices[i], payload),
customSeries, group,
+ data.diff(oldData)
+ .add(function (newIdx) {
+ createOrUpdateItem(
+ api, null, newIdx, renderItem(newIdx, payload),
customSeries, group,
data
- ));
- }
-
- const newPathList = map(
- getPathList(newElList),
- els => filter(els, el => customInnerStore(el).morph)
- );
-
- // TODO Different animation config in different indices?
- const updateMorphingPathPropsWithIdx =
curry(updateMorphingPathProps, newIndices[0]);
- applyMorphAnimation(
- oldPathList, newPathList, customSeries, newIndices[0],
updateMorphingPathPropsWithIdx
- );
- })
- .execute();
+ );
+ })
+ .remove(function (oldIdx) {
+ doRemoveEl(oldData.getItemGraphicEl(oldIdx), customSeries,
group);
+ })
+ .update(function (newIdx, oldIdx) {
+ const oldEl = oldData.getItemGraphicEl(oldIdx);
+
+ createOrUpdateItem(
+ api, oldEl, newIdx, renderItem(newIdx, payload),
customSeries, group,
+ data
+ );
+ })
+ .execute();
}
// Do clipping
@@ -372,7 +291,7 @@ export default class CustomChartView extends ChartView {
}
for (let idx = params.start; idx < params.end; idx++) {
const el = createOrUpdateItem(
- null, null, false, idx, renderItem(idx, payload),
customSeries, this.group, data
+ null, null, idx, renderItem(idx, payload), customSeries,
this.group, data
);
el && el.traverse(setIncrementalAndHoverLayer);
}
@@ -399,44 +318,6 @@ export default class CustomChartView extends ChartView {
}
-function createGetKey(
- data: List,
- diffMode: DataDiffMode,
- dimension: DimensionLoose
-) {
- if (!data) {
- return;
- }
-
- if (diffMode === 'oneToOne') {
- return function (rawIdx: number, dataIndex: number) {
- return data.getId(dataIndex);
- };
- }
-
- const diffByDimName = data.getDimension(dimension);
- const dimInfo = data.getDimensionInfo(diffByDimName);
-
- if (!dimInfo) {
- let errMsg = '';
- if (__DEV__) {
- errMsg = `${dimension} is not a valid dimension.`;
- }
- throwError(errMsg);
- }
- const ordinalMeta = dimInfo.ordinalMeta;
- return function (rawIdx: number, dataIndex: number) {
- let key = data.get(diffByDimName, dataIndex);
- if (ordinalMeta) {
- key = ordinalMeta.categories[key as number];
- }
- return (key == null || eqNaN(key))
- ? rawIdx + ''
- : '_ec_' + key;
- };
-}
-
-
function createEl(elOption: CustomElementOption): Element {
const graphicType = elOption.type;
let el;
@@ -597,40 +478,20 @@ function updateElNormal(
const store = customInnerStore(el);
store.userDuring = elOption.during;
- // TODO el may can't be morphed
- const willMorph = customInnerStore(el).morph;
const transFromProps = {} as ElementProps;
const propsToSet = {} as ElementProps;
- if (!willMorph) {
- prepareShapeOrExtraTransitionFrom('shape', el, elOption,
transFromProps, isInit);
- prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
- prepareTransformTransitionFrom(el, elOption, transFromProps, isInit);
- prepareTransformAllPropsFinal(el, elOption, propsToSet);
- prepareShapeOrExtraTransitionFrom('extra', el, elOption,
transFromProps, isInit);
- prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
- prepareStyleTransitionFrom(el, elOption, styleOpt, transFromProps,
isInit);
- (propsToSet as DisplayableProps).style = styleOpt;
- applyPropsDirectly(el, propsToSet);
- applyPropsTransition(el, dataIndex, seriesModel, transFromProps,
isInit);
- applyMiscProps(el, elOption, isTextContent);
- }
- else {
- // Needs shape and transform info in morphing.
- // Will set all properties in prepare
- prepareTransformAllPropsFinal(el, elOption, propsToSet);
- prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
-
- // Other properties also needs to be set.
- prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
- prepareStyleTransitionFrom(el, elOption, styleOpt, transFromProps,
isInit);
- (propsToSet as DisplayableProps).style = styleOpt;
-
- applyPropsDirectly(el, propsToSet);
- applyMiscProps(el, elOption, isTextContent);
-
- store.option = elOption;
- }
+ prepareShapeOrExtraTransitionFrom('shape', el, elOption, transFromProps,
isInit);
+ prepareShapeOrExtraAllPropsFinal('shape', elOption, propsToSet);
+ prepareTransformTransitionFrom(el, elOption, transFromProps, isInit);
+ prepareTransformAllPropsFinal(el, elOption, propsToSet);
+ prepareShapeOrExtraTransitionFrom('extra', el, elOption, transFromProps,
isInit);
+ prepareShapeOrExtraAllPropsFinal('extra', elOption, propsToSet);
+ prepareStyleTransitionFrom(el, elOption, styleOpt, transFromProps, isInit);
+ (propsToSet as DisplayableProps).style = styleOpt;
+ applyPropsDirectly(el, propsToSet);
+ applyPropsTransition(el, dataIndex, seriesModel, transFromProps, isInit);
+ applyMiscProps(el, elOption, isTextContent);
styleOpt ? el.dirty() : el.markRedraw();
}
@@ -1286,7 +1147,6 @@ function wrapEncodeDef(data: List<CustomSeriesModel>):
WrapEncodeDefRet {
function createOrUpdateItem(
api: ExtensionAPI,
existsEl: Element,
- hasMorphFrom: boolean,
dataIndex: number,
elOption: CustomElementOption,
seriesModel: CustomSeriesModel,
@@ -1305,7 +1165,7 @@ function createOrUpdateItem(
group.remove(existsEl);
return;
}
- const el = doCreateOrUpdateEl(api, existsEl, hasMorphFrom, dataIndex,
elOption, seriesModel, group, true);
+ const el = doCreateOrUpdateEl(api, existsEl, dataIndex, elOption,
seriesModel, group, true);
el && data.setItemGraphicEl(dataIndex, el);
el && enableHoverEmphasis(el, elOption.focus, elOption.blurScope);
@@ -1316,7 +1176,6 @@ function createOrUpdateItem(
function doCreateOrUpdateEl(
api: ExtensionAPI,
existsEl: Element,
- hasMorphFrom: boolean,
dataIndex: number,
elOption: CustomElementOption,
seriesModel: CustomSeriesModel,
@@ -1346,7 +1205,7 @@ function doCreateOrUpdateEl(
existsEl = null;
}
- const elIsNewCreated = !existsEl;
+ const isInit = !existsEl;
let el = existsEl;
if (!el) {
@@ -1361,16 +1220,14 @@ function doCreateOrUpdateEl(
// do not clearState but update cached normal state directly.
el.clearStates();
}
- const morph = customInnerStore(el).morph =
- hasMorphFrom && isPath(el)
- && (elOption as CustomZRPathOption).morph
- // Don't need morph if element type are same.
- // shaping transition is enough
- && elIsNewCreated;
- // Use update animation when morph is enabled.
- // TODO: can't morph if from element is not valid.
- const isInit = elIsNewCreated && !morph;
+ // Need to set morph: false explictly to disable automatically morphing.
+ if ((elOption as CustomZRPathOption).morph === false) {
+ (el as ECElement).disableMorphing = true;
+ }
+ else if ((el as ECElement).disableMorphing) {
+ (el as ECElement).disableMorphing = false;
+ }
attachedTxInfoTmp.normal.cfg = attachedTxInfoTmp.normal.conOpt =
attachedTxInfoTmp.emphasis.cfg = attachedTxInfoTmp.emphasis.conOpt =
@@ -1411,7 +1268,7 @@ function doCreateOrUpdateEl(
if (elOption.type === 'group') {
mergeChildren(
- api, el as graphicUtil.Group, hasMorphFrom, dataIndex, elOption as
CustomGroupOption, seriesModel
+ api, el as graphicUtil.Group, dataIndex, elOption as
CustomGroupOption, seriesModel
);
}
@@ -1646,7 +1503,6 @@ function retrieveStyleOptionOnState(
function mergeChildren(
api: ExtensionAPI,
el: graphicUtil.Group,
- hasMorphFrom: boolean,
dataIndex: number,
elOption: CustomGroupOption,
seriesModel: CustomSeriesModel
@@ -1671,7 +1527,6 @@ function mergeChildren(
newChildren: newChildren || [],
dataIndex: dataIndex,
seriesModel: seriesModel,
- hasMorphFrom,
group: el
});
return;
@@ -1686,7 +1541,6 @@ function mergeChildren(
newChildren[index] && doCreateOrUpdateEl(
api,
el.childAt(index),
- hasMorphFrom,
dataIndex,
newChildren[index],
seriesModel,
@@ -1708,7 +1562,6 @@ type DiffGroupContext = {
newChildren: CustomElementOption[];
dataIndex: number;
seriesModel: CustomSeriesModel;
- hasMorphFrom: boolean
group: graphicUtil.Group;
};
function diffGroupChildren(context: DiffGroupContext) {
@@ -1742,7 +1595,6 @@ function processAddUpdate(
doCreateOrUpdateEl(
context.api,
child,
- context.hasMorphFrom,
context.dataIndex,
childOption,
context.seriesModel,
diff --git a/src/chart/lines/LinesView.ts b/src/chart/lines/LinesView.ts
index 2afd397..ad1089e 100644
--- a/src/chart/lines/LinesView.ts
+++ b/src/chart/lines/LinesView.ts
@@ -186,7 +186,6 @@ class LinesView extends ChartView {
this._hasEffet = hasEffect;
this._isPolyline = isPolyline;
this._isLargeDraw = isLargeDraw;
- this.group.removeAll();
}
this.group.add(lineDraw.group);
@@ -212,7 +211,6 @@ class LinesView extends ChartView {
this._lineDraw = null;
// Clear motion when lineDraw is removed
this._clearLayer(api);
- this.group.removeAll();
}
dispose(ecModel: GlobalModel, api: ExtensionAPI) {
diff --git a/test/custom-hexbin.html b/test/custom-hexbin.html
index 1ed29dc..91a3ee7 100644
--- a/test/custom-hexbin.html
+++ b/test/custom-hexbin.html
@@ -177,7 +177,6 @@ under the License.
type: 'group',
children: [{
type,
- morph: true,
shape: type === 'polygon' ? {
points: points
} : {
@@ -193,7 +192,6 @@ under the License.
}
}, {
type,
- morph: true,
shape: type === 'polygon' ? {
points: pointsBG
} : {
@@ -321,6 +319,9 @@ under the License.
myChart.setOption({
series: [{
type: 'custom',
+ universalTransition: {
+ enabled: true
+ },
renderItem: createItemRenderer('polygon')
}]
});
@@ -331,6 +332,9 @@ under the License.
myChart.setOption({
series: [{
type: 'custom',
+ universalTransition: {
+ enabled: true
+ },
renderItem: createItemRenderer('circle')
}]
});
diff --git a/test/custom-shape-morphing.html b/test/custom-shape-morphing.html
index 9687439..38df70e 100644
--- a/test/custom-shape-morphing.html
+++ b/test/custom-shape-morphing.html
@@ -148,6 +148,9 @@ under the License.
type: 'custom',
data,
animationDurationUpdate: 2000,
+ universalTransition: {
+ enabled: true
+ },
renderItem(params, api) {
const dataItem = data[params.dataIndex];
const geometries =
regionsMap[dataItem.name].geometries.slice();
@@ -164,7 +167,6 @@ under the License.
}
return {
type: 'polygon',
- morph: true,
shape: {
points: newPoints
},
@@ -186,7 +188,6 @@ under the License.
const width = 20;
return {
type: 'rect',
- morph: true,
shape: {
x: start[0] - width / 2,
y: start[1],
@@ -207,7 +208,6 @@ under the License.
const center = api.coord([params.dataIndex, api.value(1)]);
return {
type: 'circle',
- morph: true,
shape: {
cx: center[0],
cy: center[1],
@@ -232,6 +232,9 @@ under the License.
type: 'custom',
data,
animationDurationUpdate: 2000,
+ universalTransition: {
+ enabled: true
+ },
renderItem
}]
};
@@ -256,12 +259,14 @@ under the License.
coordinateSystem: 'none',
data: pieData,
animationDurationUpdate: 2000,
+ universalTransition: {
+ enabled: true
+ },
renderItem(params, api) {
const width = myChart.getWidth();
const height = myChart.getHeight();
return {
type: 'sector',
- morph: true,
shape: {
cx: width / 2,
cy: height / 2,
diff --git a/test/custom-shape-morphing2.html b/test/custom-shape-morphing2.html
index 6089fee..39976d1 100644
--- a/test/custom-shape-morphing2.html
+++ b/test/custom-shape-morphing2.html
@@ -249,6 +249,9 @@ under the License.
coordinateSystem: 'cartesian2d',
animationDurationUpdate:
ANIMATION_DURATION_UPDATE,
datasetId: datasetId,
+ universalTransition: {
+ enabled: true
+ },
encode: {
itemName: 'ID',
x: 'STE',
@@ -276,7 +279,6 @@ under the License.
var symbolPath = getFromPalette(zTagVal,
SYMBOL_PATHS);
return {
type: 'circle',
- morph: true,
shape: {
cx: pos[0],
cy: pos[1],
@@ -301,7 +303,6 @@ under the License.
var symbolPath = getFromPalette(zTagVal,
SYMBOL_PATHS);
return {
type: 'path',
- morph: true,
x: pos[0],
y: pos[1],
shape: {
@@ -332,7 +333,6 @@ under the License.
y: pos[1],
children: [{
type: 'polygon',
- morph: true,
shape: {
points: [
[-40, -2],
@@ -348,7 +348,6 @@ under the License.
transition: ['shape', 'style']
}, {
type: 'rect',
- morph: true,
shape: {
x: -20,
y: 0,
@@ -392,9 +391,13 @@ under the License.
coordinateSystem: 'cartesian2d',
animationDurationUpdate:
ANIMATION_DURATION_UPDATE,
datasetId: datasetId,
+ universalTransition: {
+ enabled: true
+ },
encode: {
x: 'M_TAG',
y: 'ATA',
+ dataGroupId: 'M_TAG',
tooltip: ['M_TAG', 'ATA']
},
renderItem: function (params, api) {
@@ -406,7 +409,6 @@ under the License.
var width = size[0] * 0.4;
return {
type: 'rect',
- morph: true,
shape: {
x: tarPos[0] - width / 2,
y: tarPos[1],
@@ -442,6 +444,9 @@ under the License.
value: 'ATA',
tooltip: 'ATA'
},
+ universalTransition: {
+ enabled: true
+ },
renderItem: function (params, api) {
var context = params.context;
if (!context.layout) {
@@ -467,7 +472,6 @@ under the License.
var height = chart.getHeight();
return {
type: 'sector',
- morph: true,
shape: {
cx: width / 2,
cy: height / 2,
@@ -519,9 +523,13 @@ under the License.
coordinateSystem: 'cartesian2d',
animationDurationUpdate:
ANIMATION_DURATION_UPDATE,
datasetId: datasetId,
+ universalTransition: {
+ enabled: true
+ },
encode: {
x: 'CLUSTER_CENTER_STE',
y: 'CLUSTER_CENTER_ATA',
+ itemGroupId: 'CLUSTER_IDX',
tooltip: ['CLUSTER_CENTER_STE',
'CLUSTER_CENTER_ATA']
},
renderItem: function (params, api) {
@@ -542,7 +550,6 @@ under the License.
var radius = count /
context.totalCount * 100 + 10;
return {
type: 'circle',
- morph: true,
shape: {
cx: pos[0],
cy: pos[1],
@@ -565,53 +572,20 @@ under the License.
- var optionList = [];
+ var options = {};
var buttons = [];
+
echarts.util.each(optionCreators, function (creator, key) {
var optionWrap = creator();
- optionList.push({
- key: key,
- dataMetaKey: optionWrap.datasetId,
- option: optionWrap.option
- });
+ options[key] = Object.assign({}, baseOption,
optionWrap.option);
buttons.push({
text: key,
onclick: function () {
- player.go(key);
+ chart.setOption(options[key], true);
}
});
});
-
- var player = ecSimpleOptionPlayer.create({
- chart: function () {
- return chart;
- },
- seriesIndex: 0,
- replaceMerge: ['xAxis', 'yAxis'],
- dataMeta: {
- raw: {
- dimensions: RAW_DATA_DIMENSIONS,
- uniqueDimension: 'ID'
- },
- mTagSum: {
- dimensions: M_TAG_SUM_DIMENSIONS,
- uniqueDimension: 'M_TAG'
- },
- rawClusters: {
- dimensions: RAW_CLUSTER_DIMENSIONS,
- uniqueDimension: 'ID',
- dividingMethod: 'duplicate'
- },
- rawClusterCenters: {
- dimensions: RAW_CLUSTER_CENTERS_DIMENSIONS,
- uniqueDimension: 'CLUSTER_IDX'
- }
- },
- optionList: optionList
- });
-
-
var chart = testHelper.create(echarts, 'main0', {
title: [
'Test: buttons, should morph animation
combine/separate.',
@@ -619,7 +593,7 @@ under the License.
'Test: click buttons **twice**, should no blink.',
'Test: use dataZoom, the "update animation" should
exist'
],
- option: baseOption,
+ option: options['Scatter_singleSVG_ATA_STE'],
lazyUpdate: true,
height: 600,
buttons: buttons.concat([{
@@ -641,8 +615,6 @@ under the License.
}])
});
- player.go('Scatter_singleSVG_ATA_STE');
-
});
</script>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
