enhance(state): clearStates and restoreState in the renderSeries overall.

src/chart/bar/BarView.ts

@@ -26,8 +26,7 @@ import {
     updateProps,
     initProps,
     enableHoverEmphasis,
-    setLabelStyle,
-    clearStates
+    setLabelStyle
 } from '../../util/graphic';
 import Path, { PathProps } from 'zrender/src/graphic/Path';
 import Group from 'zrender/src/graphic/Group';
@@ -236,7 +235,6 @@ class BarView extends ChartView {
                 }
 
                 if (el) {
-                    clearStates(el);
                     updateProps(el as Path, {
                         shape: layout
                     }, animationModel, newIndex);

src/chart/bar/PictorialBarView.ts

@@ -190,7 +190,6 @@ class PictorialBarView extends ChartView {
                 }
 
                 if (bar) {
-                    bar.clearStates();
                     updateBar(bar, opt, symbolMeta);
                 }
                 else {

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/funnel/FunnelView.ts

@@ -190,7 +190,6 @@ class FunnelView extends ChartView {
             })
             .update(function (newIdx, oldIdx) {
                 const piece = oldData.getItemGraphicEl(oldIdx) as FunnelPiece;
-                graphic.clearStates(piece);
 
                 piece.updateData(data, newIdx);
 

src/chart/gauge/GaugeView.ts

@@ -347,7 +347,6 @@ class GaugeView extends ChartView {
             })
             .update(function (newIdx, oldIdx) {
                 const pointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
-                graphic.clearStates(pointer);
 
                 graphic.updateProps(pointer, {
                     shape: {

src/chart/helper/LineDraw.ts

@@ -204,7 +204,6 @@ class LineDraw {
             itemEl = new this._LineCtor(newLineData, newIdx, seriesScope);
         }
         else {
-            graphic.clearStates(itemEl);
             itemEl.updateData(newLineData, newIdx, seriesScope);
         }
 

src/chart/helper/SymbolDraw.ts

@@ -177,8 +177,6 @@ class SymbolDraw {
                     symbolEl.setPosition(point);
                 }
                 else {
-                    graphic.clearStates(symbolEl);
-
                     symbolEl.updateData(data, newIdx, seriesScope);
                     graphic.updateProps(symbolEl, {
                         x: point[0],

src/chart/parallel/ParallelView.ts

@@ -77,7 +77,6 @@ class ParallelView extends ChartView {
 
         function update(newDataIndex: number, oldDataIndex: number) {
             const line = oldData.getItemGraphicEl(oldDataIndex) as graphic.Polyline;
-            graphic.clearStates(line);
 
             const points = createLinePoints(data, newDataIndex, dimensions, coordSys);
             data.setItemGraphicEl(newDataIndex, line);

src/chart/pie/PieView.ts

@@ -337,8 +337,6 @@ class PieView extends ChartView {
             .update(function (newIdx, oldIdx) {
                 const piePiece = oldData.getItemGraphicEl(oldIdx) as PiePiece;
 
-                graphic.clearStates(piePiece);
-
                 piePiece.updateData(data, newIdx, startAngle);
 
                 piePiece.off('click');

src/chart/radar/RadarView.ts

@@ -144,8 +144,6 @@ class RadarView extends ChartView {
             .update(function (newIdx, oldIdx) {
                 const itemGroup = oldData.getItemGraphicEl(oldIdx) as graphic.Group;
 
-                graphic.clearStates(itemGroup);
-
                 const polyline = itemGroup.childAt(0) as graphic.Polyline;
                 const polygon = itemGroup.childAt(1) as graphic.Polygon;
                 const symbolGroup = itemGroup.childAt(2) as graphic.Group;

src/chart/sunburst/SunburstPiece.ts

@@ -173,19 +173,16 @@ class SunburstPiece extends graphic.Sector {
         this.node.hostTree.root.eachNode(function (n: DrawTreeNode) {
             if (n.piece) {
                 n.piece.clearStates();
-                // n.piece.updateData(false, n, 'normal');
             }
         });
     }
 
     onHighlight() {
-        this.removeState('downplay');
-        this.useState('highlight', true);
+        this.replaceState('downplay', 'highlight', true);
     }
 
     onDownplay() {
-        this.removeState('highlight');
-        this.useState('downplay', true);
+        this.replaceState('highlight', 'downplay', true);
     }
 
     _updateLabel(

src/chart/sunburst/SunburstSeries.ts

@@ -245,7 +245,7 @@ class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
                 opacity: 0.5
             },
             label: {
-                opacity: 0.6
+                opacity: 0.5
             }
         },
 

src/chart/sunburst/SunburstView.ts

@@ -25,8 +25,7 @@ import SunburstSeriesModel, { SunburstSeriesNodeItemOption } from './SunburstSer
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
 import { TreeNode } from '../../data/Tree';
-
-const ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
+import { ROOT_TO_NODE_ACTION } from './sunburstAction';
 
 interface DrawTreeNode extends TreeNode {
     parentNode: DrawTreeNode

src/chart/sunburst/sunburstAction.ts

@@ -27,7 +27,7 @@ import SunburstSeriesModel from './SunburstSeries';
 import { Payload } from '../../util/types';
 import GlobalModel from '../../model/Global';
 
-const ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
+export const ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
 
 interface SunburstRootToNodePayload extends Payload {}
 

src/chart/tree/TreeView.ts

@@ -224,9 +224,6 @@ class TreeView extends ChartView {
                     symbolEl && removeNode(oldData, oldIdx, symbolEl, group, seriesModel, seriesScope);
                     return;
                 }
-                if (symbolEl) {
-                    graphic.clearStates(symbolEl);
-                }
                 // Update node and edge
                 updateNode(data, newIdx, symbolEl, group, seriesModel, seriesScope);
             })

src/component/marker/MarkAreaView.ts

@@ -273,7 +273,6 @@ class MarkAreaView extends MarkerView {
             })
             .update(function (newIdx, oldIdx) {
                 const polygon = inner(polygonGroup).data.getItemGraphicEl(oldIdx) as graphic.Polygon;
-                graphic.clearStates(polygon);
                 graphic.updateProps(polygon, {
                     shape: {
                         points: areaData.getItemLayout(newIdx)

src/echarts.ts

@@ -1660,6 +1660,9 @@ class ECharts extends Eventful {
                 const renderTask = chartView.renderTask;
                 scheduler.updatePayload(renderTask, payload);
 
+                // TODO states on marker.
+                clearStates(seriesModel, chartView);
+
                 if (dirtyMap && dirtyMap.get(seriesModel.uid)) {
                     renderTask.dirty();
                 }
@@ -1673,21 +1676,25 @@ class ECharts extends Eventful {
 
                 updateBlend(seriesModel, chartView);
 
-                updateStates(seriesModel, chartView);
-
                 updateHoverEmphasisHandler(chartView);
 
-                // Add albels.
+                // Add labels.
                 labelManager.addLabelsOfSeries(chartView);
+
+                // NOTE: Update states after label is added.
+                // Because in LabelManager#addLabel. It will cache the properties(transform, textConfig) of label.
+                // We need to cache the normal state. Not other states.
+                updateStates(seriesModel, chartView);
             });
 
             scheduler.unfinished = unfinished || scheduler.unfinished;
 
-            // labelManager.updateLayoutConfig(api);
-            // labelManager.layout();
+            labelManager.updateLayoutConfig(api);
+            labelManager.layout();
 
             // If use hover layer
-            updateHoverLayerStatus(ecIns, ecModel);
+            // TODO
+            // updateHoverLayerStatus(ecIns, ecModel);
 
             // Add aria
             aria(ecIns._zr.dom, ecModel);
@@ -1699,7 +1706,7 @@ class ECharts extends Eventful {
             });
         };
 
-        updateHoverLayerStatus = function (ecIns: ECharts, ecModel: GlobalModel): void {
+        function updateHoverLayerStatus(ecIns: ECharts, ecModel: GlobalModel): void {
             const zr = ecIns._zr;
             const storage = zr.storage;
             let elCount = 0;
@@ -1717,7 +1724,7 @@ class ECharts extends Eventful {
                     if (chartView.__alive) {
                         chartView.group.traverse(function (el: ECElement) {
                             // Don't switch back.
-                            // el.useHoverLayer = true;
+                            el.useHoverLayer = true;
                         });
                     }
                 });
@@ -1727,7 +1734,7 @@ class ECharts extends Eventful {
         /**
          * Update chart progressive and blend.
          */
-        updateBlend = function (seriesModel: SeriesModel, chartView: ChartView): void {
+        function updateBlend(seriesModel: SeriesModel, chartView: ChartView): void {
             const blendMode = seriesModel.get('blendMode') || null;
             if (__DEV__) {
                 if (!env.canvasSupported && blendMode && blendMode !== 'source-over') {
@@ -1737,20 +1744,18 @@ class ECharts extends Eventful {
             chartView.group.traverse(function (el: Displayable) {
                 // FIXME marker and other components
                 if (!el.isGroup) {
-                    // Only set if blendMode is changed. In case element is incremental and don't wan't to rerender.
-                    if (el.style.blend !== blendMode) {
-                        el.setStyle('blend', blendMode);
-                    }
+                    // DONT mark the element dirty. In case element is incremental and don't wan't to rerender.
+                    el.style.blend = blendMode;
                 }
                 if ((el as IncrementalDisplayable).eachPendingDisplayable) {
                     (el as IncrementalDisplayable).eachPendingDisplayable(function (displayable) {
-                        displayable.setStyle('blend', blendMode);
+                        displayable.style.blend = blendMode;
                     });
                 }
             });
         };
 
-        updateZ = function (model: ComponentModel, view: ComponentView | ChartView): void {
+        function updateZ(model: ComponentModel, view: ComponentView | ChartView): void {
             const z = model.get('z');
             const zlevel = model.get('zlevel');
             // Set z and zlevel
@@ -1771,17 +1776,54 @@ class ECharts extends Eventful {
             });
         };
 
-        updateStates = function (seriesModel: SeriesModel, view: ChartView): void {
+        interface DisplayableWithStatesHistory extends Displayable {
+            __prevStates: string[]
+        };
+        // TODO States on component.
+        function clearStates(seriesModel: SeriesModel, view: ChartView): void {
+            view.group.traverse(function (el: Displayable) {
+                // TODO If el is incremental.
+                if (el.hasState()) {
+                    (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;
+                    }
+                    if (textContent && textContent.stateTransition) {
+                        textContent.stateTransition = null;
+                    }
+                    if (textGuide && textGuide.stateTransition) {
+                        textGuide.stateTransition = null;
+                    }
+                    el.clearStates();
+                }
+            });
+        }
+
+        function updateStates(seriesModel: SeriesModel, view: ChartView): void {
             const stateAnimationModel = seriesModel.getModel('stateAnimation');
             const enableAnimation = seriesModel.isAnimationEnabled();
             view.group.traverse(function (el: Displayable) {
-                if (el.states && el.states.emphasis) {
+                // 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;
+                    if (prevStates) {
+                        el.useStates(prevStates);
+                    }
+                    // Update state transition and enable animation again.
                     if (enableAnimation) {
-                        // TODO textContent?
                         graphic.setStateTransition(el, stateAnimationModel);
-                    }
-                    else if (el.stateTransition) {
-                        el.stateTransition = null;
+                        const textContent = el.getTextContent();
+                        const textGuide = el.getTextGuideLine();
+                        // TODO Is it necessary to animate label?
+                        if (textContent) {
+                            graphic.setStateTransition(textContent, stateAnimationModel);
+                        }
+                        if (textGuide) {
+                            graphic.setStateTransition(textGuide, stateAnimationModel);
+                        }
                     }
                 }
             });
@@ -1805,7 +1847,7 @@ class ECharts extends Eventful {
                 graphic.leaveEmphasisWhenMouseOut(dispatcher, e);
             }
         }
-        updateHoverEmphasisHandler = function (view: ComponentView | ChartView): void {
+        function updateHoverEmphasisHandler(view: ComponentView | ChartView): void {
             view.group.on('mouseover', onMouseOver)
                 .on('mouseout', onMouseOut);
         };
@@ -1904,11 +1946,6 @@ let renderSeries: (
     dirtyMap?: {[uid: string]: any}
 ) => void;
 let performPostUpdateFuncs: (ecModel: GlobalModel, api: ExtensionAPI) => void;
-let updateHoverLayerStatus: (ecIns: ECharts, ecModel: GlobalModel) => void;
-let updateBlend: (seriesModel: SeriesModel, chartView: ChartView) => void;
-let updateStates: (model: SeriesModel, chartView: ChartView) => void;
-let updateZ: (model: ComponentModel, view: ComponentView | ChartView) => void;
-let updateHoverEmphasisHandler: (view: ComponentView | ChartView) => void;
 let createExtensionAPI: (ecIns: ECharts) => ExtensionAPI;
 let enableConnect: (chart: ECharts) => void;
 

src/label/LabelManager.ts

@@ -259,7 +259,7 @@ class LabelManager {
                     position: (layoutOption.x != null || layoutOption.y != null)
                         ? null : defaultLabelAttr.attachedPos,
                     // Ignore rotation config on the host el if rotation is changed.
-                    rotation: layoutOption.rotation != null ? null : defaultLabelAttr.attachedRot,
+                    rotation: layoutOption.rotation != null ? layoutOption.rotation : defaultLabelAttr.attachedRot,
                     offset: [layoutOption.dx || 0, layoutOption.dy || 0]
                 });
             }

src/util/graphic.ts

@@ -480,17 +480,6 @@ export function enableElementHoverEmphasis(el: Displayable, hoverStl?: ZRStylePr
     }
 
     el.stateProxy = elementStateProxy;
-
-    // FIXME
-    // It is not completely right to save "normal"/"emphasis" flag on elements.
-    // It probably should be saved on `data` of series. Consider the cases:
-    // (1) A highlighted elements are moved out of the view port and re-enter
-    // again by dataZoom.
-    // (2) call `setOption` and replace elements totally when they are highlighted.
-    if ((el as ExtendedDisplayable).__highlighted) {
-        // singleLeaveEmphasis(el);
-        singleEnterEmphasis(el);
-    }
 }
 
 export function enterEmphasisWhenMouseOver(el: Element, e: ElementEvent) {