This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-17980 in repository https://gitbox.apache.org/repos/asf/echarts.git
commit bd767e20f0fc8ba227e3c430ac529d107ab6fe32 Author: Ovilia <[email protected]> AuthorDate: Wed Nov 30 16:46:33 2022 +0800 fix(polar): support borderRadius for polar bars #17980 --- src/chart/bar/BarSeries.ts | 4 +- src/chart/bar/BarView.ts | 23 ++++- src/chart/helper/pieHelper.ts | 41 -------- src/chart/pie/PieView.ts | 2 +- src/chart/sunburst/SunburstPiece.ts | 2 +- test/bar-polar-borderRadius.html | 180 ++++++++++++++++++++++++++++++++++++ 6 files changed, 204 insertions(+), 48 deletions(-) diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts index eb838c11f..de03a19ea 100644 --- a/src/chart/bar/BarSeries.ts +++ b/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>, diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index 0de06c481..346f3d9da 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; @@ -338,7 +341,7 @@ class BarView extends ChartView { } 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 +974,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 +985,20 @@ 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 sector = el as Sector; + const sectorShape = (el as Sector).shape; + const cornerRadius = getSectorCornerRadius( + itemModel.getModel('itemStyle'), + sectorShape, + true + ); + extend(sectorShape, cornerRadius); + sector.setShape(sectorShape); } el.useStyle(style); diff --git a/src/chart/helper/pieHelper.ts b/src/chart/helper/pieHelper.ts deleted file mode 100644 index e55ded398..000000000 --- a/src/chart/helper/pieHelper.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* -* Licensed to the Apache Software Foundation (ASF) under one -* or more contributor license agreements. See the NOTICE file -* distributed with this work for additional information -* regarding copyright ownership. The ASF licenses this file -* to you under the Apache License, Version 2.0 (the -* "License"); you may not use this file except in compliance -* with the License. You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, -* software distributed under the License is distributed on an -* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -* KIND, either express or implied. See the License for the -* specific language governing permissions and limitations -* under the License. -*/ - -import type Model from '../../model/Model'; -import type Sector from 'zrender/src/graphic/shape/Sector'; -import { isArray, map } from 'zrender/src/core/util'; -import { parsePercent } from 'zrender/src/contain/text'; - -export function getSectorCornerRadius( - model: Model<{ borderRadius?: string | number | (string | number)[] }>, - shape: Pick<Sector['shape'], 'r0' | 'r'>, - zeroIfNull?: boolean -) { - let cornerRadius = model.get('borderRadius'); - if (cornerRadius == null) { - return zeroIfNull ? { cornerRadius: 0 } : null; - } - if (!isArray(cornerRadius)) { - cornerRadius = [cornerRadius, cornerRadius, cornerRadius, cornerRadius]; - } - const dr = Math.abs(shape.r || 0 - shape.r0 || 0); - return { - cornerRadius: map(cornerRadius, cr => parsePercent(cr, dr)) - }; -} diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts index 77f5c445e..cb0e1d635 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 873a686f1..8c7be8c1a 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 000000000..9fbf9e973 --- /dev/null +++ b/test/bar-polar-borderRadius.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> + + +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <script src="lib/simpleRequire.js"></script> + <script src="lib/config.js"></script> + <script src="lib/jquery.min.js"></script> + <script src="lib/facePrint.js"></script> + <script src="lib/testHelper.js"></script> + <!-- <script src="ut/lib/canteen.js"></script> --> + <link rel="stylesheet" href="lib/reset.css" /> + </head> + <body> + <style> + </style> + + + + <div id="main0"></div> + <div id="main1"></div> + <div id="main2"></div> + + + + <script> + require([ + 'echarts', + // 'map/js/china', + // './data/nutrients.json' + ], function (echarts) { + var option; + + option = { + angleAxis: { + type: 'category', + data: ['a', 'b', 'c'], + z: 10 + }, + tooltip: { + }, + radiusAxis: { + }, + polar: { + radius: [50, 150] + }, + series: [{ + type: 'bar', + data: [2, -1, 3], + itemStyle: { + borderRadius: [5, 10, 20, 30] + }, + coordinateSystem: 'polar' + }] + }; + + var chart = testHelper.create(echarts, 'main0', { + title: [ + 'borderRadius: [5, 10, 20, 30]' + ], + option: option, + // height: 300, + // recordCanvas: true, + }); + }); + </script> + + <script> + require([ + 'echarts', + // 'map/js/china', + // './data/nutrients.json' + ], function (echarts) { + var option; + + option = { + angleAxis: { + type: 'category', + data: ['a', 'b', 'c'], + z: 10 + }, + tooltip: { + }, + radiusAxis: { + }, + polar: { + radius: [50, 150] + }, + series: [{ + type: 'bar', + data: [2, -1, 3], + itemStyle: { + borderRadius: [10, 20] + }, + coordinateSystem: 'polar' + }] + }; + + var chart = testHelper.create(echarts, 'main1', { + title: [ + 'borderRadius: [10, 20]' + ], + option: option, + // height: 300, + // recordCanvas: true, + }); + }); + </script> + + <script> + require([ + 'echarts', + // 'map/js/china', + // './data/nutrients.json' + ], function (echarts) { + var option; + + option = { + angleAxis: { + type: 'category', + data: ['a', 'b', 'c'], + z: 10 + }, + tooltip: { + }, + radiusAxis: { + }, + polar: { + radius: [50, 150] + }, + series: [{ + type: 'bar', + data: [{ + value: 2, + itemStyle: { + borderRadius: [20, 5] + } + }, -1, 3], + itemStyle: { + borderRadius: 10 + }, + coordinateSystem: 'polar' + }] + }; + + var chart = testHelper.create(echarts, 'main2', { + title: [ + 'borderRadius: 10', + 'value 2 borderRadius: [20, 5]' + ], + option: option, + // height: 300, + // recordCanvas: true, + }); + }); + </script> + + + </body> +</html> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
