refact(sunburst): forward sunburstHighlight action to general highlight action

src/chart/sunburst/SunburstView.ts

@@ -78,20 +78,6 @@ class SunburstView extends ChartView {
 
         renderRollUp(virtualRoot, newRoot);
 
-        if (payload && payload.highlight && payload.highlight.piece) {
-            const highlightPolicy = seriesModel.getShallow('highlightPolicy');
-            payload.highlight.piece.onEmphasis(highlightPolicy);
-        }
-        else if (payload && payload.unhighlight) {
-            let piece = this.virtualPiece;
-            if (!piece && virtualRoot.children.length) {
-                piece = virtualRoot.children[0].piece;
-            }
-            if (piece) {
-                piece.onNormal();
-            }
-        }
-
         this._initEvents();
 
         this._oldChildren = newChildren;

src/chart/sunburst/sunburstAction.ts

@@ -26,6 +26,9 @@ import * as helper from '../helper/treeHelper';
 import SunburstSeriesModel from './SunburstSeries';
 import { Payload } from '../../util/types';
 import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../ExtensionAPI';
+import { extend } from 'zrender/src/core/util';
+import { deprecateLog } from '../../preprocessor/helper/compatStyle';
 
 export const ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
 
@@ -61,22 +64,29 @@ const HIGHLIGHT_ACTION = 'sunburstHighlight';
 interface SunburstHighlightPayload extends Payload {}
 
 echarts.registerAction(
-    {type: HIGHLIGHT_ACTION, update: 'updateView'},
-    function (payload: SunburstHighlightPayload, ecModel: GlobalModel) {
-
+    {type: HIGHLIGHT_ACTION, update: 'none'},
+    function (payload: SunburstHighlightPayload, ecModel: GlobalModel, api: ExtensionAPI) {
+        // Clone
+        payload = extend({}, payload);
         ecModel.eachComponent(
             {mainType: 'series', subType: 'sunburst', query: payload},
             handleHighlight
         );
 
-        function handleHighlight(model: SunburstSeriesModel, index: number) {
+        function handleHighlight(model: SunburstSeriesModel) {
             const targetInfo = helper
                 .retrieveTargetInfo(payload, [HIGHLIGHT_ACTION], model);
-
             if (targetInfo) {
-                payload.highlight = targetInfo.node;
+                payload.dataIndex = targetInfo.node.dataIndex;
             }
         }
+
+        deprecateLog('Use `highlight` action instead of `sunburstHighlight`');
+
+        // Fast forward action
+        api.dispatchAction(extend(payload, {
+            type: 'highlight'
+        }));
     }
 );
 
@@ -87,15 +97,11 @@ interface SunburstUnhighlightPayload extends Payload {}
 
 echarts.registerAction(
     {type: UNHIGHLIGHT_ACTION, update: 'updateView'},
-    function (payload: SunburstUnhighlightPayload, ecModel: GlobalModel) {
-
-        ecModel.eachComponent(
-            {mainType: 'series', subType: 'sunburst', query: payload},
-            handleUnhighlight
-        );
-
-        function handleUnhighlight(model: SunburstSeriesModel, index: number) {
-            payload.unhighlight = true;
-        }
+    function (payload: SunburstUnhighlightPayload, ecModel: GlobalModel, api: ExtensionAPI) {
+        payload = extend({}, payload);
+        deprecateLog('Use `downplay` action instead of `sunburstUnhighlight`');
+        api.dispatchAction(extend(payload, {
+            type: 'downplay'
+        }));
     }
 );

test/sunburst-highlight.html

@@ -32,8 +32,17 @@ under the License.
                 /* background-image: url(old_mathematics.png); */
                 /* background-repeat: repeat; */
             }
+            #toolbar {
+                position: absolute;
+                left: 10px;
+                top: 10px;
+            }
         </style>
         <div id="main"></div>
+        <div id="toolbar">
+            <button id="highlight">Highlight</button>
+            <button id="downplay">Downplay</button>
+        </div>
         <script>
             var chart;
             require([
@@ -105,10 +114,18 @@ under the License.
 
                 chart.setOption(option);
 
-                chart.dispatchAction({
-                    type: 'sunburstHighlight',
-                    targetNodeId: 'target'
-                });
+                document.querySelector('#highlight').onclick = function () {
+                    chart.dispatchAction({
+                        type: 'sunburstHighlight',
+                        targetNodeId: 'target'
+                    });
+                }
+                document.querySelector('#downplay').onclick = function () {
+                    chart.dispatchAction({
+                        type: 'sunburstUnhighlight',
+                        targetNodeId: 'target'
+                    });
+                }
             });
 
         </script>