You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/10/13 11:04:39 UTC
[incubator-echarts] branch next updated: fix(pie): fix label may
still been layout if not shown.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new 3d19f5b fix(pie): fix label may still been layout if not shown.
3d19f5b is described below
commit 3d19f5b5707196897046d18bef0bee9025a6a663
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Oct 13 19:04:15 2020 +0800
fix(pie): fix label may still been layout if not shown.
---
src/chart/pie/labelLayout.ts | 16 ++++
src/label/labelStyle.ts | 3 +-
test/label-layout.html | 94 +++++++++++++++++++++-
test/pie-richText.html | 186 ++++++++++++++++++++++++++++++++++++++++++-
4 files changed, 294 insertions(+), 5 deletions(-)
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index e77155e..696ad0f 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -254,6 +254,18 @@ export default function (
el.ignore = true;
}
+ function isLabelShown(label: ZRText) {
+ if (!label.ignore) {
+ return true;
+ }
+ for (const key in label.states) {
+ if (label.states[key].ignore === false) {
+ return true;
+ }
+ }
+ return false;
+ }
+
data.each(function (idx) {
const sector = data.getItemGraphicEl(idx) as Sector;
const sectorShape = sector.shape;
@@ -281,6 +293,10 @@ export default function (
return;
}
+ if (!isLabelShown(label)) {
+ return;
+ }
+
const midAngle = (sectorShape.startAngle + sectorShape.endAngle) / 2;
const nx = Math.cos(midAngle);
const ny = Math.sin(midAngle);
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index e8006b5..d166dcd 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -179,11 +179,10 @@ function setLabelStyle<LDI>(
break;
}
}
- let textContent = isSetOnText ? targetEl as ZRText : null;
+ let textContent = isSetOnText ? targetEl as ZRText : targetEl.getTextContent();
if (needsCreateText) {
if (!isSetOnText) {
// Reuse the previous
- textContent = targetEl.getTextContent();
if (!textContent) {
textContent = new ZRText();
targetEl.setTextContent(textContent);
diff --git a/test/label-layout.html b/test/label-layout.html
index 5181067..8b03f4e 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -50,6 +50,7 @@ under the License.
<div id="main7"></div>
<div id="main8"></div>
<div id="main9"></div>
+ <div id="main10"></div>
@@ -555,6 +556,95 @@ under the License.
});
</script>
+ <script>
+ require(['echarts'], function (echarts) {
+ const color = [
+ '#1576d2',
+ '#d14a82',
+ '#26c1f2',
+ '#a166ff',
+ '#1271cc',
+ '#272f67'
+ ];
+ let data = [{
+ name: 'Mon',
+ value: 182
+ },
+ {
+ name: 'Tue',
+ value: 191
+ },
+ {
+ name: 'Wed',
+ value: 234
+ },
+ {
+ name: 'Thu',
+ value: 290
+ },
+ {
+ name: 'Fri',
+ value: 330
+ }
+ ];
+
+ // 指定数据块中 label 的相应效果，以保证label的正常显示
+ const dataArcStyle = {
+ label: {
+ show: true
+ },
+ labelLine: {
+ show: true
+ },
+ emphasis: {
+ labelLine: {
+ show: true
+ }
+ }
+ }
+ data = data.map(d => {
+ d = Object.assign(d, dataArcStyle)
+ return d;
+ });
+
+ const sum = data.reduce((prev, curr) => prev + curr.value, 0);
+ data.push({
+ name: null,
+ value: sum,
+ itemStyle: {
+ opacity: 0
+ },
+ label: {
+ show: false
+ },
+ tooltip: {
+ show: false
+ }
+ });
+
+ option = {
+ backgroundColor: '#000',
+ color,
+ tooltip: {
+ show: true
+ },
+ series: [{
+ type: 'pie',
+ center: ['50%', '75%'],
+ radius: ['50%', '80%'],
+ startAngle: 180,
+ data
+ }]
+ };
+ var chart = testHelper.create(echarts, 'main8', {
+ title: [
+ 'Case from https://gallery.echartsjs.com/editor.html?c=xFcvAMHjr1&v=1'
+ ],
+ option: option,
+ height: 500
+ });
+ });
+ </script>
<script>
require(['echarts', 'map/js/china'], function (echarts) {
@@ -628,7 +718,7 @@ under the License.
}]
};
- var chart = testHelper.create(echarts, 'main8', {
+ var chart = testHelper.create(echarts, 'main9', {
title: [
'Draggable label'
],
@@ -700,7 +790,7 @@ under the License.
]
};
- var chart = testHelper.create(echarts, 'main9', {
+ var chart = testHelper.create(echarts, 'main10', {
title: [
'Hide overlap in graph zooming.'
],
diff --git a/test/pie-richText.html b/test/pie-richText.html
index 8709398..5e76a79 100644
--- a/test/pie-richText.html
+++ b/test/pie-richText.html
@@ -40,6 +40,7 @@ under the License.
<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
+ <div id="main3"></div>
@@ -577,7 +578,190 @@ under the License.
// recordCanvas: true,
});
});
- </script>
+ </script>
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
+ let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
+ let chartData = [{
+ name: "本科及以上",
+ value: 13211,
+ unit: '元'
+ },
+ {
+ name: "高中",
+ value: 42111,
+ unit: '元'
+ },
+ {
+ name: "初中及以下",
+ value: 81711,
+ unit: '元'
+ },
+ {
+ name: "其他",
+ value: 121711,
+ unit: '元'
+ }
+ ];
+ let arrName = [];
+ let arrValue = [];
+ let sum = 0;
+ let pieSeries = [],
+ lineYAxis = [];
+
+ // 数据处理
+ chartData.forEach((v, i) => {
+ arrName.push(v.name);
+ arrValue.push(v.value);
+ sum = sum + v.value;
+ })
+
+ // 图表option整理
+ chartData.forEach((v, i) => {
+ pieSeries.push({
+ name: '学历',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
+ center: ["30%", "50%"],
+ label: {
+ show: false
+ },
+ data: [{
+ value: v.value,
+ name: v.name
+ }, {
+ value: sum - v.value,
+ name: '',
+ itemStyle: {
+ color: "rgba(0,0,0,0)"
+ }
+ }]
+ });
+ pieSeries.push({
+ name: '',
+ type: 'pie',
+ silent: true,
+ z: 1,
+ clockWise: false, //顺时加载
+ hoverAnimation: false, //鼠标移入变大
+ radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
+ center: ["30%", "50%"],
+ label: {
+ show: false
+ },
+ data: [{
+ value: 7.5,
+ itemStyle: {
+ color: "#E3F0FF"
+ }
+ }, {
+ value: 2.5,
+ name: '',
+ itemStyle: {
+ color: "rgba(0,0,0,0)"
+ }
+ }]
+ });
+ v.percent = (v.value / sum * 100).toFixed(1) + "%";
+ lineYAxis.push({
+ value: i,
+ textStyle: {
+ rich: {
+ circle: {
+ color: color[i],
+ padding: [0, 5]
+ }
+ }
+ }
+ });
+ })
+
+ option = {
+ backgroundColor: '#fff',
+ color: color,
+ grid: {
+ top: '15%',
+ bottom: '54%',
+ left: "30%",
+ containLabel: false
+ },
+ yAxis: [{
+ type: 'category',
+ inverse: true,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: function(params) {
+ let item = chartData[params];
+ console.log(item)
+ return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}'
+ },
+ interval: 0,
+ inside: true,
+ textStyle: {
+ color: "#333",
+ fontSize: 14,
+ rich: {
+ line: {
+ width: 170,
+ height: 10,
+ backgroundColor: {image: dashedPic}
+ },
+ name: {
+ color: '#666',
+ fontSize: 14,
+ },
+ bd: {
+ color: '#ccc',
+ padding: [0, 5],
+ fontSize: 14,
+ },
+ percent:{
+ color: '#333',
+ fontSize: 14,
+ },
+ value: {
+ color: '#333',
+ fontSize: 16,
+ fontWeight: 500,
+ padding: [0, 0, 0, 20]
+ },
+ unit: {
+ fontSize: 14
+ }
+ }
+ },
+ show: true
+ },
+ data: lineYAxis
+ }],
+ xAxis: [{
+ show: false
+ }],
+ series: pieSeries
+ };
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Test Case from https://gallery.echartsjs.com/editor.html?c=xF_AXrV7sK'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org