Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 fead6883 编写于 作者: P pissang
浏览文件
操作

feat(label): support overlap configuration in labelLayout

上级 86d6c253
隐藏空白更改
内联 并排
Showing with 251 addition and 22 deletion
src/chart/pie/labelLayout.ts
浏览文件 @ fead6883
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
import {parsePercent} from '../../util/number'; import {parsePercent} from '../../util/number';
import PieSeriesModel, { PieSeriesOption, PieDataItemOption } from './PieSeries'; import PieSeriesModel, { PieSeriesOption, PieDataItemOption } from './PieSeries';
import { VectorArray } from 'zrender/src/core/vector'; 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 { Sector, Polyline } from '../../util/graphic';
import ZRText from 'zrender/src/graphic/Text'; import ZRText from 'zrender/src/graphic/Text';
import { RectLike } from 'zrender/src/core/BoundingRect'; import { RectLike } from 'zrender/src/core/BoundingRect';
...@@ -69,13 +69,14 @@ function adjustSingleSide( ...@@ -69,13 +69,14 @@ function adjustSingleSide(
function shiftDown(start: number, end: number, delta: number, dir: number) { function shiftDown(start: number, end: number, delta: number, dir: number) {
for (let j = start; j < end; j++) { for (let j = start; j < end; j++) {
if (list[j].y + delta + list[j].textRect.height / 2 > viewTop + viewHeight) {
break;
}
list[j].y += delta; list[j].y += delta;
adjusted = true; 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 if (j > start
&& j + 1 < end && j + 1 < end
&& list[j + 1].y > list[j].y + list[j].textRect.height && list[j + 1].y > list[j].y + list[j].textRect.height
...@@ -90,13 +91,14 @@ function adjustSingleSide( ...@@ -90,13 +91,14 @@ function adjustSingleSide(
function shiftUp(end: number, delta: number) { function shiftUp(end: number, delta: number) {
for (let j = end; j >= 0; j--) { for (let j = end; j >= 0; j--) {
if (list[j].y - delta - list[j].textRect.height / 2 < viewTop) {
break;
}
list[j].y -= delta; list[j].y -= delta;
adjusted = true; adjusted = true;
const textHeight = list[j].textRect.height;
if (list[j].y - textHeight / 2 < viewTop) {
list[j].y = viewTop + textHeight / 2;
}
if (j > 0 if (j > 0
&& list[j].y > list[j - 1].y + list[j - 1].textRect.height && list[j].y > list[j - 1].y + list[j - 1].textRect.height
) { ) {
...@@ -173,6 +175,9 @@ function adjustSingleSide( ...@@ -173,6 +175,9 @@ function adjustSingleSide(
} }
lastY = list[i].y + list[i].textRect.height; 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) { if (viewHeight - lastY < 0) {
shiftUp(len - 1, lastY - viewHeight); shiftUp(len - 1, lastY - viewHeight);
} }
......
src/label/LabelManager.ts
浏览文件 @ fead6883
...@@ -241,7 +241,7 @@ class LabelManager { ...@@ -241,7 +241,7 @@ class LabelManager {
/** /**
* Ignore layouting if it's not specified anything. * Ignore layouting if it's not specified anything.
*/ */
if (!layoutOption && !keys(layoutOption).length) { if (!layoutOption || !keys(layoutOption).length) {
return; return;
} }
...@@ -384,7 +384,10 @@ class LabelManager { ...@@ -384,7 +384,10 @@ class LabelManager {
const labelGuide = labelItem.labelGuide; const labelGuide = labelItem.labelGuide;
// TODO Callback to determine if this overlap should be handled? // TODO Callback to determine if this overlap should be handled?
if (overlapped) { if (overlapped
&& labelItem.layoutOption
&& (labelItem.layoutOption as LabelLayoutOption).overlap === 'hidden'
) {
label.hide(); label.hide();
labelGuide && labelGuide.hide(); labelGuide && labelGuide.hide();
} }
......
test/label-layout.html
浏览文件 @ fead6883
...@@ -78,6 +78,9 @@ under the License. ...@@ -78,6 +78,9 @@ under the License.
label: { label: {
show: true show: true
}, },
labelLayout: {
overlap: 'hidden'
},
data: [13244, 302, 301, 334, 390, 330, 320] data: [13244, 302, 301, 334, 390, 330, 320]
}, },
{ {
...@@ -87,6 +90,9 @@ under the License. ...@@ -87,6 +90,9 @@ under the License.
label: { label: {
show: true show: true
}, },
labelLayout: {
overlap: 'hidden'
},
data: [120, 132, 101, 134, 90, 230, 210] data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
...@@ -96,6 +102,9 @@ under the License. ...@@ -96,6 +102,9 @@ under the License.
label: { label: {
show: true show: true
}, },
labelLayout: {
overlap: 'hidden'
},
data: [220, 182, 191, 234, 290, 330, 310] data: [220, 182, 191, 234, 290, 330, 310]
}, },
{ {
...@@ -105,6 +114,9 @@ under the License. ...@@ -105,6 +114,9 @@ under the License.
label: { label: {
show: true show: true
}, },
labelLayout: {
overlap: 'hidden'
},
data: [150, 212, 201, 154, 190, 330, 410] data: [150, 212, 201, 154, 190, 330, 410]
}, },
{ {
...@@ -114,6 +126,9 @@ under the License. ...@@ -114,6 +126,9 @@ under the License.
label: { label: {
show: true show: true
}, },
labelLayout: {
overlap: 'hidden'
},
data: [820, 832, 901, 934, 1290, 1330, 1320] data: [820, 832, 901, 934, 1290, 1330, 1320]
} }
] ]
...@@ -165,6 +180,9 @@ under the License. ...@@ -165,6 +180,9 @@ under the License.
show: true, show: true,
position: 'top' position: 'top'
}, },
labelLayout: {
overlap: 'hidden'
},
itemStyle: { itemStyle: {
color: 'rgb(255, 70, 131)' color: 'rgb(255, 70, 131)'
}, },
...@@ -233,6 +251,10 @@ under the License. ...@@ -233,6 +251,10 @@ under the License.
position: 'right' position: 'right'
}, },
labelLayout: {
overlap: 'hidden'
},
emphasis: { emphasis: {
label: { label: {
show: true show: true
...@@ -287,7 +309,7 @@ under the License. ...@@ -287,7 +309,7 @@ under the License.
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: '30', fontSize: 30,
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
......
test/pie-label.html
浏览文件 @ fead6883
...@@ -45,6 +45,8 @@ under the License. ...@@ -45,6 +45,8 @@ under the License.
<div id="main2"></div> <div id="main2"></div>
<div id="main3"></div> <div id="main3"></div>
<div id="main4"></div> <div id="main4"></div>
<div id="main5"></div>
<div id="main6"></div>
<script> <script>
...@@ -114,20 +116,20 @@ under the License. ...@@ -114,20 +116,20 @@ under the License.
'echarts'/*, 'map/js/china' */ 'echarts'/*, 'map/js/china' */
], function (echarts) { ], function (echarts) {
var count = 60; var count = 80;
var data = []; var data = [];
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
var label = i === 30 // var label = i === 30
? { // ? {
position: 'center', // position: 'center',
fontSize: 30, // fontSize: 30,
color: '#fff' // color: '#fff'
} // }
: null; // : null;
data.push({ data.push({
name: i + 'A', name: i + 'Something really Random',
value: Math.random(), value: Math.random(),
label: label // label: label
}); });
} }
...@@ -135,6 +137,11 @@ under the License. ...@@ -135,6 +137,11 @@ under the License.
series: [{ series: [{
type: 'pie', type: 'pie',
radius: '50%', radius: '50%',
labelLine: {
minTurnAngle: 110,
length2: 10,
smooth: true
},
data: data data: data
}] }]
}; };
...@@ -145,6 +152,7 @@ under the License. ...@@ -145,6 +152,7 @@ under the License.
}); });
}); });
</script> </script>
...@@ -446,5 +454,196 @@ under the License. ...@@ -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> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或