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/06/02 14:57:03 UTC
[incubator-echarts] branch label-enhancement updated: feat(label):
support overlap configuration in labelLayout
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/label-enhancement by this push:
new fead688 feat(label): support overlap configuration in labelLayout
fead688 is described below
commit fead68830dbe728a43d3a49090ddf506c2c0a772
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 2 22:56:36 2020 +0800
feat(label): support overlap configuration in labelLayout
---
src/chart/pie/labelLayout.ts | 23 +++--
src/label/LabelManager.ts | 7 +-
test/label-layout.html | 24 ++++-
test/pie-label.html | 219 +++++++++++++++++++++++++++++++++++++++++--
4 files changed, 251 insertions(+), 22 deletions(-)
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index 693008d..9e30c26 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -21,7 +21,7 @@
import {parsePercent} from '../../util/number';
import PieSeriesModel, { PieSeriesOption, PieDataItemOption } from './PieSeries';
import { VectorArray } from 'zrender/src/core/vector';
-import { HorizontalAlign, VerticalAlign, ZRRectLike, ZRTextAlign } from '../../util/types';
+import { HorizontalAlign, ZRRectLike, ZRTextAlign } from '../../util/types';
import { Sector, Polyline } from '../../util/graphic';
import ZRText from 'zrender/src/graphic/Text';
import { RectLike } from 'zrender/src/core/BoundingRect';
@@ -69,13 +69,14 @@ function adjustSingleSide(
function shiftDown(start: number, end: number, delta: number, dir: number) {
for (let j = start; j < end; j++) {
- if (list[j].y + delta + list[j].textRect.height / 2 > viewTop + viewHeight) {
- break;
- }
-
list[j].y += delta;
adjusted = true;
+ // const textHeight = list[j].textRect.height;
+ // if (list[j].y + textHeight / 2 > viewTop + viewHeight) {
+ // list[j].y = viewTop + viewHeight - textHeight / 2;
+ // }
+
if (j > start
&& j + 1 < end
&& list[j + 1].y > list[j].y + list[j].textRect.height
@@ -90,13 +91,14 @@ function adjustSingleSide(
function shiftUp(end: number, delta: number) {
for (let j = end; j >= 0; j--) {
- if (list[j].y - delta - list[j].textRect.height / 2 < viewTop) {
- break;
- }
-
list[j].y -= delta;
adjusted = true;
+ const textHeight = list[j].textRect.height;
+ if (list[j].y - textHeight / 2 < viewTop) {
+ list[j].y = viewTop + textHeight / 2;
+ }
+
if (j > 0
&& list[j].y > list[j - 1].y + list[j - 1].textRect.height
) {
@@ -173,6 +175,9 @@ function adjustSingleSide(
}
lastY = list[i].y + list[i].textRect.height;
}
+ // PENDING:
+ // If data is sorted. Left top is usually the small data with a lower priority.
+ // So shift up and make sure the data on the bottom is always displayed well.
if (viewHeight - lastY < 0) {
shiftUp(len - 1, lastY - viewHeight);
}
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index 29cf0de..9c50a06 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -241,7 +241,7 @@ class LabelManager {
/**
* Ignore layouting if it's not specified anything.
*/
- if (!layoutOption && !keys(layoutOption).length) {
+ if (!layoutOption || !keys(layoutOption).length) {
return;
}
@@ -384,7 +384,10 @@ class LabelManager {
const labelGuide = labelItem.labelGuide;
// TODO Callback to determine if this overlap should be handled?
- if (overlapped) {
+ if (overlapped
+ && labelItem.layoutOption
+ && (labelItem.layoutOption as LabelLayoutOption).overlap === 'hidden'
+ ) {
label.hide();
labelGuide && labelGuide.hide();
}
diff --git a/test/label-layout.html b/test/label-layout.html
index ac49bb1..5cc3f8b 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -78,6 +78,9 @@ under the License.
label: {
show: true
},
+ labelLayout: {
+ overlap: 'hidden'
+ },
data: [13244, 302, 301, 334, 390, 330, 320]
},
{
@@ -87,6 +90,9 @@ under the License.
label: {
show: true
},
+ labelLayout: {
+ overlap: 'hidden'
+ },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
@@ -96,6 +102,9 @@ under the License.
label: {
show: true
},
+ labelLayout: {
+ overlap: 'hidden'
+ },
data: [220, 182, 191, 234, 290, 330, 310]
},
{
@@ -105,6 +114,9 @@ under the License.
label: {
show: true
},
+ labelLayout: {
+ overlap: 'hidden'
+ },
data: [150, 212, 201, 154, 190, 330, 410]
},
{
@@ -114,6 +126,9 @@ under the License.
label: {
show: true
},
+ labelLayout: {
+ overlap: 'hidden'
+ },
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
@@ -165,6 +180,9 @@ under the License.
show: true,
position: 'top'
},
+ labelLayout: {
+ overlap: 'hidden'
+ },
itemStyle: {
color: 'rgb(255, 70, 131)'
},
@@ -233,6 +251,10 @@ under the License.
position: 'right'
},
+ labelLayout: {
+ overlap: 'hidden'
+ },
+
emphasis: {
label: {
show: true
@@ -287,7 +309,7 @@ under the License.
emphasis: {
label: {
show: true,
- fontSize: '30',
+ fontSize: 30,
fontWeight: 'bold'
}
},
diff --git a/test/pie-label.html b/test/pie-label.html
index aa03b66..6e0025b 100644
--- a/test/pie-label.html
+++ b/test/pie-label.html
@@ -45,6 +45,8 @@ under the License.
<div id="main2"></div>
<div id="main3"></div>
<div id="main4"></div>
+ <div id="main5"></div>
+ <div id="main6"></div>
<script>
@@ -114,20 +116,20 @@ under the License.
'echarts'/*, 'map/js/china' */
], function (echarts) {
- var count = 60;
+ var count = 80;
var data = [];
for (var i = 0; i < count; i++) {
- var label = i === 30
- ? {
- position: 'center',
- fontSize: 30,
- color: '#fff'
- }
- : null;
+ // var label = i === 30
+ // ? {
+ // position: 'center',
+ // fontSize: 30,
+ // color: '#fff'
+ // }
+ // : null;
data.push({
- name: i + 'A',
+ name: i + 'Something really Random',
value: Math.random(),
- label: label
+ // label: label
});
}
@@ -135,6 +137,11 @@ under the License.
series: [{
type: 'pie',
radius: '50%',
+ labelLine: {
+ minTurnAngle: 110,
+ length2: 10,
+ smooth: true
+ },
data: data
}]
};
@@ -145,6 +152,7 @@ under the License.
});
});
+
</script>
@@ -446,5 +454,196 @@ under the License.
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ const data = [{
+ name: 'Something really Random(1)',
+ value: 1
+ }, {
+ name: 'Something really Random(2)',
+ value: 2
+ }, {
+ name: 'Something really Random(3)',
+ value: 3
+ }, {
+ name: 'Something really Random(4)',
+ value: 2
+ }, {
+ name: 'Something really Random(5)',
+ value: 3
+ }];
+
+ for (let i = 0; i < 5 ; i++) {
+ data.push({
+ name: 'Something really Random(' + i + ')',
+ value: Math.random() * 0.1 + 0.1
+ });
+ }
+
+ data.push({
+ name: 'Something really Random',
+ value: 2
+ });
+ for (let i = 0; i < 5 ; i++) {
+ data.push({
+ name: 'Something really Random(' + i + ')',
+ value: Math.random() * 0.1 + 0.1
+ });
+ }
+
+ var option = {
+ series: [{
+ type: 'pie',
+ radius: '50%',
+ data: data
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main5', {
+ title: 'Layout Case 1',
+ option: option
+ });
+ });
+
+ </script>
+
+ <script>
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ const data = [{
+ "name": "United States",
+ "value": [213242, 22.86439111423725, "United States"]
+ }, {
+ "name": "Italy",
+ "value": [110574, 11.856047040759652, "Italy"]
+ }, {
+ "name": "Spain",
+ "value": [104118, 11.163817043697554, "Spain"]
+ }, {
+ "name": "China",
+ "value": [82361, 8.830971931231625, "China"]
+ }, {
+ "name": "Germany",
+ "value": [77872, 8.349649059978255, "Germany"]
+ }, {
+ "name": "France",
+ "value": [57749, 6.192005901539504, "France"]
+ }, {
+ "name": "Iran",
+ "value": [47593, 5.103051773571311, "Iran"]
+ }, {
+ "name": "United Kingdom",
+ "value": [29865, 3.202207072840695, "United Kingdom"]
+ }, {
+ "name": "Switzerland",
+ "value": [17768, 1.905133610253925, "Switzerland"]
+ }, {
+ "name": "Turkey",
+ "value": [15679, 1.6811453103991045, "Turkey"]
+ }, {
+ "name": "Belgium",
+ "value": [13964, 1.4972583145872247, "Belgium"]
+ }, {
+ "name": "Netherlands",
+ "value": [13696, 1.4685226207810533, "Netherlands"]
+ }, {
+ "name": "Austria",
+ "value": [10711, 1.1484627476041078, "Austria"]
+ }, {
+ "name": "Korea, South",
+ "value": [9887, 1.0601112114239395, "Korea, South"]
+ }, {
+ "name": "Canada",
+ "value": [9560, 1.0250493760708872, "Canada"]
+ }, {
+ "name": "Portugal",
+ "value": [8251, 0.8846948119205952, "Portugal"]
+ }, {
+ "name": "Brazil",
+ "value": [6836, 0.7329746375335339, "Brazil"]
+ }, {
+ "name": "Israel",
+ "value": [6092, 0.6532009203999837, "Israel"]
+ }, {
+ "name": "Sweden",
+ "value": [4947, 0.5304308852952593, "Sweden"]
+ }, {
+ "name": "Norway",
+ "value": [4863, 0.52142417529631, "Norway"]
+ }, {
+ "name": "Australia",
+ "value": [4862, 0.5213169525582273, "Australia"]
+ }, {
+ "name": "Czechia",
+ "value": [3508, 0.37613736519421254, "Czechia"]
+ }, {
+ "name": "Ireland",
+ "value": [3447, 0.3695967781711661, "Ireland"]
+ }, {
+ "name": "Denmark",
+ "value": [3290, 0.35276280829217765, "Denmark"]
+ }, {
+ "name": "Chile",
+ "value": [3031, 0.3249921191287509, "Chile"]
+ }, {
+ "name": "Malaysia",
+ "value": [2908, 0.31180372234457526, "Malaysia"]
+ }, {
+ "name": "Russia",
+ "value": [2777, 0.2977575436557378, "Russia"]
+ }, {
+ "name": "Ecuador",
+ "value": [2748, 0.29464808425133865, "Ecuador"]
+ }, {
+ "name": "Poland",
+ "value": [2554, 0.2738468730632893, "Poland"]
+ }, {
+ "name": "Romania",
+ "value": [2460, 0.2637679356835128, "Romania"]
+ }];
+
+ var option = {
+ backgroundColor: '#333',
+ visualMap: {
+ dimension: 0,
+ left: 10,
+ itemWidth: 12,
+ min: data[29].value[0],
+ max: data[0].value[0],
+ text: ['High', 'Low'],
+ textStyle: {
+ color: '#ddd'
+ },
+ inRange: {
+ color: ['lightskyblue', 'yellow', 'orangered', 'red']
+ }
+ },
+ series: [{
+ type: 'pie',
+ radius: '50%',
+ data: data,
+ roseType: 'radius',
+ radius: ['30%', '70%'],
+ label: {
+ textBorderColor: 'none'
+ }
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main6', {
+ title: 'Case from https://gallery.echartsjs.com/editor.html?c=xpm1ZhhOCG',
+ height: 300,
+ option: option
+ });
+ });
+
+ </script>
+
</body>
</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org