ts: add types for sunburst series

src/chart/funnel/FunnelView.ts

@@ -29,7 +29,7 @@ import Displayable from 'zrender/src/graphic/Displayable';
 
 const opacityAccessPath = ['itemStyle', 'opacity'] as const;
 
-type ExtendedDisplayable = Displayable & {
+type FunnelLabelEl = Displayable & {
     hoverIgnore?: boolean
     normalIgnore?: boolean
 }
@@ -57,12 +57,12 @@ class FunnelPiece extends graphic.Group {
         var text = this.childAt(2) as graphic.Text;
 
         if (toState === 'emphasis') {
-            labelLine.ignore = (labelLine as ExtendedDisplayable).hoverIgnore;
-            text.ignore = (text as ExtendedDisplayable).hoverIgnore;
+            labelLine.ignore = (labelLine as FunnelLabelEl).hoverIgnore;
+            text.ignore = (text as FunnelLabelEl).hoverIgnore;
         }
         else {
-            labelLine.ignore = (labelLine as ExtendedDisplayable).normalIgnore;
-            text.ignore = (text as ExtendedDisplayable).normalIgnore;
+            labelLine.ignore = (labelLine as FunnelLabelEl).normalIgnore;
+            text.ignore = (text as FunnelLabelEl).normalIgnore;
         }
     }
 
@@ -171,11 +171,11 @@ class FunnelPiece extends graphic.Group {
             }
         );
 
-        labelText.ignore = (labelText as ExtendedDisplayable).normalIgnore = !labelModel.get('show');
-        (labelText as ExtendedDisplayable).hoverIgnore = !labelHoverModel.get('show');
+        labelText.ignore = (labelText as FunnelLabelEl).normalIgnore = !labelModel.get('show');
+        (labelText as FunnelLabelEl).hoverIgnore = !labelHoverModel.get('show');
 
