guoyuanzhuang opened a new issue #10879: echart label 和 labelLine 如何控制显示位置
URL: https://github.com/apache/incubator-echarts/issues/10879
Version
4.2.1
Steps to reproduce
option = {
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'horizontal',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'center',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
top:20,
// align:'auto',
itemWidth: 8, // 设置图例图形的宽
itemHeight: 7, // 设置图例图形的高
textStyle: {
color: '#666', // 图例文字颜色
fontSize:'9',
},
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap:80,
icon:"circle",
backgroundColor: 'rgba(0,0,0,0)', // 设置整个图例区域背景颜色
data:['时间占比','用量占比']
},
minAngle: 0,
avoidLabelOverlap: true,
series: [
{
type:'pie',
selectedMode: 'single',
radius: ['65%', '40%'],
center: ['50%', '50%'],
selectedOffset:0.2,
// hoverAnimation:false,
minAngle:0,
label: {
position: "center",
normal: {
formatter:function(params){
var value = params['value'];
var str;
if(value>24*3600){
var days = parseInt(value/86400);
var hours = parseInt((value-86400*days)/3600);
var minute = parseInt((value - 86400*days - 3600*hours)/60);
str = days + '天' + hours + '时' + minute + '分';
}else if(value % 86400 == 0){
var days = parseInt(value/86400);
str = days + '天';
}else if(value > 3600){
var hours = parseInt((value)/3600);
var minute = parseInt((value-3600*hours)/60);
str = hours + '时' + minute + '分';
}else if(value % 3600 == 0){
var hours = parseInt((value)/3600);
str = hours + '时';
}else {
var minute = parseInt((value)/60);
str = minute + '分';
}
return params['name'] + '\n' + params['percent'] + '%\n' + str;
},
color:'#68C8FF',
fontSize:10,
borderWidth: 0,
borderRadius: 4,
// padding: [40,0],
rich: {
a: {
color: '#333',
fontSize: 10,
lineHeight: 20
},
hr: {
borderColor: '#333',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 10,
lineHeight: 20,
color: '#333'
}
}
}
},
labelLine:{
show:true,
length:40,
length2:25,
lineStyle:{
color:'#69C9FF',
type:'solid'
}
},
itemStyle:{
normal:{
// color:'#10AEFF'
color:function(params) {
//自定义颜色
var colorList = [
'#10AEFF', '#F9F9F9'
];
return colorList[params.dataIndex]
}
}
},
data:[
{value:data['data'][site_no][0]['seconds'],name:'时间占比'},
{value:data['data'][site_no]['other']['seconds'],name:'其它',label:{show:false},labelLine:{show:false}},
]
},
{
type: 'pie',
// radius: '20%', // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
radius: ['10%', '30%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
data:[
{value:data['data'][site_no][0]['value'],name:'用量占比'},
{value:data['data'][site_no]['other']['value'],name:'其它',label:{show:false},labelLine:{show:false}},
],
label: {
position: 'bottom',
normal: {
formatter: function(res){
return res['name'] + '\n' + res['percent'] + '%\n' + res['value'].toFixed(2) + unit1 + '\n' + '总:'+ cont.toFixed(2) + unit1 + '';
},
color:'#FFB95F',
fontSize:10,
// position:'inner',
borderWidth: 0,
borderRadius: 4,
padding: [0, -1],
rich: {
a: {
color: '#333',
fontSize: 10,
lineHeight: 20
},
hr: {
borderColor: '#333',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 10,
lineHeight: 20,
color: '#333'
}
},
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(30, 144, 255，0.5)'
}
},
itemStyle:{
normal:{
color:function(params) {
//自定义颜色
var colorList = [
'#FF9100', '#F9F9F9'
];
return colorList[params.dataIndex]
}
}
},
// 设置值域的那指向线
labelLine:{
show:true,
length:40,
length2:65,
lineStyle:{
color:'#FFBB62',
type:'solid'
}
},
}
]
};
myChart.setOption(option);
What is expected?
期望label不要重叠显示
What is actually happening?
label重叠显示
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org