You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/09/08 09:54:27 UTC
[incubator-echarts] 04/06: WIP(line): line label animation
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 84ce59fc72c61d0a39e599d00ba4843c22f161f2
Author: Ovilia <zw...@gmail.com>
AuthorDate: Fri Sep 4 11:01:19 2020 +0800
WIP(line): line label animation
---
src/chart/helper/createClipPathFromCoordSys.ts | 20 ++++--
src/chart/line/LineSeries.ts | 5 +-
src/chart/line/LineView.ts | 92 ++++++++++++++++++++++++--
src/label/labelStyle.ts | 1 +
4 files changed, 108 insertions(+), 10 deletions(-)
diff --git a/src/chart/helper/createClipPathFromCoordSys.ts b/src/chart/helper/createClipPathFromCoordSys.ts
index d0d21a7..1eb778b 100644
--- a/src/chart/helper/createClipPathFromCoordSys.ts
+++ b/src/chart/helper/createClipPathFromCoordSys.ts
@@ -31,7 +31,9 @@ type SeriesModelWithLineWidth = SeriesModel<SeriesOption & {
function createGridClipPath(
cartesian: Cartesian2D,
hasAnimation: boolean,
- seriesModel: SeriesModelWithLineWidth
+ seriesModel: SeriesModelWithLineWidth,
+ done?: () => void,
+ during?: (percent: number, clipRect: graphic.Rect) => void
) {
const rect = cartesian.getArea();
@@ -69,13 +71,20 @@ function createGridClipPath(
clipPath.shape.y = y + height;
clipPath.shape.height = 0;
}
+
+ const duringCb = typeof during === 'function'
+ ? (percent: number) => {
+ during(percent, clipPath);
+ }
+ : null;
+
graphic.initProps(clipPath, {
shape: {
width: width,
height: height,
y: y
}
- }, seriesModel);
+ }, seriesModel, null, done, duringCb);
}
return clipPath;
@@ -112,6 +121,7 @@ function createPolarClipPath(
else {
clipPath.shape.r = r0;
}
+
graphic.initProps(clipPath, {
shape: {
endAngle: sectorArea.endAngle,
@@ -125,7 +135,9 @@ function createPolarClipPath(
function createClipPath(
coordSys: CoordinateSystem,
hasAnimation: boolean,
- seriesModel: SeriesModelWithLineWidth
+ seriesModel: SeriesModelWithLineWidth,
+ done?: () => void,
+ during?: (percent: number) => void
) {
if (!coordSys) {
return null;
@@ -134,7 +146,7 @@ function createClipPath(
return createPolarClipPath(coordSys as Polar, hasAnimation, seriesModel);
}
else if (coordSys.type === 'cartesian2d') {
- return createGridClipPath(coordSys as Cartesian2D, hasAnimation, seriesModel);
+ return createGridClipPath(coordSys as Cartesian2D, hasAnimation, seriesModel, done, during);
}
return null;
}
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 9715908..432bf92 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -82,7 +82,7 @@ export interface LineSeriesOption extends SeriesOption<LineStateOption, ExtraSta
// If clip the overflow value
clip?: boolean
- label?: LabelOption
+ label?: LabelOption & {showDuringLabel: boolean}
lineStyle?: LineStyleOption
@@ -138,7 +138,8 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
clip: true,
label: {
- position: 'top'
+ position: 'top',
+ showDuringLabel: false
},
lineStyle: {
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 5d12887..556e602 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -37,14 +37,19 @@ import type ExtensionAPI from '../../ExtensionAPI';
import Cartesian2D from '../../coord/cartesian/Cartesian2D';
import Polar from '../../coord/polar/Polar';
import type List from '../../data/List';
-import type { Payload, Dictionary, ColorString, ECElement, DisplayState } from '../../util/types';
+import type { Payload, Dictionary, ColorString, ECElement, DisplayState, ComponentOption } from '../../util/types';
import type OrdinalScale from '../../scale/Ordinal';
import type Axis2D from '../../coord/cartesian/Axis2D';
import { CoordinateSystemClipArea } from '../../coord/CoordinateSystem';
import { setStatesStylesFromModel, setStatesFlag, enableHoverEmphasis } from '../../util/states';
import { getECData } from '../../util/ecData';
import Displayable from 'zrender/src/graphic/Displayable';
+import {makeInner} from '../../util/model';
+import ComponentModel from '../../model/Component';
+const inner = makeInner<{
+ defaultOption: ComponentOption
+}, graphic.Text>();
type PolarArea = ReturnType<Polar['getArea']>;
type Cartesian2DArea = ReturnType<Cartesian2D['getArea']>;
@@ -326,13 +331,29 @@ function canShowAllSymbolForCategory(
}
function createLineClipPath(
+ lineView: LineView,
coordSys: Cartesian2D | Polar,
hasAnimation: boolean,
seriesModel: LineSeriesModel
) {
if (coordSys.type === 'cartesian2d') {
+ const labelModel = seriesModel.getModel('label');
+ let showDuringLabel = labelModel.get('showDuringLabel');
+
+ const done = showDuringLabel
+ ? () => {
+
+ }
+ : null;
+
+ const during = showDuringLabel
+ ? (percent: number, clipRect: graphic.Rect) => {
+ lineView._updateDuringLabel(percent, clipRect, lineView._data);
+ }
+ : null;
+
const isHorizontal = coordSys.getBaseAxis().isHorizontal();
- const clipPath = createGridClipPath(coordSys, hasAnimation, seriesModel);
+ const clipPath = createGridClipPath(coordSys, hasAnimation, seriesModel, done, during);
// Expand clip shape to avoid clipping when line value exceeds axis
if (!seriesModel.get('clip', true)) {
const rectShape = clipPath.shape;
@@ -349,6 +370,8 @@ function createLineClipPath(
return clipPath;
}
else {
+ const labelModel = seriesModel.getModel('label');
+ const showDuringLabel = labelModel.get('showDuringLabel');
return createPolarClipPath(coordSys, hasAnimation, seriesModel);
}
@@ -363,6 +386,8 @@ class LineView extends ChartView {
_lineGroup: graphic.Group;
_coordSys: Cartesian2D | Polar;
+ _duringLabel: graphic.Text;
+
_polyline: ECPolyline;
_polygon: ECPolygon;
@@ -468,6 +493,8 @@ class LineView extends ChartView {
clipShapeForSymbol
);
+ this._initDuringLabel(seriesModel, data, true);
+
if (step) {
// TODO If stacked series is not step
points = turnPointsIntoStep(points, coordSys, step);
@@ -480,7 +507,9 @@ class LineView extends ChartView {
points, stackedOnPoints
);
}
- lineGroup.setClipPath(createLineClipPath(coordSys, true, seriesModel));
+ lineGroup.setClipPath(
+ createLineClipPath(this, coordSys, true, seriesModel)
+ );
}
else {
if (isAreaChart && !polygon) {
@@ -496,7 +525,9 @@ class LineView extends ChartView {
}
// Update clipPath
- lineGroup.setClipPath(createLineClipPath(coordSys, false, seriesModel));
+ lineGroup.setClipPath(
+ createLineClipPath(this, coordSys, false, seriesModel)
+ );
// Always update, or it is wrong in the case turning on legend
// because points are not changed
@@ -878,6 +909,59 @@ class LineView extends ChartView {
});
}
+ _initDuringLabel(
+ seriesModel: LineSeriesModel,
+ data: List,
+ isUpdate: boolean
+ ) {
+ const labelModel = seriesModel.getModel('label');
+ const showDuringLabel = labelModel.get('showDuringLabel');
+
+ if (showDuringLabel) {
+ if (!this._duringLabel) {
+ this._duringLabel = new graphic.Text({
+ style: {
+ text: 'abcd'
+ }
+ });
+ this.group.add(this._duringLabel);
+ }
+
+ // const defaultTextGetter = (values: ParsedValue | ParsedValue[]) => {
+ // return getDefaultLabel(seriesModel.getData(), 0, values);
+ // };
+
+ // (isUpdate ? updateLabel : initLabel)(
+ // this._duringLabel, data, 0, labelModel, seriesModel, seriesModel, defaultTextGetter
+ // );
+ }
+ }
+
+ _updateDuringLabel(
+ percent: number,
+ clipRect: graphic.Rect,
+ data: List
+ ) {
+ console.log(percent, clipRect.shape)
+ if (this._duringLabel) {
+ this._duringLabel.attr({
+ x: clipRect.shape.x + clipRect.shape.width + 10,
+ y: 0
+ });
+
+ const baseAxis = this._coordSys.getBaseAxis();
+
+ let splitFound = false;
+ let left = null;
+ data.each(function (idx) {
+ const right = data.getValues(idx);
+ console.log(right);
+ });
+
+ const host = inner(this._duringLabel);
+ }
+ }
+
/**
* @private
*/
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index 2a12570..e068820 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -62,6 +62,7 @@ interface SetLabelStyleOpt<LDI> extends TextCommonParams {
}
type LabelModel = Model<LabelOption & {
formatter?: string | ((params: any) => string);
+ showDuringLabel?: boolean // Currently only supported by line charts
}>;
type LabelModelForText = Model<Omit<
// Remove
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org