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 2021/11/09 10:15:52 UTC
[echarts] branch fix-pie-label created (now 4bcace4)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch fix-pie-label
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at 4bcace4 test(pie): add test case
This branch includes the following new commits:
new 06a3c7f fix(pie): label position with rich text #16023
new 4bcace4 test(pie): add test case
The 2 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] 02/02: test(pie): add test case
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-pie-label
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 4bcace439918b2d3763325a3749f327eb7d851e9
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Nov 9 18:14:35 2021 +0800
test(pie): add test case
---
src/chart/pie/labelLayout.ts | 1 -
test/pie-label.html | 165 +++++++++++++++++++++++++++++++++++++++++++
2 files changed, 165 insertions(+), 1 deletion(-)
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index f0a1d59..1143823 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -218,7 +218,6 @@ function avoidOverlap(
layout.rect.y -= (block.contentHeight - layout.rect.height) / 2;
layout.rect.width = block.width;
layout.rect.height = block.height;
- console.log(block,layout.rect.width, layout.rect.height);
}
const dist = linePoints[1][0] - linePoints[2][0];
diff --git a/test/pie-label.html b/test/pie-label.html
index 9041d2d..e5bf5e5 100644
--- a/test/pie-label.html
+++ b/test/pie-label.html
@@ -37,6 +37,9 @@ under the License.
background: #146402;
color: #fff;
}
+ #main9, #main10 {
+ border: 1px solid red;
+ }
</style>
@@ -49,6 +52,8 @@ under the License.
<div id="main6"></div>
<div id="main7"></div>
<div id="main8"></div>
+ <div id="main9"></div>
+ <div id="main10"></div>
<script>
@@ -770,5 +775,165 @@ under the License.
});
</script>
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var data = [
+ {
+ name: 'Apples',
+ value: 138
+ },
+ {
+ name: '{a|Neque porro quisquam est qui dolorem}',
+ value: 48
+ },
+ {
+ name: 'Oranges',
+ value: 40
+ },
+ {
+ name: 'Pears',
+ value: 32
+ },
+ {
+ name: 'quia dolorsit amet consectetur adipisci',
+ value: 27
+ }
+ ];
+ var option = {
+ series: [
+ {
+ type: 'pie',
+ radius: '80%',
+ center: ['50%', '50%'],
+ data: data,
+ label: {
+ position: 'outer',
+ alignTo: 'edge',
+ margin: 20,
+ fontSize: 30,
+ padding: [5, 20],
+ backgroundColor: 'rgba(0, 0, 255, 0.2)',
+ rich: {
+ a: {
+ fontSize: 46,
+ borderColor: 'rgba(0, 0, 255, 0.8)',
+ borderWidth: 1,
+ borderRadius: 10
+ }
+ },
+ overflow: 'break'
+ },
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 0,
+ animationDuration: 0
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main9', {
+ title: 'Labels (rich text) should not be outside of the canvas',
+ option: option,
+ info: {
+ label: {
+ position: 'outer',
+ alignTo: 'edge',
+ margin: 20,
+ fontSize: 30,
+ padding: [5, 20],
+ backgroundColor: 'rgba(0, 0, 255, 0.2)',
+ rich: {
+ a: {
+ fontSize: 46,
+ borderColor: 'rgba(0, 0, 255, 0.8)',
+ borderWidth: 1,
+ borderRadius: 10
+ }
+ },
+ overflow: 'break'
+ }
+ }
+ });
+ });
+
+ </script>
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var data = [
+ {
+ name: 'Apples',
+ value: 138
+ },
+ {
+ name: 'Neque porro quisquam\nest qui\ndolorem',
+ value: 48
+ },
+ {
+ name: 'Oranges',
+ value: 40
+ },
+ {
+ name: 'Pears',
+ value: 32
+ },
+ {
+ name: 'quia dolorsit amet consectetur adipisci',
+ value: 27
+ }
+ ];
+ var option = {
+ series: [
+ {
+ type: 'pie',
+ radius: '80%',
+ center: ['50%', '50%'],
+ data: data,
+ label: {
+ position: 'outer',
+ alignTo: 'edge',
+ margin: 20,
+ fontSize: 30,
+ padding: [5, 20],
+ backgroundColor: 'rgba(0, 0, 255, 0.2)',
+ overflow: 'break'
+ },
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 0,
+ animationDuration: 0
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main10', {
+ title: 'Labels (plain text) should not be outside of the canvas',
+ option: option,
+ info: {
+ label: {
+ position: 'outer',
+ alignTo: 'edge',
+ margin: 20,
+ fontSize: 30,
+ padding: [5, 20],
+ backgroundColor: 'rgba(0, 0, 255, 0.2)',
+ overflow: 'break'
+ }
+ }
+ });
+ });
+
+ </script>
+
+
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/02: fix(pie): label position with rich text #16023
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-pie-label
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 06a3c7f316c03185d9ef4c48c51d64ec599ba13e
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Nov 9 18:11:22 2021 +0800
fix(pie): label position with rich text #16023
---
src/chart/pie/labelLayout.ts | 38 +++++++++++++++++++++++++++++---------
1 file changed, 29 insertions(+), 9 deletions(-)
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index 14be831..f0a1d59 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -25,9 +25,10 @@ import { HorizontalAlign, ZRTextAlign } from '../../util/types';
import { Sector, Polyline, Point } from '../../util/graphic';
import ZRText from 'zrender/src/graphic/Text';
import BoundingRect, {RectLike} from 'zrender/src/core/BoundingRect';
-import { each } from 'zrender/src/core/util';
+import { each, extend } from 'zrender/src/core/util';
import { limitTurnAngle, limitSurfaceAngle } from '../../label/labelGuideHelper';
import { shiftLayoutOnY } from '../../label/labelLayoutHelper';
+import { parsePlainText, parseRichText, RichTextContentBlock } from 'zrender/src/graphic/helper/parseText';
const RADIAN = Math.PI / 180;
@@ -160,9 +161,6 @@ function avoidOverlap(
}
}
- adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight, viewLeft, viewTop, rightmostX);
- adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight, viewLeft, viewTop, leftmostX);
-
for (let i = 0; i < labelLayoutList.length; i++) {
const layout = labelLayoutList[i];
const label = layout.label;
@@ -195,13 +193,32 @@ function avoidOverlap(
}
}
if (targetTextWidth < layout.rect.width) {
- // TODOTODO
- // layout.text = textContain.truncateText(layout.text, targetTextWidth, layout.font);
- layout.label.style.width = targetTextWidth;
+ const style = layout.label.style;
+ /**
+ * Parsing the rich text to get the constraining width.
+ *
+ * Consider the case where text is "{aabbcc|real names}", its
+ * width is not determined by the characters of this string but
+ * the parsed text in varied lines. Let's assume in this case,
+ * "real" and "names" are separated into two lines due to
+ * `overflow` being `'break'`. `style.width` should be the
+ * `contentWidth` of the parsed rich text, which is also the
+ * bigger one of the width of "real" and "names".
+ */
+ const parstText = style.rich ? parseRichText : parsePlainText;
+ const block = parstText(style.text, extend(style, {
+ width: targetTextWidth
+ }));
+ const padding = style.padding as number[];
+ const paddingH = padding ? padding[1] + padding[3] : 0;
+ style.width = block.contentWidth;
if (layout.labelAlignTo === 'edge') {
- realTextWidth = targetTextWidth;
- // realTextWidth = textContain.getWidth(layout.text, layout.font);
+ realTextWidth = block.contentWidth + paddingH;
}
+ layout.rect.y -= (block.contentHeight - layout.rect.height) / 2;
+ layout.rect.width = block.width;
+ layout.rect.height = block.height;
+ console.log(block,layout.rect.width, layout.rect.height);
}
const dist = linePoints[1][0] - linePoints[2][0];
@@ -226,6 +243,9 @@ function avoidOverlap(
linePoints[1][1] = linePoints[2][1] = label.y;
}
}
+
+ adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight, viewLeft, viewTop, rightmostX);
+ adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight, viewLeft, viewTop, leftmostX);
}
function isPositionCenter(sectorShape: LabelLayout) {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org