fix(polar): support borderRadius for polar bars #17980

src/chart/bar/BarSeries.ts

@@ -53,8 +53,8 @@ interface BarStatesMixin {
 }
 
 export interface BarItemStyleOption<TCbParams = never> extends ItemStyleOption<TCbParams> {
-    // Border radius is not supported for bar on polar
-    borderRadius?: number | number[]
+    // for polar bars, this is used for sector's cornerRadius
+    borderRadius?: (number | string)[] | number | string
 }
 export interface BarDataItemOption extends BarStateOption,
     StatesOptionMixin<BarStateOption, BarStatesMixin>,

src/chart/bar/BarView.ts

@@ -21,6 +21,8 @@ import Path, {PathProps} from 'zrender/src/graphic/Path';
 import Group from 'zrender/src/graphic/Group';
 import {extend, each, map} from 'zrender/src/core/util';
 import {BuiltinTextPosition} from 'zrender/src/core/types';
+import {SectorProps} from 'zrender/src/graphic/shape/Sector';
+import {RectProps} from 'zrender/src/graphic/shape/Rect';
 import {
     Rect,
     Sector,
@@ -66,6 +68,7 @@ import { warn } from '../../util/log';
 import {createSectorCalculateTextPosition, SectorTextPosition, setSectorTextRotation} from '../../label/sectorLabel';
 import { saveOldStyle } from '../../animation/basicTransition';
 import Element from 'zrender/src/Element';
+import { getSectorCornerRadius } from '../helper/sectorHelper';
 
 const mathMax = Math.max;
 const mathMin = Math.min;
@@ -243,6 +246,9 @@ class BarView extends ChartView {
             if (coord.type === 'cartesian2d') {
                 (bgEl as Rect).setShape('r', barBorderRadius);
             }
+            else {
+                (bgEl as Sector).setShape('cornerRadius', barBorderRadius);
+            }
             bgEls[dataIndex] = bgEl;
             return bgEl;
         };
@@ -334,11 +340,14 @@ class BarView extends ChartView {
                         if (coord.type === 'cartesian2d') {
                             (bgEl as Rect).setShape('r', barBorderRadius);
                         }
+                        else {
+                            (bgEl as Sector).setShape('cornerRadius', barBorderRadius);
+                        }
                         bgEls[newIndex] = bgEl;
                     }
                     const bgLayout = getLayout[coord.type](data, newIndex);
                     const shape = createBackgroundShape(isHorizontalOrRadial, bgLayout, coord);
-                    updateProps(bgEl, { shape }, animationModel, newIndex);
+                    updateProps<RectProps | SectorProps>(bgEl, { shape }, animationModel, newIndex);
                 }
 
                 let el = oldData.getItemGraphicEl(oldIndex) as BarPossiblePath;
@@ -971,7 +980,8 @@ function createPolarPositionMapping(isRadial: boolean)
 
 function updateStyle(
     el: BarPossiblePath,
-    data: SeriesData, dataIndex: number,
+    data: SeriesData,
+    dataIndex: number,
     itemModel: Model<BarDataItemOption>,
     layout: RectLayout | SectorLayout,
     seriesModel: BarSeriesModel,
@@ -981,7 +991,19 @@ function updateStyle(
     const style = data.getItemVisual(dataIndex, 'style');
 
     if (!isPolar) {
-        (el as Rect).setShape('r', itemModel.get(['itemStyle', 'borderRadius']) || 0);
+        const borderRadius = itemModel
+            .get(['itemStyle', 'borderRadius']) as number | number[] || 0;
+        (el as Rect).setShape('r', borderRadius);
+    }
+    else if (!seriesModel.get('roundCap')) {
+        const sectorShape = (el as Sector).shape;
+        const cornerRadius = getSectorCornerRadius(
+            itemModel.getModel('itemStyle'),
+            sectorShape,
+            true
+        );
+        extend(sectorShape, cornerRadius);
+        (el as Sector).setShape(sectorShape);
     }
 
     el.useStyle(style);

src/chart/pie/PieView.ts

@@ -31,7 +31,7 @@ import PieSeriesModel, {PieDataItemOption} from './PieSeries';
 import labelLayout from './labelLayout';
 import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
-import { getSectorCornerRadius } from '../helper/pieHelper';
+import { getSectorCornerRadius } from '../helper/sectorHelper';
 import { saveOldStyle } from '../../animation/basicTransition';
 import { getBasicPieLayout } from './pieLayout';
 

src/chart/sunburst/SunburstPiece.ts

@@ -28,7 +28,7 @@ import { PathStyleProps } from 'zrender/src/graphic/Path';
 import { ColorString } from '../../util/types';
 import Model from '../../model/Model';
 import { getECData } from '../../util/innerStore';
-import { getSectorCornerRadius } from '../helper/pieHelper';
+import { getSectorCornerRadius } from '../helper/sectorHelper';
 import {createOrUpdatePatternFromDecal} from '../../util/decal';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import { saveOldStyle } from '../../animation/basicTransition';