diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts index eb838c11ff..de03a19eaf 100644 --- a/src/chart/bar/BarSeries.ts +++ b/src/chart/bar/BarSeries.ts @@ -53,8 +53,8 @@ interface BarStatesMixin { } export interface BarItemStyleOption extends ItemStyleOption { - // 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, diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index 5445a1defc..54cc6ec72e 100644 --- a/src/chart/bar/BarView.ts +++ b/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(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, 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); diff --git a/src/chart/helper/pieHelper.ts b/src/chart/helper/sectorHelper.ts similarity index 100% rename from src/chart/helper/pieHelper.ts rename to src/chart/helper/sectorHelper.ts diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts index 77f5c445e3..cb0e1d6357 100644 --- a/src/chart/pie/PieView.ts +++ b/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'; diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts index 6bd8f597e7..f4e1598dc1 100644 --- a/src/chart/sunburst/SunburstPiece.ts +++ b/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'; diff --git a/test/bar-polar-borderRadius.html b/test/bar-polar-borderRadius.html new file mode 100644 index 0000000000..2bdc1b0146 --- /dev/null +++ b/test/bar-polar-borderRadius.html @@ -0,0 +1,192 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + +