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 @@
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);
}
......
src/label/LabelManager.ts
浏览文件 @ fead6883
......@@ -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();
}
......
test/label-layout.html
浏览文件 @ fead6883
......@@ -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'
}
},
......
test/pie-label.html
浏览文件 @ fead6883
......@@ -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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或