[5.0][FEATURE] Label enhancement and state transition

src/ExtensionAPI.ts

@@ -23,32 +23,33 @@ import {CoordinateSystemMaster} from './coord/CoordinateSystem';
 import Element from 'zrender/src/Element';
 import ComponentModel from './model/Component';
 
-const availableMethods = {
-    getDom: 1,
-    getZr: 1,
-    getWidth: 1,
-    getHeight: 1,
-    getDevicePixelRatio: 1,
-    dispatchAction: 1,
-    isDisposed: 1,
-    on: 1,
-    off: 1,
-    getDataURL: 1,
-    getConnectedDataURL: 1,
-    getModel: 1,
-    getOption: 1,
-    getViewOfComponentModel: 1,
-    getViewOfSeriesModel: 1,
-    getId: 1
-};
-
-interface ExtensionAPI extends Pick<EChartsType, keyof typeof availableMethods> {}
+const availableMethods: (keyof EChartsType)[] = [
+    'getDom',
+    'getZr',
+    'getWidth',
+    'getHeight',
+    'getDevicePixelRatio',
+    'dispatchAction',
+    'isDisposed',
+    'on',
+    'off',
+    'getDataURL',
+    'getConnectedDataURL',
+    'getModel',
+    'getOption',
+    'getViewOfComponentModel',
+    'getViewOfSeriesModel',
+    'getId',
+    'updateLabelLayout'
+];
+
+interface ExtensionAPI extends Pick<EChartsType, (typeof availableMethods)[number]> {}
 
 abstract class ExtensionAPI {
 
     constructor(ecInstance: EChartsType) {
-        zrUtil.each(availableMethods, function (v, name: string) {
-            (this as any)[name] = zrUtil.bind((ecInstance as any)[name], ecInstance);
+        zrUtil.each(availableMethods, function (methodName: string) {
+            (this as any)[methodName] = zrUtil.bind((ecInstance as any)[methodName], ecInstance);
         }, this);
     }
 

src/chart/bar/BarView.ts

@@ -27,12 +27,11 @@ import {
     initProps,
     enableHoverEmphasis,
     setLabelStyle,
-    clearStates,
     updateLabel,
-    initLabel
+    initLabel,
+    removeElement
 } from '../../util/graphic';
 import Path, { PathProps } from 'zrender/src/graphic/Path';
-import * as numberUtil from '../../util/number';
 import Group from 'zrender/src/graphic/Group';
 import {throttle} from '../../util/throttle';
 import {createClipPath} from '../helper/createClipPathFromCoordSys';
@@ -41,7 +40,15 @@ import ChartView from '../../view/Chart';
 import List, {DefaultDataVisual} from '../../data/List';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
-import { StageHandlerProgressParams, ZRElementEvent, ColorString, OrdinalSortInfo, Payload, OrdinalNumber, OrdinalRawValue, DisplayState, ParsedValue } from '../../util/types';
+import {
+    StageHandlerProgressParams,
+    ZRElementEvent,
+    ColorString,
+    OrdinalSortInfo,
+    Payload,
+    OrdinalNumber,
+    ParsedValue
+} from '../../util/types';
 import BarSeriesModel, { BarSeriesOption, BarDataItemOption } from './BarSeries';
 import type Axis2D from '../../coord/cartesian/Axis2D';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
@@ -272,7 +279,15 @@ class BarView extends ChartView {
                 }
 
                 const el = elementCreator[coord.type](
-                    seriesModel, data, dataIndex, layout, isHorizontalOrRadial, animationModel, false, getDuring(), roundCap
+                    seriesModel,
+                    data,
+                    dataIndex,
+                    layout,
+                    isHorizontalOrRadial,
+                    animationModel,
+                    false,
+                    getDuring(),
+                    roundCap
                 );
                 data.setItemGraphicEl(dataIndex, el);
                 group.add(el);
@@ -317,13 +332,12 @@ class BarView extends ChartView {
                 }
 
                 if (el) {
-                    clearStates(el);
-
                     if (coord.type === 'cartesian2d'
                         && baseAxis.type === 'category' && (baseAxis as Axis2D).model.get('sort')
                     ) {
                         const rect = layout as RectShape;
-                        let seriesShape, axisShape;
+                        let seriesShape;
+                        let axisShape;
                         if (baseAxis.dim === 'x') {
                             axisShape = {
                                 x: rect.x,
@@ -346,7 +360,14 @@ class BarView extends ChartView {
                         }
 
                         if (!isReorder) {
-                            updateProps(el as Path, { shape: seriesShape }, animationModel, newIndex, null, getDuring());
+                            updateProps(
+                                el as Path,
+                                { shape: seriesShape },
+                                animationModel,
+                                newIndex,
+                                null,
+                                getDuring()
+                            );
                         }
                         updateProps(el as Path, { shape: axisShape }, axisAnimationModel, newIndex, null);
                     }
@@ -363,7 +384,15 @@ class BarView extends ChartView {
                 }
                 else {
                     el = elementCreator[coord.type](
-                        seriesModel, data, newIndex, layout, isHorizontalOrRadial, animationModel, true, getDuring(), roundCap
+                        seriesModel,
+                        data,
+                        newIndex,
+                        layout,
+                        isHorizontalOrRadial,
+                        animationModel,
+                        true,
+                        getDuring(),
+                        roundCap
                     );
                 }
 
@@ -624,7 +653,9 @@ const elementCreator: {
             };
 
             const labelModel = seriesModel.getModel('label');
-            (isUpdate ? updateLabel : initLabel)(rect, data, newIndex, labelModel, seriesModel, animationModel, defaultTextGetter);
+            (isUpdate ? updateLabel : initLabel)(
+                rect, data, newIndex, labelModel, seriesModel, animationModel, defaultTextGetter
+            );
         }
 
         return rect;
@@ -657,7 +688,7 @@ const elementCreator: {
             sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
             animateTarget[animateProperty] = layout[animateProperty];
             (isUpdate ? updateProps : initProps)(sector, {
-                shape: animateTarget,
+                shape: animateTarget
                 // __value: typeof dataValue === 'string' ? parseInt(dataValue, 10) : dataValue
             }, animationModel);
         }
@@ -673,9 +704,9 @@ function removeRect(
 ) {
     // Not show text when animating
     el.removeTextContent();
-    updateProps(el, {
-        shape: {
-            width: 0
+    removeElement(el, {
+        style: {
+            opacity: 0
         }
     }, animationModel, dataIndex, function () {
         el.parent && el.parent.remove(el);
@@ -689,9 +720,9 @@ function removeSector(
 ) {
     // Not show text when animating
     el.removeTextContent();
-    updateProps(el, {
-        shape: {
-            r: el.shape.r0
+    removeElement(el, {
+        style: {
+            opacity: 0
         }
     }, animationModel, dataIndex, function () {
         el.parent && el.parent.remove(el);
@@ -776,7 +807,7 @@ function updateStyle(
                 labelFetcher: seriesModel,
                 labelDataIndex: dataIndex,
                 defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
-                autoColor: style.fill as ColorString,
+                inheritColor: style.fill as ColorString,
                 defaultOutsidePosition: labelPositionOutside
             }
         );

src/chart/bar/PictorialBarView.ts

@@ -190,7 +190,6 @@ class PictorialBarView extends ChartView {
                 }
 
                 if (bar) {
-                    bar.clearStates();
                     updateBar(bar, opt, symbolMeta);
                 }
                 else {
@@ -870,7 +869,7 @@ function removeBar(
     bar.__pictorialClipPath && (animationModel = null);
 
     zrUtil.each(pathes, function (path) {
-        graphic.updateProps(
+        graphic.removeElement(
             path, { scaleX: 0, scaleY: 0 }, animationModel, dataIndex,
             function () {
                 bar.parent && bar.parent.remove(bar);
@@ -953,7 +952,7 @@ function updateCommon(
             labelFetcher: opt.seriesModel,
             labelDataIndex: dataIndex,
             defaultText: getDefaultLabel(opt.seriesModel.getData(), dataIndex),
-            autoColor: symbolMeta.style.fill as ColorString,
+            inheritColor: symbolMeta.style.fill as ColorString,
             defaultOutsidePosition: barPositionOutside
         }
     );

src/chart/candlestick/CandlestickView.ts

@@ -132,7 +132,6 @@ class CandlestickView extends ChartView {
                     el = createNormalBox(itemLayout, newIdx);
                 }
                 else {
-                    graphic.clearStates(el);
                     graphic.updateProps(el, {
                         shape: {
                             points: itemLayout.ends

src/chart/custom.ts

@@ -17,7 +17,7 @@
 * under the License.
 */
 
-
+// @ts-nocheck
 import {__DEV__} from '../config';
 import {
     hasOwn, assert, isString, retrieve2, retrieve3, defaults, each, keys, isArrayLike, bind
@@ -1377,7 +1377,7 @@ function makeRenderItem(
         visualColor != null && (itemStyle.fill = visualColor);
         opacity != null && (itemStyle.opacity = opacity);
 
-        const opt = {autoColor: isString(visualColor) ? visualColor : '#000'};
+        const opt = {inheritColor: isString(visualColor) ? visualColor : '#000'};
         const labelModel = getLabelModel(dataIndexInside, NORMAL);
         // Now that the feture of "auto adjust text fill/stroke" has been migrated to zrender
         // since ec5, we should set `isAttached` as `false` here and make compat in

src/chart/funnel/FunnelSeries.ts

@@ -28,7 +28,7 @@ import {
     BoxLayoutOptionMixin,
     HorizontalAlign,
     LabelOption,
-    LabelGuideLineOption,
+    LabelLineOption,
     ItemStyleOption,
     OptionDataValueNumeric
 } from '../../util/types';
@@ -51,12 +51,12 @@ export interface FunnelDataItemOption {
         height?: number | string
     }
     label?: FunnelLabelOption
-    labelLine?: LabelGuideLineOption
+    labelLine?: LabelLineOption
 
     emphasis?: {
         itemStyle?: ItemStyleOption
         label?: FunnelLabelOption
-        labelLine?: LabelGuideLineOption
+        labelLine?: LabelLineOption
     }
 }
 
@@ -80,12 +80,12 @@ export interface FunnelSeriesOption
     funnelAlign?: HorizontalAlign
 
     label?: FunnelLabelOption
-    labelLine?: LabelGuideLineOption
+    labelLine?: LabelLineOption
     itemStyle?: ItemStyleOption
 
     emphasis?: {
         label?: FunnelLabelOption
-        labelLine?: LabelGuideLineOption
+        labelLine?: LabelLineOption
         itemStyle?: ItemStyleOption
     }
 
@@ -172,8 +172,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
             length: 20,
             lineStyle: {
                 // color: 各异,
-                width: 1,
-                type: 'solid'
+                width: 1
             }
         },
         itemStyle: {