fix(sunburst): radius in levels

apache · Sep 10, 2021 · c5fcf82 · c5fcf82
1 parent b730055
commit c5fcf82
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/src/chart/sunburst/SunburstSeries.ts b/src/chart/sunburst/SunburstSeries.ts
@@ -94,6 +94,17 @@ export interface SunburstSeriesNodeItemOption extends
 }
 export interface SunburstSeriesLevelOption
     extends SunburstStateOption, StatesOptionMixin<SunburstStateOption, SunburstStatesMixin> {
+
+    radius?: number | number[]
+    /**
+     * @deprecated use radius instead
+     */
+    r?: number
+    /**
+     * @deprecated use radius instead
+     */
+    r0?: number
+
     highlight?: {
         itemStyle?: SunburstItemStyleOption
         label?: SunburstLabelOption
@@ -152,16 +163,18 @@ class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
     ignoreStyleOnData = true;
 
     private _viewRoot: TreeNode;
+    private _levelModels: Model<SunburstSeriesLevelOption>[];
 
     getInitialData(option: SunburstSeriesOption, ecModel: GlobalModel) {
         // Create a virtual root.
         const root = { name: option.name, children: option.data } as SunburstSeriesNodeItemOption;
 
         completeTreeValue(root);
 
-        const levelModels = zrUtil.map(option.levels || [], function (levelDefine) {
+        this._levelModels = zrUtil.map(option.levels || [], function (levelDefine) {
             return new Model(levelDefine, this, ecModel);
         }, this);
+        const levelModels = this._levelModels;
 
         // Make sure always a new tree is created when setOption,
         // in TreemapView, we check whether oldTree === newTree
@@ -195,6 +208,10 @@ class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
         return params;
     }
 
+    getLevelModel(node: TreeNode) {
+        return this._levelModels && this._levelModels[node.depth];
+    }
+
     static defaultOption: SunburstSeriesOption = {
         zlevel: 0,
         z: 2,

diff --git a/src/chart/sunburst/sunburstLayout.ts b/src/chart/sunburst/sunburstLayout.ts
@@ -23,6 +23,7 @@ import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import SunburstSeriesModel, { SunburstSeriesNodeItemOption, SunburstSeriesOption } from './SunburstSeries';
 import { TreeNode } from '../../data/Tree';
+import SeriesModel from '../../model/Series';
 
 // let PI2 = Math.PI * 2;
 const RADIAN = Math.PI / 180;
@@ -119,16 +120,28 @@ export default function sunburstLayout(
                 let rStart = r0 + rPerLevel * depth;
                 let rEnd = r0 + rPerLevel * (depth + 1);
 
-                const itemModel = node.getModel<SunburstSeriesNodeItemOption>();
-                // @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);
+                const levelModel = seriesModel.getLevelModel(node);
+                if (levelModel) {
+                    const r0 = levelModel.get('r0', true);
+                    if (r0 != null) {
+                        // Compatible with deprecated r0
+                        rStart = parsePercent(r0, size / 2);
+                    }
+                    const r = levelModel.get('r', true);
+                    if (r != null) {
+                        // Compatible with deprecated r
+                        rEnd = parsePercent(r, size / 2);
+                    }
+
+                    // level-specific radius should override that of series
+                    let radius: number | number[] = levelModel.get('radius', true);
+                    if (radius != null) {
+                        if (typeof radius === 'number') {
+                            radius = [radius, radius];
+                        }
+                        rStart = parsePercent(radius[0], size / 2);
+                        rEnd = parsePercent(radius[1], size / 2);
+                    }
                 }
 
                 node.setLayout({