You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/12/28 12:42:45 UTC

[echarts] branch enhance-pie-borderRadius created (now 6edfa87)

This is an automated email from the ASF dual-hosted git repository.

wangzx pushed a change to branch enhance-pie-borderRadius
in repository https://gitbox.apache.org/repos/asf/echarts.git.


      at 6edfa87  feat(pie): the sector supports arbitrary corner radius.

This branch includes the following new commits:

     new 6edfa87  feat(pie): the sector supports arbitrary corner radius.

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[echarts] 01/01: feat(pie): the sector supports arbitrary corner radius.

Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

wangzx pushed a commit to branch enhance-pie-borderRadius
in repository https://gitbox.apache.org/repos/asf/echarts.git

commit 6edfa8744fc3e9808a64bc9fb06609fc97255df2
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Tue Dec 28 20:40:08 2021 +0800

    feat(pie): the sector supports arbitrary corner radius.
---
 src/chart/helper/pieHelper.ts       | 14 +++-----------
 src/chart/pie/PieView.ts            | 10 +++++-----
 src/chart/sunburst/SunburstPiece.ts |  4 ++--
 test/pie-cornerRadius.html          | 19 +++++++++++++++++++
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/chart/helper/pieHelper.ts b/src/chart/helper/pieHelper.ts
index 0e579c8..efbbd08 100644
--- a/src/chart/helper/pieHelper.ts
+++ b/src/chart/helper/pieHelper.ts
@@ -18,24 +18,16 @@
 */
 
 import Model from '../../model/Model';
-import Sector from 'zrender/src/graphic/shape/Sector';
-import { isArray } 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');
+    const cornerRadius = model.get('borderRadius');
     if (cornerRadius == null) {
-        return zeroIfNull ? {innerCornerRadius: 0, cornerRadius: 0} : null;
-    }
-    if (!isArray(cornerRadius)) {
-        cornerRadius = [cornerRadius, cornerRadius];
+        return zeroIfNull ? { cornerRadius: 0 } : null;
     }
     return {
-        innerCornerRadius: parsePercent(cornerRadius[0], shape.r0),
-        cornerRadius: parsePercent(cornerRadius[1], shape.r)
+        cornerRadius: cornerRadius as number | number[]
     };
 }
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 2b17747..d9c3d05 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -32,7 +32,7 @@ import labelLayout from './labelLayout';
 import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getSectorCornerRadius } from '../helper/pieHelper';
-import {saveOldStyle} from '../../animation/basicTrasition';
+import { saveOldStyle } from '../../animation/basicTrasition';
 import { getBasicPieLayout } from './pieLayout';
 
 /**
@@ -62,7 +62,7 @@ class PiePiece extends graphic.Sector {
         // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified.
         // see `setItemLayout` in `pieLayout.ts`.
         const sectorShape = extend(
-            getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true),
+            getSectorCornerRadius(itemModel.getModel('itemStyle'), true),
             layout
         );
 
@@ -141,15 +141,15 @@ class PiePiece extends graphic.Sector {
         sector.ensureState('emphasis').shape = {
             r: layout.r + (emphasisModel.get('scale')
                 ? (emphasisModel.get('scaleSize') || 0) : 0),
-            ...getSectorCornerRadius(emphasisModel.getModel('itemStyle'), layout)
+            ...getSectorCornerRadius(emphasisModel.getModel('itemStyle'))
         };
         extend(sector.ensureState('select'), {
             x: dx,
             y: dy,
-            shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle']), layout)
+            shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle']))
         });
         extend(sector.ensureState('blur'), {
-            shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle']), layout)
+            shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle']))
         });
 
         const labelLine = sector.getTextGuideLine();
diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts
index b5cfd99..9ad140c 100644
--- a/src/chart/sunburst/SunburstPiece.ts
+++ b/src/chart/sunburst/SunburstPiece.ts
@@ -99,7 +99,7 @@ class SunburstPiece extends graphic.Sector {
             normalStyle.decal = createOrUpdatePatternFromDecal(decal, api);
         }
 
-        const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), sectorShape, true);
+        const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), true);
         zrUtil.extend(sectorShape, cornerRadius);
 
         zrUtil.each(SPECIAL_STATES, function (stateName) {
@@ -107,7 +107,7 @@ class SunburstPiece extends graphic.Sector {
             const itemStyleModel = itemModel.getModel([stateName, 'itemStyle']);
             state.style = itemStyleModel.getItemStyle();
             // border radius
-            const cornerRadius = getSectorCornerRadius(itemStyleModel, sectorShape);
+            const cornerRadius = getSectorCornerRadius(itemStyleModel);
             if (cornerRadius) {
                 state.shape = cornerRadius;
             }
diff --git a/test/pie-cornerRadius.html b/test/pie-cornerRadius.html
index c133c2b..c572095 100644
--- a/test/pie-cornerRadius.html
+++ b/test/pie-cornerRadius.html
@@ -321,6 +321,25 @@ under the License.
                         }
                     },
                     {
+                        text: 'set radius for all corners',
+                        onclick: function () {
+                            isCircular = true;
+                            var val = [5, 15, 0, 20];
+                            chart.setOption({
+                                title: {
+                                    text: 'cornerRadius [' + val + ']'
+                                },
+                                series: [{
+                                    radius: ['40%', '75%'],
+                                    itemStyle: { borderRadius: val },
+                                    emphasis: {
+                                        itemStyle: { borderRadius: [20, 5, 10, 30] }
+                                    }
+                                }]
+                            });
+                        }
+                    },
+                    {
                         text: 'reset',
                         onclick: function () {
                             outerCornerRadius = 5;

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org