You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2022/11/30 08:48:15 UTC
[echarts] 01/01: fix(polar): support borderRadius for polar bars #17980
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 <zw...@gmail.com>
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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org