This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-sunburst-label
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit d9e67dd6c8c10671f4f497c2b737e4db2a48f8c9
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Sun Oct 8 18:20:39 2023 +0800
fix(sunburst): label rotation flipping
---
src/chart/sunburst/SunburstPiece.ts | 56 ++++++++++++-------------------------
test/sunburst-label-align.html | 40 ++++++++++++++++++++++++--
test/sunburst-label.html | 7 ++++-
3 files changed, 61 insertions(+), 42 deletions(-)
diff --git a/src/chart/sunburst/SunburstPiece.ts
b/src/chart/sunburst/SunburstPiece.ts
index 091d8a1d7..92114e11e 100644
--- a/src/chart/sunburst/SunburstPiece.ts
+++ b/src/chart/sunburst/SunburstPiece.ts
@@ -215,14 +215,20 @@ class SunburstPiece extends graphic.Sector {
let r;
const labelPadding = getLabelAttr(labelStateModel, 'distance') ||
0;
let textAlign = getLabelAttr(labelStateModel, 'align');
+ const rotateType = getLabelAttr(labelStateModel, 'rotate');
+ const flipStartAngle = Math.PI * 0.5;
+ const flipEndAngle = Math.PI * 1.5;
+ const midAngleNormal = normalizeRadian(rotateType === 'tangential'
? Math.PI / 2 - midAngle : midAngle);
+
+ // For text that is up-side down, rotate 180 degrees to make sure
+ // it's readable
+ const needsFlip = midAngleNormal > flipStartAngle
+ && !isRadianAroundZero(midAngleNormal - flipStartAngle)
+ && midAngleNormal < flipEndAngle;
+
if (labelPosition === 'outside') {
r = layout.r + labelPadding;
- if (layout.clockwise) {
- textAlign = midAngle > Math.PI / 2 ? 'right' : 'left';
- }
- else {
- textAlign = midAngle > -Math.PI * 3 / 2 ? 'right' : 'left';
- }
+ textAlign = needsFlip ? 'right' : 'left';
}
else {
if (!textAlign || textAlign === 'center') {
@@ -237,29 +243,11 @@ class SunburstPiece extends graphic.Sector {
}
else if (textAlign === 'left') {
r = layout.r0 + labelPadding;
- if (layout.clockwise) {
- if (midAngle > Math.PI / 2 &&
!isRadianAroundZero(midAngle - Math.PI / 2)) {
- textAlign = 'right';
- }
- }
- else {
- if (midAngle > -Math.PI * 3 / 2 &&
!isRadianAroundZero(midAngle - Math.PI / 2)) {
- textAlign = 'right';
- }
- }
+ textAlign = needsFlip ? 'right' : 'left';
}
else if (textAlign === 'right') {
r = layout.r - labelPadding;
- if (layout.clockwise) {
- if (midAngle > Math.PI / 2 &&
!isRadianAroundZero(midAngle - Math.PI / 2)) {
- textAlign = 'left';
- }
- }
- else {
- if (midAngle > -Math.PI * 3 / 2 &&
!isRadianAroundZero(midAngle - Math.PI / 2)) {
- textAlign = 'left';
- }
- }
+ textAlign = needsFlip ? 'left' : 'right';
}
}
@@ -269,22 +257,14 @@ class SunburstPiece extends graphic.Sector {
state.x = r * dx + layout.cx;
state.y = r * dy + layout.cy;
- const rotateType = getLabelAttr(labelStateModel, 'rotate');
let rotate = 0;
if (rotateType === 'radial') {
- rotate = normalizeRadian(-midAngle);
- if (((rotate > Math.PI / 2 && rotate < Math.PI * 1.5))) {
- rotate += Math.PI;
- }
+ rotate = normalizeRadian(-midAngle)
+ + (needsFlip ? Math.PI : 0);
}
else if (rotateType === 'tangential') {
- rotate = Math.PI / 2 - midAngle;
- if (rotate > Math.PI / 2) {
- rotate -= Math.PI;
- }
- else if (rotate < -Math.PI / 2) {
- rotate += Math.PI;
- }
+ rotate = normalizeRadian(Math.PI / 2 - midAngle)
+ + (needsFlip ? Math.PI : 0);
}
else if (zrUtil.isNumber(rotateType)) {
rotate = rotateType * Math.PI / 180;
diff --git a/test/sunburst-label-align.html b/test/sunburst-label-align.html
index 0bb6e3a63..4522c75ba 100644
--- a/test/sunburst-label-align.html
+++ b/test/sunburst-label-align.html
@@ -41,9 +41,7 @@ under the License.
<div id="main0"></div>
<div id="main1"></div>
-
-
-
+ <div id="main2"></div>
@@ -1158,6 +1156,42 @@ under the License.
});
});
</script>
+
+
+
+ <script>
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var option;
+
+ option = {
+ series: [
+ {
+ type: 'sunburst',
+ data: new Array(11).fill(0).map((it, index) => ({
+ name: 'aaa' + index,
+ value: 1
+ })),
+ levels: [{}, { r0: 40, r: 100, label: { position:
'outside'}}]
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Put label in the center if it\'s a circle'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
</body>
</html>
\ No newline at end of file
diff --git a/test/sunburst-label.html b/test/sunburst-label.html
index 51f2c14ef..7895a98f8 100644
--- a/test/sunburst-label.html
+++ b/test/sunburst-label.html
@@ -197,7 +197,12 @@ under the License.
radius: [0, '90%'],
label: {
rotate: 'radial'
- }
+ },
+ levels: [{}, {
+ label: {
+ rotate: 'tangential'
+ }
+ }]
}
};
var chart = testHelper.create(echarts, 'main1', {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
