fix: use highlighted and selected flag to determine if apply state.

src/chart/pie/PieView.ts

@@ -24,7 +24,7 @@ import * as graphic from '../../util/graphic';
 import ChartView from '../../view/Chart';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
-import { Payload, ColorString } from '../../util/types';
+import { Payload, ColorString, ECElement } from '../../util/types';
 import List from '../../data/List';
 import PieSeriesModel, {PieDataItemOption} from './PieSeries';
 
@@ -45,11 +45,6 @@ function updateDataSelected(
         name: name,
         seriesId: seriesModel.id
     });
-
-    data.each(function (idx) {
-        const el = data.getItemGraphicEl(idx);
-        el.toggleState('select', seriesModel.isSelected(data.getName(idx)));
-    });
 }
 
 /**
@@ -166,8 +161,8 @@ class PiePiece extends graphic.Sector {
 
         graphic.enableHoverEmphasis(this);
 
-        // Switch after `select` state updated.
-        sector.toggleState('select', seriesModel.isSelected(data.getName(idx)));
+        // State will be set after all rendered in the pipeline.
+        (sector as ECElement).selected = seriesModel.isSelected(data.getName(idx));
     }
 
     private _updateLabel(data: List, idx: number, withAnimation: boolean): void {
@@ -296,11 +291,17 @@ class PieView extends ChartView {
     }
 
     render(seriesModel: PieSeriesModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload): void {
+        const data = seriesModel.getData();
         if (payload && (payload.from === this.uid)) {
+            // update selected status
+            data.each(function (idx) {
+                const el = data.getItemGraphicEl(idx);
+                (el as ECElement).selected = seriesModel.isSelected(data.getName(idx));
+            });
+
             return;
         }
 
-        const data = seriesModel.getData();
         const oldData = this._data;
         const group = this.group;
 

src/echarts.ts

@@ -1779,6 +1779,7 @@ class ECharts extends Eventful {
         interface DisplayableWithStatesHistory extends Displayable {
             __prevStates: string[]
         };
+        // Clear states without animation.
         // TODO States on component.
         function clearStates(seriesModel: SeriesModel, view: ChartView): void {
             view.group.traverse(function (el: Displayable) {
@@ -1787,7 +1788,6 @@ class ECharts extends Eventful {
                     (el as DisplayableWithStatesHistory).__prevStates = el.currentStates;
                     const textContent = el.getTextContent();
                     const textGuide = el.getTextGuideLine();
-                    // Not use animation when clearStates and restore states in `updateStates`
                     if (el.stateTransition) {
                         el.stateTransition = null;
                     }
@@ -1809,6 +1809,7 @@ class ECharts extends Eventful {
                 // Only updated on changed element. In case element is incremental and don't wan't to rerender.
                 if (el.__dirty && el.states && el.states.emphasis) {
                     const prevStates = (el as DisplayableWithStatesHistory).__prevStates;
+                    // Restore states without animation
                     if (prevStates) {
                         el.useStates(prevStates);
                     }
@@ -1825,6 +1826,18 @@ class ECharts extends Eventful {
                             graphic.setStateTransition(textGuide, stateAnimationModel);
                         }
                     }
+
+                    // The use higlighted and selected flag to toggle states.
+                    const states = [];
+                    if ((el as ECElement).selected) {
+                        states.push('select');
+                    }
+                    if ((el as ECElement).highlighted) {
+                        states.push('emphasis');
+                    }
+                    el.useStates(states);
+                    // el.toggleState('select', (el as ECElement).selected);
+                    // el.toggleState('emphasis', (el as ECElement).highlighted);
                 }
             });
         };

src/util/graphic.ts

@@ -106,7 +106,6 @@ type ExtendShapeReturn = ReturnType<typeof Path.extend>;
 
 
 type ExtendedProps = {
-    __highlighted?: boolean | 'layer' | 'plain'
     __highByOuter: number
 
     __highDownSilentOnTouch: boolean
@@ -371,7 +370,7 @@ function liftColor(color: string): string {
 
 function singleEnterEmphasis(el: Element) {
 
-    (el as ExtendedElement).__highlighted = true;
+    (el as ECElement).highlighted = true;
 
     // el may be an array.
     if (!el.states.emphasis) {
@@ -385,7 +384,7 @@ function singleEnterEmphasis(el: Element) {
 
 function singleLeaveEmphasis(el: Element) {
     el.removeState('emphasis');
-    (el as ExtendedElement).__highlighted = false;
+    (el as ECElement).highlighted = false;
 }
 
 function updateElementState<T>(
@@ -398,9 +397,9 @@ function updateElementState<T>(
     let toState: DisplayState = NORMAL;
     let trigger;
     // See the rule of `onStateChange` on `graphic.setAsHighDownDispatcher`.
-    el.__highlighted && (fromState = EMPHASIS, trigger = true);
+    (el as ECElement).highlighted && (fromState = EMPHASIS, trigger = true);
     updater(el, commonParam);
-    el.__highlighted && (toState = EMPHASIS, trigger = true);
+    (el as ECElement).highlighted && (toState = EMPHASIS, trigger = true);
     trigger && el.__onStateChange && el.__onStateChange(fromState, toState);
 }
 

src/util/types.ts

@@ -106,6 +106,9 @@ export interface ECElement extends Element {
     };
     highDownSilentOnTouch?: boolean;
     onStateChange?: (fromState: 'normal' | 'emphasis', toState: 'normal' | 'emphasis') => void;
+
+    highlighted?: boolean;
+    selected?: boolean;
 }
 
 export interface DataHost {