fix(bar-race): label animation

src/action/changeAxisOrder.ts

@@ -41,6 +41,9 @@ echarts.registerAction({
     ecModel.eachComponent(
         { mainType: componentType, query: payload },
         function (componentModel) {
+            if (payload.sortInfo) {
+                componentModel.axis.setCategorySortInfo(payload.sortInfo);
+            }
         }
     );
 });

src/component/axis/AxisBuilder.ts

@@ -32,6 +32,7 @@ import { ZRTextVerticalAlign, ZRTextAlign, ECElement, ColorString } from '../../
 import { AxisBaseOption } from '../../coord/axisCommonTypes';
 import Element from 'zrender/src/Element';
 import { PathStyleProps } from 'zrender/src/graphic/Path';
+import OrdinalScale from '../../scale/Ordinal';
 
 
 const PI = Math.PI;
@@ -762,7 +763,9 @@ function buildAxisLabel(
     const triggerEvent = axisModel.get('triggerEvent');
 
     each(labels, function (labelItem, index) {
-        const tickValue = labelItem.tickValue;
+        const tickValue = axis.scale.type === 'ordinal'
+            ? (axis.scale as OrdinalScale).getRawIndex(labelItem.tickValue)
+            : labelItem.tickValue;
         const formattedLabel = labelItem.formattedLabel;
         const rawLabel = labelItem.rawLabel;
 

src/coord/Axis.ts

@@ -177,10 +177,12 @@ class Axis {
 
         const ticksCoords = map(ticks, function (tickVal) {
             return {
-                coord: this.dataToCoord(tickVal),
-                tickValue: this.scale instanceof OrdinalScale
-                    ? this.scale.getCategoryIndex(tickVal)
-                    : tickVal
+                coord: this.dataToCoord(
+                    this.scale.type === 'ordinal'
+                        ? (this.scale as OrdinalScale).getRawIndex(tickVal)
+                        : tickVal
+                ),
+                tickValue: tickVal
             };
         }, this);
 

src/coord/cartesian/defaultAxisExtentFromData.ts

@@ -136,7 +136,7 @@ function calculateFilteredExtent(
         // For duplication removal.
         const condDimMap: Dictionary<boolean> = {};
         const tarDimMap: Dictionary<boolean> = {};
-        let condAxisExtent: number[];
+        let condAxis: Axis;
         let tarAxisRecord: AxisRecord;
 
         function addCondition(axis: Axis, axisRecord: AxisRecord) {
@@ -150,7 +150,7 @@ function calculateFilteredExtent(
                 each(getDataDimensionsOnAxis(data, axis.dim), function (dataDim) {
                     if (!hasOwn(condDimMap, dataDim)) {
                         condDimMap[dataDim] = true;
-                        condAxisExtent = [rawExtentResult.min, rawExtentResult.max];
+                        condAxis = axis;
                     }
                 });
             }
@@ -196,7 +196,7 @@ function calculateFilteredExtent(
         if (singleCondDim && singleTarDim) {
             for (let dataIdx = 0; dataIdx < dataLen; dataIdx++) {
                 const condVal = data.get(singleCondDim, dataIdx) as number;
-                if (condVal >= condAxisExtent[0] && condVal <= condAxisExtent[1]) {
+                if (condAxis.scale.isInExtentRange(condVal)) {
                     unionExtent(tarDimExtents[0], data.get(singleTarDim, dataIdx) as number);
                 }
             }
@@ -205,7 +205,7 @@ function calculateFilteredExtent(
             for (let dataIdx = 0; dataIdx < dataLen; dataIdx++) {
                 for (let j = 0; j < condDimsLen; j++) {
                     const condVal = data.get(condDims[j], dataIdx) as number;
-                    if (condVal >= condAxisExtent[0] && condVal <= condAxisExtent[1]) {
+                    if (condAxis.scale.isInExtentRange(condVal)) {
                         for (let k = 0; k < tarDimsLen; k++) {
                             unionExtent(tarDimExtents[k], data.get(tarDims[k], dataIdx) as number);
                         }

src/scale/Ordinal.ts

@@ -92,7 +92,7 @@ class OrdinalScale extends Scale {
 
         while (rank <= extent[1]) {
             ticks.push({
-                value: rank
+                value: this.getCategoryIndex(rank)
             });
             rank++;
         }
@@ -113,6 +113,11 @@ class OrdinalScale extends Scale {
         return this._categorySortInfo;
     }
 
+    /**
+     * Get display order after sort
+     *
+     * @param {OrdinalNumber} n index of raw data
+     */
     getCategoryIndex(n: OrdinalNumber): OrdinalNumber {
         if (this._categorySortInfo.length) {
             return this._categorySortInfo[n].beforeSortIndex;
@@ -122,12 +127,27 @@ class OrdinalScale extends Scale {
         }
     }
 
+    /**
+     * Get raw data index
+     *
+     * @param {OrdinalNumber} displayIndex index of display
+     */
+    getRawIndex(displayIndex: OrdinalNumber): OrdinalNumber {
+        if (this._categorySortInfo.length) {
+            return this._categorySortInfo[displayIndex].ordinalNumber;
+        }
+        else {
+            return displayIndex;
+        }
+    }
+
     /**
      * Get item on rank n
      */
     getLabel(tick: ScaleTick): string {
         if (!this.isBlank()) {
-            const cateogry = this._ordinalMeta.categories[tick.value];
+            const rawIndex = this.getRawIndex(tick.value);
+            const cateogry = this._ordinalMeta.categories[rawIndex];
             // Note that if no data, ordinalMeta.categories is an empty array.
             // Return empty if it's not exist.
             return cateogry == null ? '' : cateogry + '';
@@ -142,6 +162,15 @@ class OrdinalScale extends Scale {
         this.unionExtent(data.getApproximateExtent(dim));
     }
 
+    /**
+     * @override
+     * If value is in extent range
+     */
+    isInExtentRange(value: number): boolean {
+        value = this.getCategoryIndex(value);
+        return this._extent[0] <= value && this._extent[1] >= value;
+    }
+
     getOrdinalMeta(): OrdinalMeta {
         return this._ordinalMeta;
     }

src/scale/Scale.ts

@@ -109,6 +109,13 @@ abstract class Scale {
         }
     }
 
+    /**
+     * If value is in extent range
+     */
+    isInExtentRange(value: number): boolean {
+        return this._extent[0] <= value && this._extent[1] >= value;
+    }
+
     /**
      * When axis extent depends on data and no data exists,
      * axis ticks should not be drawn, which is named 'blank'.

src/util/graphic.ts

@@ -70,6 +70,7 @@ import List from '../data/List';
 import { getLabelText } from '../label/labelStyle';
 import { AnimationEasing } from 'zrender/src/animation/easing';
 import { getECData } from './ecData';
+import {makeInner} from './model';
 
 
 const mathMax = Math.max;
@@ -80,6 +81,10 @@ const _customShapeMap: Dictionary<{ new(): Path }> = {};
 type ExtendShapeOpt = Parameters<typeof Path.extend>[0];
 type ExtendShapeReturn = ReturnType<typeof Path.extend>;
 
+const innerLabel = makeInner<{
+    startValue: number | (string | number)[],
+    nextValue: number | (string | number)[]
+}, ZRText>();
 
 /**
  * Extend shape with parameters
@@ -459,7 +464,10 @@ export function initProps<Props>(
     cb?: AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption['during'],
     during?: AnimateOrSetPropsOption['during']
 ) {
-    animateOrSetProps('init', el, props, animatableModel, dataIndex, cb, during);
+    animateOrSetProps('init', el, props, animatableModel, dataIndex, cb, percent => {
+        // console.log(dataIndex, el.shape.width, percent);
+        during && during(percent);
+    });
 }
 
 /**
@@ -544,7 +552,9 @@ function animateOrSetLabel<Props extends PathProps>(
     const valueAnimationEnabled = labelModel && labelModel.get('valueAnimation');
     if (valueAnimationEnabled) {
         const precisionOption = labelModel.get('precision');
-        const precision: number = precisionOption === 'auto' ? 0 : precisionOption;
+        const precision: number = !precisionOption || precisionOption === 'auto'
+            ? 0
+            : precisionOption;
 
         let interpolateValues: (number | string)[] | (number | string);
         const rawValues = seriesModel.getRawValue(dataIndex);
@@ -563,10 +573,23 @@ function animateOrSetLabel<Props extends PathProps>(
             }
         }
 
+        const text = el.getTextContent();
+        const host = text && innerLabel(text);
+        host && (host.startValue = host.nextValue);
+
         const during = (percent: number) => {
+            const text = el.getTextContent();
+            if (!text || !host) {
+                return;
+            }
+
             let interpolated;
             if (isRawValueNumber) {
-                const value = interpolateNumber(0, interpolateValues as number, percent);
+                const value = interpolateNumber(
+                    host.startValue as number || 0,
+                    interpolateValues as number,
+                    percent
+                );
                 interpolated = numberUtil.round(value, precision);
             }
             else {
@@ -578,23 +601,27 @@ function animateOrSetLabel<Props extends PathProps>(
                         interpolated[i] = (rawValues as [])[i];
                     }
                     else {
-                        const value = interpolateNumber(0, (interpolateValues as number[])[i], percent);
+                        const startValues = host.startValue as number[];
+                        const value = interpolateNumber(
+                            startValues && startValues[i] ? startValues[i] : 0,
+                            (interpolateValues as number[])[i],
+                            percent
+                        );
                         interpolated[i] = numberUtil.round(value), precision;
                     }
                 }
             }
-            const text = el.getTextContent();
-            if (text) {
-                const labelText = getLabelText({
-                    labelDataIndex: dataIndex,
-                    labelFetcher: seriesModel,
-                    defaultText: defaultTextGetter
-                        ? defaultTextGetter(interpolated)
-                        : interpolated + ''
-                }, {normal: labelModel}, interpolated);
-                text.style.text = labelText.normal;
-                text.dirty();
-            }
+            host.nextValue = interpolated;
+
+            const labelText = getLabelText({
+                labelDataIndex: dataIndex,
+                labelFetcher: seriesModel,
+                defaultText: defaultTextGetter
+                    ? defaultTextGetter(interpolated)
+                    : interpolated + ''
+            }, {normal: labelModel}, interpolated);
+            text.style.text = labelText.normal;
+            text.dirty();
         };
 
         const props: ElementProps = {};