From c5fcf823c94fab88739ed91ba6546da375c8e6ed Mon Sep 17 00:00:00 2001 From: Ovilia Date: Fri, 10 Sep 2021 13:12:38 +0800 Subject: [PATCH 1/2] fix(sunburst): radius in levels --- src/chart/sunburst/SunburstSeries.ts | 19 +++++++++++++++- src/chart/sunburst/sunburstLayout.ts | 33 +++++++++++++++++++--------- 2 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/chart/sunburst/SunburstSeries.ts b/src/chart/sunburst/SunburstSeries.ts index f7d801c0a9..06ba99abc2 100644 --- 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 { + + radius?: number | number[] + /** + * @deprecated use radius instead + */ + r?: number + /** + * @deprecated use radius instead + */ + r0?: number + highlight?: { itemStyle?: SunburstItemStyleOption label?: SunburstLabelOption @@ -152,6 +163,7 @@ class SunburstSeriesModel extends SeriesModel { ignoreStyleOnData = true; private _viewRoot: TreeNode; + private _levelModels: Model[]; getInitialData(option: SunburstSeriesOption, ecModel: GlobalModel) { // Create a virtual root. @@ -159,9 +171,10 @@ class SunburstSeriesModel extends SeriesModel { 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 { 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 index b2a15e86c5..f6c2c97c97 100644 --- 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(); - // @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({ From dd1890b851a35f6357096957068962bf278f81eb Mon Sep 17 00:00:00 2001 From: Ovilia Date: Fri, 10 Sep 2021 14:08:22 +0800 Subject: [PATCH 2/2] fix(sunburst): improve code --- src/chart/sunburst/SunburstSeries.ts | 14 +++++++------- src/chart/sunburst/sunburstLayout.ts | 25 ++++++++----------------- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/chart/sunburst/SunburstSeries.ts b/src/chart/sunburst/SunburstSeries.ts index 06ba99abc2..344cbc6e4d 100644 --- a/src/chart/sunburst/SunburstSeries.ts +++ b/src/chart/sunburst/SunburstSeries.ts @@ -95,15 +95,15 @@ export interface SunburstSeriesNodeItemOption extends export interface SunburstSeriesLevelOption extends SunburstStateOption, StatesOptionMixin { - radius?: number | number[] + radius?: (number | string)[] /** * @deprecated use radius instead */ - r?: number + r?: number | string /** * @deprecated use radius instead */ - r0?: number + r0?: number | string highlight?: { itemStyle?: SunburstItemStyleOption @@ -171,10 +171,10 @@ class SunburstSeriesModel extends SeriesModel { completeTreeValue(root); - this._levelModels = zrUtil.map(option.levels || [], function (levelDefine) { - return new Model(levelDefine, this, ecModel); - }, this); - const levelModels = this._levelModels; + const levelModels = this._levelModels + = zrUtil.map(option.levels || [], function (levelDefine) { + return new Model(levelDefine, this, ecModel); + }, this); // Make sure always a new tree is created when setOption, // in TreemapView, we check whether oldTree === newTree diff --git a/src/chart/sunburst/sunburstLayout.ts b/src/chart/sunburst/sunburstLayout.ts index f6c2c97c97..5578eadc9d 100644 --- a/src/chart/sunburst/sunburstLayout.ts +++ b/src/chart/sunburst/sunburstLayout.ts @@ -122,26 +122,17 @@ export default function sunburstLayout( 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); - } + let r0 = levelModel.get('r0', true); + let r = levelModel.get('r', true); + let radius = levelModel.get('radius', true); - // 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); + r0 = radius[0]; + r = radius[1]; } + + (r0 != null) && (rStart = parsePercent(r0, size / 2)); + (r != null) && (rEnd = parsePercent(r, size / 2)); } node.setLayout({