feat(pie): 'itemRadiusScale' function added for pie series

src/chart/pie/PieSeries.ts

@@ -50,10 +50,18 @@ interface PieItemStyleOption<TCbParams = never> extends ItemStyleOption<TCbParam
     // which means that innerCornerRadius is 20% of the innerRadius
     // and outerCornerRadius is half of outerRadius.
     borderRadius?: (number | string)[] | number | string
+
+    // The radius of each pie item can be adjusted depends on this value.
+    // Value (or returned value in case of function) should be a decimal between 0 and 1,
+    // where 0 means the minimum outer radius from the initially calculated radius of the element,
+    // and 1 means 100% of initial outer radius.
+    radiusPercent?: number | ((dataParams: PieCallbackDataParams) => number)
 }
 
 export interface PieCallbackDataParams extends CallbackDataParams {
     percent: number
+    max?: number
+    sum?: number
 }
 
 export interface PieStateOption<TCbParams = never> {
@@ -131,6 +139,9 @@ export interface PieSeriesOption extends
     showEmptyCircle?: boolean;
     emptyCircleStyle?: PieItemStyleOption;
 
+    showBackground?: boolean
+    backgroundStyle?: PieItemStyleOption
+
     data?: (OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[]
 }
 
@@ -179,12 +190,13 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
      */
     getDataParams(dataIndex: number): PieCallbackDataParams {
         const data = this.getData();
+        const valueDim = data.mapDimension('value');
         // update seats when data is changed
         const dataInner = innerData(data);
         let seats = dataInner.seats;
         if (!seats) {
             const valueList: number[] = [];
-            data.each(data.mapDimension('value'), function (value: number) {
+            data.each(valueDim, function (value: number) {
                 valueList.push(value);
             });
             seats = dataInner.seats = getPercentSeats(valueList, data.hostModel.get('percentPrecision'));
@@ -193,6 +205,13 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
         // seats may be empty when sum is 0
         params.percent = seats[dataIndex] || 0;
         params.$vars.push('percent');
+
+        const radiusPercent = data.hostModel.get(['itemStyle', 'radiusPercent']);
+        if (radiusPercent != null) {
+            // useful variables for custom percentage calculations in formatters etc.
+            params.max = data.getDataExtent(valueDim)[1];
+            params.sum = data.getSum(valueDim);
+        }
         return params;
     }
 
@@ -299,6 +318,11 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
             opacity: 1
         },
 
+        showBackground: false,
+        backgroundStyle: {
+            opacity: 1
+        },
+
         labelLayout: {
             // Hide the overlapped label.
             hideOverlap: true

src/chart/pie/PieView.ts

@@ -19,13 +19,14 @@
 */
 
 
-import { extend, retrieve3 } from 'zrender/src/core/util';
+import { extend, defaults, retrieve3 } from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
 import ChartView from '../../view/Chart';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import { Payload, ColorString } from '../../util/types';
+import {SectorProps} from 'zrender/src/graphic/shape/Sector';
 import SeriesData from '../../data/SeriesData';
 import PieSeriesModel, {PieDataItemOption} from './PieSeries';
 import labelLayout from './labelLayout';
@@ -236,6 +237,9 @@ class PieView extends ChartView {
     private _data: SeriesData;
     private _emptyCircleSector: graphic.Sector;
 
+    private _backgroundGroup: graphic.Group;
+    private _backgroundEls: graphic.Sector[] = [];
+
     render(seriesModel: PieSeriesModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload): void {
         const data = seriesModel.getData();
 
@@ -268,12 +272,43 @@ class PieView extends ChartView {
             group.add(sector);
         }
 
+
+        const animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
+        const drawBackground = seriesModel.get('showBackground', true);
+        const basicOuterRadius = getBasicPieLayout(seriesModel, api).r;
+        const bgStyle = seriesModel.getModel('backgroundStyle').getItemStyle();
+
+        const bgEls: PieView['_backgroundEls'] = [];
+        const existBgEls = this._backgroundEls;
+
+        function createBackground(idx: number) {
+            const bgEl = new graphic.Sector({
+                shape: data.getItemLayout(idx),
+                silent: true,
+                z2: 0
+            });
+            bgEl.setShape('r', basicOuterRadius);
+
+            const style = data.getItemVisual(idx, 'style');
+            const visualColor = style && style.fill as ColorString;
+            bgEl.useStyle(extend(
+                // inherit item color if no background color specified
+                {fill: visualColor},
+                bgStyle
+            ));
+            return bgEl;
+        }
+
         data.diff(oldData)
             .add(function (idx) {
                 const piePiece = new PiePiece(data, idx, startAngle);
 
                 data.setItemGraphicEl(idx, piePiece);
 
+                if (drawBackground) {
+                    bgEls[idx] = createBackground(idx);
+                }
+
                 group.add(piePiece);
             })
             .update(function (newIdx, oldIdx) {
@@ -283,6 +318,15 @@ class PieView extends ChartView {
 
                 piePiece.off('click');
 
+                if (drawBackground) {
+                    bgEls[newIdx] = existBgEls[oldIdx] || createBackground(newIdx);
+                    const shape = defaults(
+                        {r: basicOuterRadius},
+                        data.getItemLayout(newIdx)
+                    );
+                    graphic.updateProps<SectorProps>(bgEls[newIdx], {shape}, animationModel, newIdx);
+                }
+
                 group.add(piePiece);
                 data.setItemGraphicEl(newIdx, piePiece);
             })
@@ -292,6 +336,15 @@ class PieView extends ChartView {
             })
             .execute();
 
+        this._backgroundGroup ||= new graphic.Group();
+        this._backgroundGroup.removeAll();
+
+        for (const bgEl of bgEls) {
+            this._backgroundGroup.add(bgEl);
+        }
+        group.add(this._backgroundGroup);
+        this._backgroundEls = bgEls;
+
         labelLayout(seriesModel);
 
         // Always use initial animation.

src/chart/pie/pieLayout.ts

@@ -114,6 +114,7 @@ export default function pieLayout(
         const clockwise = seriesModel.get('clockwise');
 
         const roseType = seriesModel.get('roseType');
+        const radiusPercent = seriesModel.get(['itemStyle', 'radiusPercent']);
         const stillShowZeroSum = seriesModel.get('stillShowZeroSum');
 
         // [0...max]
@@ -188,6 +189,25 @@ export default function pieLayout(
                 actualEndAngle = endAngle - halfPadAngle;
             }
 
+            let outerRadius = r;
+            if (radiusPercent != null) {
+                let scale = 0;
+                if (zrUtil.isFunction(radiusPercent)) {
+                    // calculate the radius of the current pie item based on the scale from the user-defined function
+                    scale = radiusPercent(seriesModel.getDataParams(idx)) || 0;
+                }
+                else if (zrUtil.isNumber(radiusPercent)) {
+                    scale = radiusPercent;
+                }
+                // scale should always be between 0 and 1
+                scale = Math.max(0, Math.min(scale, 1));
+                // r0 is used here to scale radius properly in case of 'donut' style.
+                outerRadius = (r - r0) * scale + r0;
+            }
+            else if (roseType) {
+                outerRadius = linearMap(value, extent, [r0, r]);
+            }
+
             data.setItemLayout(idx, {
                 angle: angle,
                 startAngle: actualStartAngle,
@@ -196,9 +216,7 @@ export default function pieLayout(
                 cx: cx,
                 cy: cy,
                 r0: r0,
-                r: roseType
-                    ? linearMap(value, extent, [r0, r])
-                    : r
+                r: outerRadius
             });
 
             currentAngle = endAngle;