-        labelLine.ignore = (labelLine as ExtendedDisplayable).normalIgnore = !labelLineModel.get('show');
-        (labelLine as ExtendedDisplayable).hoverIgnore = !labelLineHoverModel.get('show');
+        labelLine.ignore = (labelLine as FunnelLabelEl).normalIgnore = !labelLineModel.get('show');
+        (labelLine as FunnelLabelEl).hoverIgnore = !labelLineHoverModel.get('show');
 
         // Default use item visual color
         labelLine.setStyle({

src/chart/heatmap/HeatmapView.ts

@@ -30,7 +30,7 @@ import type PiecewiseModel from '../../component/visualMap/PiecewiseModel';
 import type ContinuousModel from '../../component/visualMap/ContinuousModel';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import { CoordinateSystem } from '../../coord/CoordinateSystem';
-import { StageHandlerProgressParams, Dictionary } from '../../util/types';
+import { StageHandlerProgressParams, Dictionary, OptionDataValue } from '../../util/types';
 
 // Coord can be 'geo' 'bmap' 'amap' 'leaflet'...
 interface GeoLikeCoordSys extends CoordinateSystem {
@@ -255,10 +255,10 @@ class HeatmapView extends ChartView {
                 hoverLabelModel = itemModel.getModel(['emphasis', 'label']);
             }
 
-            var rawValue = seriesModel.getRawValue(idx);
+            var rawValue = seriesModel.getRawValue(idx) as OptionDataValue[];
             var defaultText = '-';
             if (rawValue && rawValue[2] != null) {
-                defaultText = rawValue[2];
+                defaultText = rawValue[2] + '';
             }
 
             graphic.setLabelStyle(

src/chart/helper/Line.ts

@@ -240,7 +240,7 @@ class Line extends graphic.Group {
 
             baseText = seriesModel.getFormattedLabel(idx, 'normal', lineData.dataType);
             if (baseText == null) {
-                var rawVal = seriesModel.getRawValue(idx);
+                var rawVal = seriesModel.getRawValue(idx) as number;
                 baseText = rawVal == null
                     ? lineData.getName(idx)
                     : isFinite(rawVal)
@@ -262,7 +262,7 @@ class Line extends graphic.Group {
         // values have to be set on `normalStyle`.
         if (normalText != null || emphasisText != null) {
             graphic.setTextStyle(label.style, labelModel, {
-                text: normalText
+                text: normalText + ''
             }, {
                 autoColor: defaultLabelColor
             });
@@ -282,7 +282,7 @@ class Line extends graphic.Group {
         if (emphasisText != null) {
             // Only these properties supported in this emphasis style here.
             label.hoverStyle = {
-                text: emphasisText,
+                text: emphasisText + '',
                 textFill: hoverLabelModel.getTextColor(true),
                 // For merging hover style to normal style, do not use
                 // `hoverLabelModel.getFont()` here.

src/chart/helper/treeHelper.ts

@@ -36,12 +36,16 @@ export function retrieveTargetInfo(
         }
 
         if (targetNode && root.contains(targetNode)) {
-            return {node: targetNode};
+            return {
+                node: targetNode
+            };
         }
 
         var targetNodeId = payload.targetNodeId;
         if (targetNodeId != null && (targetNode = root.getNodeById(targetNodeId))) {
-            return {node: targetNode};
+            return {
+                node: targetNode
+            };
         }
     }
 }
@@ -62,7 +66,7 @@ export function aboveViewRoot(viewRoot: TreeNode, node: TreeNode) {
 }
 
 // From root to the input node (the input node will be included).
-export function wrapTreePathInfo(node: TreeNode, seriesModel: SeriesModel) {
+export function wrapTreePathInfo<T = unknown>(node: TreeNode, seriesModel: SeriesModel) {
     var treePathInfo = [];
 
     while (node) {
@@ -70,7 +74,7 @@ export function wrapTreePathInfo(node: TreeNode, seriesModel: SeriesModel) {
         treePathInfo.push({
             name: node.name,
             dataIndex: nodeDataIndex,
-            value: seriesModel.getRawValue(nodeDataIndex)
+            value: seriesModel.getRawValue(nodeDataIndex) as T
         });
         node = node.parentNode;
     }

src/chart/pie/PieView.ts

@@ -29,6 +29,7 @@ import List from '../../data/List';
 import PieSeriesModel, {PieDataItemOption} from './PieSeries';
 import { Dictionary } from 'zrender/src/core/types';
 import Element from 'zrender/src/Element';
+import Displayable from 'zrender/src/graphic/Displayable';
 
 function updateDataSelected(
     this: PiePiece,
@@ -85,10 +86,9 @@ function toggleItemSelected(
         : el.attr('position', position);
 }
 
-type PieceElementExtension = {
-    hoverIgnore?: boolean,
-    normalIgnore?: boolean,
-    ignore?: boolean
+interface PieceElementExtension extends Displayable {
+    hoverIgnore?: boolean
+    normalIgnore?: boolean
 };
 
 /**
@@ -179,7 +179,7 @@ class PiePiece extends graphic.Group {
                 itemModel.getModel('itemStyle').getItemStyle()
             )
         );
-        sector.hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
+        sector.hoverStyle = itemModel.getModel(['emphasis', 'itemStyle']).getItemStyle();
 
         var cursorStyle = itemModel.getShallow('cursor');
         cursorStyle && sector.attr('cursor', cursorStyle);

src/chart/sunburst/SunburstSeries.ts

@@ -17,23 +17,140 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import SeriesModel from '../../model/Series';
-import Tree from '../../data/Tree';
+import Tree, { TreeNode } from '../../data/Tree';
 import {wrapTreePathInfo} from '../helper/treeHelper';
+import {
+    SeriesOption,
+    CircleLayoutOptionMixin,
+    LabelOption,
+    ItemStyleOption,
+    OptionDataValue,
+    CallbackDataParams
+} from '../../util/types';
+import GlobalModel from '../../model/Global';
+
+interface SunburstLabelOption extends Omit<LabelOption, 'rotate'> {
+    rotate?: 'radial' | 'tangential' | number
+    minAngle?: number
+    silent?: boolean
+}
+
+interface SunburstDataParams extends CallbackDataParams {
+    treePathInfo: {
+        name: string,
+        dataIndex: number
+        value: SunburstSeriesNodeOption['value']
+    }[]
+}
 
-export default SeriesModel.extend({
+export interface SunburstSeriesNodeOption {
+    name?: string
 
-    type: 'series.sunburst',
+    nodeClick?: 'rootToNode' | 'link'
+    // Available when nodeClick is link
+    link?: string
+    target?: string
+
+    itemStyle?: ItemStyleOption
+    label?: SunburstLabelOption
+    emphasis?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+    highlight?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+    downplay?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+
+    value?: OptionDataValue | OptionDataValue[]
+
+    children?: SunburstSeriesNodeOption[]
+
+    collapsed?: boolean
+
+    cursor?: string
+}
+export interface SunburstSeriesLevelOption {
+    itemStyle?: ItemStyleOption
+    label?: SunburstLabelOption
+    emphasis?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+    highlight?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+    downplay?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+}
+export interface SunburstSeriesOption extends SeriesOption, CircleLayoutOptionMixin {
 
+    clockwise?: boolean
+    startAngle?: number
+    minAngle?: number
     /**
-     * @type {module:echarts/data/Tree~Node}
+     * If still show when all data zero.
      */
-    _viewRoot: null,
+    stillShowZeroSum?: boolean
+    /**
+     * Policy of highlighting pieces when hover on one
+     * Valid values: 'none' (for not downplay others), 'descendant',
+     * 'ancestor', 'self'
+     */
+    highlightPolicy?: 'descendant' | 'ancestor' | 'self'
+
+    nodeClick?: 'rootToNode' | 'link'
+
+    renderLabelForZeroData?: boolean
+
+    itemStyle?: ItemStyleOption
+    label?: SunburstLabelOption
+    emphasis?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+    highlight?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+    downplay?: {
+        itemStyle?: ItemStyleOption
+        label?: SunburstLabelOption
+    }
+
+    levels?: SunburstSeriesLevelOption[]
 
-    getInitialData: function (option, ecModel) {
+    animationType?: 'expansion' | 'scale'
+
+    sort?: 'desc' | 'asc' | ((a: TreeNode, b: TreeNode) => number)
+}
+
+interface SunburstSeriesModel {
+    getFormattedLabel(
+        dataIndex: number,
+        state?: 'emphasis' | 'normal' | 'highlight' | 'downplay',
+        dataType?: string,
+        dimIndex?: number,
+        labelProp?: string
+    ): string
+}
+class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
+
+    static readonly type = 'series.sunburst'
+    readonly type = SunburstSeriesModel.type
+
+    private _viewRoot: TreeNode
+
+    getInitialData(option: SunburstSeriesOption, ecModel: GlobalModel) {
         // Create a virtual root.
         var root = { name: option.name, children: option.data };
 
@@ -43,33 +160,33 @@ export default SeriesModel.extend({
 
         // levels = option.levels = setDefault(levels, ecModel);
 
-        var treeOption = {};
-
-        treeOption.levels = levels;
+        var treeOption = {
+            levels: levels
+        };
 
         // Make sure always a new tree is created when setOption,
         // in TreemapView, we check whether oldTree === newTree
         // to choose mappings approach among old shapes and new shapes.
         return Tree.createTree(root, this, treeOption).data;
-    },
+    }
 
-    optionUpdated: function () {
+    optionUpdated() {
         this.resetViewRoot();
-    },
+    }
 
     /*
      * @override
      */
-    getDataParams: function (dataIndex) {
-        var params = SeriesModel.prototype.getDataParams.apply(this, arguments);
+    getDataParams(dataIndex: number) {
+        var params = super.getDataParams.apply(this, arguments as any) as SunburstDataParams;
 
         var node = this.getData().tree.getNodeByDataIndex(dataIndex);
-        params.treePathInfo = wrapTreePathInfo(node, this);
+        params.treePathInfo = wrapTreePathInfo<SunburstSeriesNodeOption['value']>(node, this);
 
         return params;
-    },
+    }
 
-    defaultOption: {
+    defaultOption: SunburstSeriesOption = {
         zlevel: 0,
         z: 2,
 
@@ -82,8 +199,6 @@ export default SeriesModel.extend({
         // 最小角度改为0
         minAngle: 0,
 
-        percentPrecision: 2,
-
         // If still show when all data zero.
         stillShowZeroSum: true,
 
@@ -107,8 +222,7 @@ export default SeriesModel.extend({
             align: 'center',
             position: 'inside',
             distance: 5,
-            silent: true,
-            emphasis: {}
+            silent: true
         },
         itemStyle: {
             borderWidth: 1,
@@ -118,12 +232,15 @@ export default SeriesModel.extend({
             shadowColor: 'rgba(0, 0, 0, 0.2)',
             shadowOffsetX: 0,
             shadowOffsetY: 0,
-            opacity: 1,
-            emphasis: {},
-            highlight: {
+            opacity: 1
+        },
+        highlight: {
+            itemStyle: {
                 opacity: 1
-            },
-            downplay: {
+            }
+        },
+        downplay: {
+            itemStyle: {
                 opacity: 0.9
             }
         },
@@ -150,16 +267,13 @@ export default SeriesModel.extend({
          * }
          */
         sort: 'desc'
-    },
+    }
 
-    getViewRoot: function () {
+    getViewRoot() {
         return this._viewRoot;
-    },
+    }
 
-    /**
-     * @param {module:echarts/data/Tree~Node} [viewRoot]
-     */
-    resetViewRoot: function (viewRoot) {
+    resetViewRoot(viewRoot?: TreeNode) {
         viewRoot
             ? (this._viewRoot = viewRoot)
             : (viewRoot = this._viewRoot);
@@ -172,14 +286,11 @@ export default SeriesModel.extend({
             this._viewRoot = root;
         }
     }
-});
+}
 
 
 
-/**
- * @param {Object} dataNode
- */
-function completeTreeValue(dataNode) {
+function completeTreeValue(dataNode: SunburstSeriesNodeOption) {
     // Postorder travel tree.
     // If value of none-leaf node is not set,
     // calculate it by suming up the value of all children.
@@ -190,12 +301,12 @@ function completeTreeValue(dataNode) {
         completeTreeValue(child);
 
         var childValue = child.value;
+        // TODO First value of array must be a number
         zrUtil.isArray(childValue) && (childValue = childValue[0]);
-
-        sum += childValue;
+        sum += childValue as number;
     });
 
-    var thisValue = dataNode.value;
+    var thisValue = dataNode.value as number;
     if (zrUtil.isArray(thisValue)) {
         thisValue = thisValue[0];
     }
@@ -212,3 +323,8 @@ function completeTreeValue(dataNode) {
         ? (dataNode.value[0] = thisValue)
         : (dataNode.value = thisValue);
 }
+
+
+SeriesModel.registerClass(SunburstSeriesModel);
+
+export default SunburstSeriesModel;
\ No newline at end of file

src/chart/sunburst/SunburstView.ts

@@ -17,40 +17,59 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import * as zrUtil from 'zrender/src/core/util';
 import ChartView from '../../view/Chart';
 import SunburstPiece from './SunburstPiece';
 import DataDiffer from '../../data/DataDiffer';
+import SunburstSeriesModel, { SunburstSeriesNodeOption } from './SunburstSeries';
+import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../ExtensionAPI';
+import { TreeNode } from '../../data/Tree';
+
+const ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
 
-var ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
+interface DrawTreeNode extends TreeNode {
+    parentNode: DrawTreeNode
+    piece: SunburstPiece
+    children: DrawTreeNode[]
+}
+class SunburstView extends ChartView {
 
-var SunburstView = ChartView.extend({
+    static readonly type = 'sunburst'
+    readonly type = SunburstView.type
 
-    type: 'sunburst',
+    seriesModel: SunburstSeriesModel
+    api: ExtensionAPI
+    ecModel: GlobalModel
 
-    init: function () {
-    },
+    virtualPiece: SunburstPiece
 
-    render: function (seriesModel, ecModel, api, payload) {
-        var that = this;
+    private _oldChildren: DrawTreeNode[]
+
+    render(
+        seriesModel: SunburstSeriesModel,
+        ecModel: GlobalModel,
+        api: ExtensionAPI,
+        // @ts-ignore
+        payload
+    ) {
+        var self = this;
 
         this.seriesModel = seriesModel;
         this.api = api;
         this.ecModel = ecModel;
 
         var data = seriesModel.getData();
-        var virtualRoot = data.tree.root;
+        var virtualRoot = data.tree.root as DrawTreeNode;
 
-        var newRoot = seriesModel.getViewRoot();
+        var newRoot = seriesModel.getViewRoot() as DrawTreeNode;
 
         var group = this.group;
 
         var renderLabelForZeroData = seriesModel.get('renderLabelForZeroData');
 
-        var newChildren = [];
-        newRoot.eachNode(function (node) {
+        var newChildren: DrawTreeNode[] = [];
+        newRoot.eachNode(function (node: DrawTreeNode) {
             newChildren.push(node);
         });
         var oldChildren = this._oldChildren || [];
@@ -77,7 +96,7 @@ var SunburstView = ChartView.extend({
 
         this._oldChildren = newChildren;
 
-        function dualTravel(newChildren, oldChildren) {
+        function dualTravel(newChildren: DrawTreeNode[], oldChildren: DrawTreeNode[]) {
             if (newChildren.length === 0 && oldChildren.length === 0) {
                 return;
             }
@@ -88,19 +107,19 @@ var SunburstView = ChartView.extend({
                 .remove(zrUtil.curry(processNode, null))
                 .execute();
 
-            function getKey(node) {
+            function getKey(node: DrawTreeNode) {
                 return node.getId();
             }
 
-            function processNode(newId, oldId) {
-                var newNode = newId == null ? null : newChildren[newId];
-                var oldNode = oldId == null ? null : oldChildren[oldId];
+            function processNode(newIdx: number, oldIdx?: number) {
+                var newNode = newIdx == null ? null : newChildren[newIdx];
+                var oldNode = oldIdx == null ? null : oldChildren[oldIdx];
 
                 doRenderNode(newNode, oldNode);
             }
         }
 
-        function doRenderNode(newNode, oldNode) {
+        function doRenderNode(newNode: DrawTreeNode, oldNode: DrawTreeNode) {
             if (!renderLabelForZeroData && newNode && !newNode.getValue()) {
                 // Not render data with value 0
                 newNode = null;
@@ -136,7 +155,7 @@ var SunburstView = ChartView.extend({
             }
         }
 
-        function removeNode(node) {
+        function removeNode(node: DrawTreeNode) {
             if (!node) {
                 return;
             }
@@ -147,63 +166,55 @@ var SunburstView = ChartView.extend({
             }
         }
 
-        function renderRollUp(virtualRoot, viewRoot) {
+        function renderRollUp(virtualRoot: DrawTreeNode, viewRoot: DrawTreeNode) {
             if (viewRoot.depth > 0) {
                 // Render
-                if (that.virtualPiece) {
+                if (self.virtualPiece) {
                     // Update
-                    that.virtualPiece.updateData(
+                    self.virtualPiece.updateData(
                         false, virtualRoot, 'normal', seriesModel, ecModel);
                 }
                 else {
                     // Add
-                    that.virtualPiece = new SunburstPiece(
+                    self.virtualPiece = new SunburstPiece(
                         virtualRoot,
                         seriesModel,
                         ecModel
                     );
-                    group.add(that.virtualPiece);
+                    group.add(self.virtualPiece);
                 }
 
-                if (viewRoot.piece._onclickEvent) {
-                    viewRoot.piece.off('click', viewRoot.piece._onclickEvent);
-                }
-                var event = function (e) {
-                    that._rootToNode(viewRoot.parentNode);
-                };
-                viewRoot.piece._onclickEvent = event;
-                that.virtualPiece.on('click', event);
+                viewRoot.piece.off('click');
+                self.virtualPiece.on('click', function (e) {
+                    self._rootToNode(viewRoot.parentNode);
+                });
             }
-            else if (that.virtualPiece) {
+            else if (self.virtualPiece) {
                 // Remove
-                group.remove(that.virtualPiece);
-                that.virtualPiece = null;
+                group.remove(self.virtualPiece);
+                self.virtualPiece = null;
             }
         }
-    },
-
-    dispose: function () {
-    },
+    }
 
     /**
      * @private
      */
-    _initEvents: function () {
-        var that = this;
-
-        var event = function (e) {
+    _initEvents() {
+        this.group.off('click');
+        this.group.on('click', (e) => {
             var targetFound = false;
-            var viewRoot = that.seriesModel.getViewRoot();
-            viewRoot.eachNode(function (node) {
+            var viewRoot = this.seriesModel.getViewRoot();
+            viewRoot.eachNode((node: DrawTreeNode) => {
                 if (!targetFound
                     && node.piece && node.piece.childAt(0) === e.target
                 ) {
-                    var nodeClick = node.getModel().get('nodeClick');
+                    var nodeClick = node.getModel<SunburstSeriesNodeOption>().get('nodeClick');
                     if (nodeClick === 'rootToNode') {
-                        that._rootToNode(node);
+                        this._rootToNode(node);
                     }
                     else if (nodeClick === 'link') {
-                        var itemModel = node.getModel();
+                        var itemModel = node.getModel<SunburstSeriesNodeOption>();
                         var link = itemModel.get('link');
                         if (link) {
                             var linkTarget = itemModel.get('target', true)
@@ -214,19 +225,13 @@ var SunburstView = ChartView.extend({
                     targetFound = true;
                 }
             });
-        };
-
-        if (this.group._onclickEvent) {
-            this.group.off('click', this.group._onclickEvent);
-        }
-        this.group.on('click', event);
-        this.group._onclickEvent = event;
-    },
+        });
+    }
 
     /**
      * @private
      */
-    _rootToNode: function (node) {
+    _rootToNode(node: DrawTreeNode) {
         if (node !== this.seriesModel.getViewRoot()) {
             this.api.dispatchAction({
                 type: ROOT_TO_NODE_ACTION,
@@ -235,12 +240,12 @@ var SunburstView = ChartView.extend({
                 targetNode: node
             });
         }
-    },
+    }
 
     /**
      * @implement
      */
-    containPoint: function (point, seriesModel) {
+    containPoint(point: number[], seriesModel: SunburstSeriesModel) {
         var treeRoot = seriesModel.getData();
         var itemLayout = treeRoot.getItemLayout(0);
         if (itemLayout) {
@@ -251,6 +256,9 @@ var SunburstView = ChartView.extend({
         }
     }
 
-});
+}
+
+
+ChartView.registerClass(SunburstView);
 
 export default SunburstView;

src/chart/sunburst/sunburstAction.ts

@@ -17,27 +17,30 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 /**
  * @file Sunburst action
  */
 
 import * as echarts from '../../echarts';
 import * as helper from '../helper/treeHelper';
+import SunburstSeriesModel from './SunburstSeries';
+import { Payload } from '../../util/types';
+import GlobalModel from '../../model/Global';
 
 var ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
 
+interface SunburstRootToNodePayload extends Payload {}
+
 echarts.registerAction(
     {type: ROOT_TO_NODE_ACTION, update: 'updateView'},
-    function (payload, ecModel) {
+    function (payload: SunburstRootToNodePayload, ecModel: GlobalModel) {
 
         ecModel.eachComponent(
             {mainType: 'series', subType: 'sunburst', query: payload},
             handleRootToNode
         );
 
-        function handleRootToNode(model, index) {
+        function handleRootToNode(model: SunburstSeriesModel, index: number) {
             var targetInfo = helper
                 .retrieveTargetInfo(payload, [ROOT_TO_NODE_ACTION], model);
 
@@ -53,19 +56,20 @@ echarts.registerAction(
     }
 );
 
-
 var HIGHLIGHT_ACTION = 'sunburstHighlight';
 
+interface SunburstHighlightPayload extends Payload {}
+
 echarts.registerAction(
     {type: HIGHLIGHT_ACTION, update: 'updateView'},
-    function (payload, ecModel) {
+    function (payload: SunburstHighlightPayload, ecModel: GlobalModel) {
 
         ecModel.eachComponent(
             {mainType: 'series', subType: 'sunburst', query: payload},
             handleHighlight
         );
 
-        function handleHighlight(model, index) {
+        function handleHighlight(model: SunburstSeriesModel, index: number) {
             var targetInfo = helper
                 .retrieveTargetInfo(payload, [HIGHLIGHT_ACTION], model);
 
@@ -79,16 +83,18 @@ echarts.registerAction(
 
 var UNHIGHLIGHT_ACTION = 'sunburstUnhighlight';
 
+interface SunburstUnhighlightPayload extends Payload {}
+
 echarts.registerAction(
     {type: UNHIGHLIGHT_ACTION, update: 'updateView'},
-    function (payload, ecModel) {
+    function (payload: SunburstUnhighlightPayload, ecModel: GlobalModel) {
 
         ecModel.eachComponent(
             {mainType: 'series', subType: 'sunburst', query: payload},
             handleUnhighlight
         );
 
-        function handleUnhighlight(model, index) {
+        function handleUnhighlight(model: SunburstSeriesModel, index: number) {
             payload.unhighlight = true;
         }
     }

src/chart/sunburst/sunburstLayout.ts

@@ -17,16 +17,22 @@
 * under the License.
 */
 
-// @ts-nocheck
-
 import { parsePercent } from '../../util/number';
 import * as zrUtil from 'zrender/src/core/util';
+import GlobalModel from '../../model/Global';
+import ExtensionAPI from '../../ExtensionAPI';
+import SunburstSeriesModel, { SunburstSeriesNodeOption, SunburstSeriesOption } from './SunburstSeries';
+import { TreeNode } from '../../data/Tree';
 
 // var PI2 = Math.PI * 2;
 var RADIAN = Math.PI / 180;
 
-export default function (seriesType, ecModel, api, payload) {
-    ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+export default function (
+    seriesType: 'sunburst',
+    ecModel: GlobalModel,
+    api: ExtensionAPI
+) {
+    ecModel.eachSeriesByType(seriesType, function (seriesModel: SunburstSeriesModel) {
         var center = seriesModel.get('center');
         var radius = seriesModel.get('radius');
 
@@ -59,10 +65,10 @@ export default function (seriesType, ecModel, api, payload) {
 
         var validDataCount = 0;
         zrUtil.each(treeRoot.children, function (child) {
-            !isNaN(child.getValue()) && validDataCount++;
+            !isNaN(child.getValue() as number) && validDataCount++;
         });
 
-        var sum = treeRoot.getValue();
+        var sum = treeRoot.getValue() as number;
         // Sum may be 0
         var unitRadian = Math.PI / (sum || validDataCount) * 2;
 
@@ -84,7 +90,7 @@ export default function (seriesType, ecModel, api, payload) {
          * Render a tree
          * @return increased angle
          */
-        var renderNode = function (node, startAngle) {
+        var renderNode = function (node: TreeNode, startAngle: number) {
             if (!node) {
                 return;
             }
@@ -94,7 +100,7 @@ export default function (seriesType, ecModel, api, payload) {
             // Render self
             if (node !== virtualRoot) {
                 // Tree node is virtual, so it doesn't need to be drawn
-                var value = node.getValue();
+                var value = node.getValue() as number;
 
                 var angle = (sum === 0 && stillShowZeroSum)
                     ? unitRadian : (value * unitRadian);
@@ -113,11 +119,15 @@ export default function (seriesType, ecModel, api, payload) {
                 var rStart = r0 + rPerLevel * depth;
                 var rEnd = r0 + rPerLevel * (depth + 1);
 
-                var itemModel = node.getModel();
+                var itemModel = node.getModel<SunburstSeriesNodeOption>();
+                // @ts-ignore. TODO this is not provided to developer yet. Rename it.
                 if (itemModel.get('r0') != null) {
+                    // @ts-ignore
                     rStart = parsePercent(itemModel.get('r0'), size / 2);
                 }
+                // @ts-ignore
                 if (itemModel.get('r') != null) {
+                    // @ts-ignore
                     rEnd = parsePercent(itemModel.get('r'), size / 2);
                 }
 
@@ -169,19 +179,16 @@ export default function (seriesType, ecModel, api, payload) {
 
 /**
  * Init node children by order and update visual
- *
- * @param {TreeNode} node  root node
- * @param {boolean}  isAsc if is in ascendant order
  */
-function initChildren(node, isAsc) {
+function initChildren(node: TreeNode, sortOrder?: SunburstSeriesOption['sort']) {
     var children = node.children || [];
 
-    node.children = sort(children, isAsc);
+    node.children = sort(children, sortOrder);
 
     // Init children recursively
     if (children.length) {
         zrUtil.each(node.children, function (child) {
-            initChildren(child, isAsc);
+            initChildren(child, sortOrder);
         });
     }
 }
@@ -193,14 +200,14 @@ function initChildren(node, isAsc) {
  * @param {string | function | null} sort sort method
  *                                   See SunburstSeries.js for details.
  */
-function sort(children, sortOrder) {
+function sort(children: TreeNode[], sortOrder: SunburstSeriesOption['sort']) {
     if (typeof sortOrder === 'function') {
         return children.sort(sortOrder);
     }
     else {
         var isAsc = sortOrder === 'asc';
         return children.sort(function (a, b) {
-            var diff = (a.getValue() - b.getValue()) * (isAsc ? 1 : -1);
+            var diff = ((a.getValue() as number) - (b.getValue() as number)) * (isAsc ? 1 : -1);
             return diff === 0
                 ? (a.dataIndex - b.dataIndex) * (isAsc ? -1 : 1)
                 : diff;

src/chart/tree/TreeSeries.ts

@@ -41,9 +41,6 @@ interface CurveLineStyleOption extends LineStyleOption{
 export interface TreeSeriesNodeOption extends SymbolOptionMixin {
     name?: string
 
-    /**
-     * Item style of leave nodes
-     */
     itemStyle?: ItemStyleOption
     /**
      * Line style of the edge between node and it's parent.

src/chart/treemap/helper.ts

@@ -19,8 +19,6 @@
 
 // @ts-nocheck
 
-import * as zrUtil from 'zrender/src/core/util';
-
 export function retrieveTargetInfo(payload, seriesModel) {
     if (payload
         && (
@@ -39,38 +37,4 @@ export function retrieveTargetInfo(payload, seriesModel) {
             return {node: targetNode};
         }
     }
-}
-
-// Not includes the given node at the last item.
-export function getPathToRoot(node) {
-    var path = [];
-    while (node) {
-        node = node.parentNode;
-        node && path.push(node);
-    }
-    return path.reverse();
-}
-
-export function aboveViewRoot(viewRoot, node) {
-    var viewPath = getPathToRoot(viewRoot);
-    return zrUtil.indexOf(viewPath, node) >= 0;
-}
-
-// From root to the input node (the input node will be included).
-export function wrapTreePathInfo(node, seriesModel) {
-    var treePathInfo = [];
-
-    while (node) {
-        var nodeDataIndex = node.dataIndex;
-        treePathInfo.push({
-            name: node.name,
-            dataIndex: nodeDataIndex,
-            value: seriesModel.getRawValue(nodeDataIndex)
-        });
-        node = node.parentNode;
-    }
-
-    treePathInfo.reverse();
-
-    return treePathInfo;
-}
+}
\ No newline at end of file

src/data/Tree.ts

@@ -204,9 +204,9 @@ export class TreeNode {
         return this.hostTree.data.getItemLayout(this.dataIndex);
     }
 
-    // TODO: TYPE Same type with Model#getModel
     getModel<T = unknown>(): Model<T>
-    getModel<T = unknown, S extends keyof T= keyof T>(path: S): Model<T[S]>
+    // @depcrecated
+    // getModel<T = unknown, S extends keyof T = keyof T>(path: S): Model<T[S]>
     getModel<T = unknown>(path?: string): Model {
         if (this.dataIndex < 0) {
             return;

src/model/Series.ts

@@ -424,7 +424,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
         var data = this.getData();
         var tooltipDims = data.mapDimension('defaultedTooltip', true);
         var tooltipDimLen = tooltipDims.length;
-        var value = this.getRawValue(dataIndex);
+        var value = this.getRawValue(dataIndex) as any;
         var isValueArr = zrUtil.isArray(value);
 
         var color = data.getItemVisual(dataIndex, 'color') as ZRColor;

src/model/mixin/dataFormat.ts

@@ -147,7 +147,7 @@ class DataFormatMixin {
     getRawValue(
         idx: number,
         dataType?: string
-    ) {
+    ): unknown {
         return retrieveRawValue(this.getData(dataType), idx);
     }
 

src/util/types.ts

@@ -715,6 +715,8 @@ export interface TextCommonOption extends ShadowOptionMixin {
     // @deprecated
     baseline?: VerticalAlign
 
+    opacity?: number
+
     lineHeight?: number
     backgroundColor?: ColorString | {
         image: ImageLike