Merge pull request #16298 from apache/enhance-pie-borderRadius

feat(pie/sunburst): supports configuring any one border radius.
apache · Jan 7, 2022 · cf09ed9 · cf09ed9
2 parents d41bf8b + 03e9f0a
commit cf09ed9
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 12 deletions.
diff --git a/src/chart/helper/pieHelper.ts b/src/chart/helper/pieHelper.ts
@@ -17,9 +17,9 @@
 * under the License.
 */
 
-import Model from '../../model/Model';
-import Sector from 'zrender/src/graphic/shape/Sector';
-import { isArray } from 'zrender/src/core/util';
+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(
@@ -29,13 +29,13 @@ export function getSectorCornerRadius(
 ) {
     let cornerRadius = model.get('borderRadius');
     if (cornerRadius == null) {
-        return zeroIfNull ? {innerCornerRadius: 0, cornerRadius: 0} : null;
+        return zeroIfNull ? { cornerRadius: 0 } : null;
     }
     if (!isArray(cornerRadius)) {
-        cornerRadius = [cornerRadius, cornerRadius];
+        cornerRadius = [cornerRadius, cornerRadius, cornerRadius, cornerRadius];
     }
+    const dr = Math.abs(shape.r || 0 - shape.r0 || 0);
     return {
-        innerCornerRadius: parsePercent(cornerRadius[0], shape.r0),
-        cornerRadius: parsePercent(cornerRadius[1], shape.r)
+        cornerRadius: map(cornerRadius, cr => parsePercent(cr, dr))
     };
 }
diff --git 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';
 
 /**
@@ -138,11 +138,10 @@ class PiePiece extends graphic.Sector {
 
         this._updateLabel(seriesModel, data, idx);
 
-        sector.ensureState('emphasis').shape = {
+        sector.ensureState('emphasis').shape = extend({
             r: layout.r + (emphasisModel.get('scale')
-                ? (emphasisModel.get('scaleSize') || 0) : 0),
-            ...getSectorCornerRadius(emphasisModel.getModel('itemStyle'), layout)
-        };
+                ? (emphasisModel.get('scaleSize') || 0) : 0)
+        }, getSectorCornerRadius(emphasisModel.getModel('itemStyle'), layout));
         extend(sector.ensureState('select'), {
             x: dx,
             y: dy,

diff --git a/test/pie-cornerRadius.html b/test/pie-cornerRadius.html
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
diff --git a/test/runTest/actions/pie-cornerRadius.json b/test/runTest/actions/pie-cornerRadius.json