echart饼图标签重叠_解决echarts中饼图标签重叠的问题
餅圖中的series有個avoidLabelOverlap屬性，
avoidLabelOverlap:是否啟用防止標簽重疊策略，默認開啟，在標簽擁擠重疊的情況下會挪動各個標簽的位置，防止標簽間的重疊。
當avoidLabelOverlap設置為false時會出現以下情況
改為true之后就不會重疊
代碼如下
var option = {
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} (ozvdkddzhkzd%)"
},
legend: {
//orient: "vertical",
x: "0%",
//y: "25%",
//y: "5%",
itemWidth: 14,
itemHeight: 14,
align: "left",
data: xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "危險源狀態",
type: "pie",
radius: ["25%", "45%"],
center: ["50%", "60%"],
avoidLabelOverlap: true,//對，就是這里avoidLabelOverlap
label: {
normal: {
show: true,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "12",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: true
}
},
data: pieData
}
]
};
補充知識：echarts柱狀圖輕松實現分別采用兩個不同單位的y軸
echarts柱狀圖輕松實現分別采用兩個不同單位的y軸：
秘籍：
代碼
// 基于準備好的dom，初始化echarts實例
var colors = ['#0089FF','#B865DF',/*'#5ADF63','#FFDD00',*/'#224666', '#675bba'];
// 指定圖表的配置項和數據
option = {
/*grid:{
y:'25%'},*/
color: colors,
/* title: {
text: '各醫院指標對比情況',
left: 16,
textStyle: {
fontSize: 18,
color:'#0089FF'
}
},*/
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data:['組數','CMI'],
x:'80%'
},
xAxis: [
{
type: 'category',
data: arr,
axisPointer: {
type: 'shadow'
},
axisLine: {
show: true,
/* lineStyle: {
color: '#05edfc'
}*/
},
axisLabel: {
show: true,
/* color: '#fff',*/
fontSize: 12,
interval: 0,
formatter:function(value)
{
return value;
}
//fontWeight: 'bold'
}
},
],
yAxis: [
{
type: 'value',
name: '組數整體指標',
position: 'left',
splitLine:{show: true},
axisLine: {
show: false,
/* lineStyle: {
color: '#E7E7E7'
}*/
},
axisLabel: {
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: '{value}'
},
},
{
type: 'value',
name: 'CMI',
position: 'right',
splitLine:{show: true},
axisLine: {
show: false,
/* lineStyle: {
color: '#E7E7E7'
}*/
},
axisLabel: {
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: '{value}'
},
},
],
series: [
{
name:'組數',
type:'bar',
barWidth : 20,
data:arr2,
yAxisIndex: 0,
/* markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}*/
},
{
name:'CMI',
type:'bar',
barWidth : 20,
data:arr3,
yAxisIndex: 1,
/* markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}*/
}
]
};
以上這篇解決echarts中餅圖標簽重疊的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。
時間： 2020-05-14
總結
以上是生活随笔為你收集整理的echart饼图标签重叠_解决echarts中饼图标签重叠的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ⑴配置1-5_Telnet_Isolat
- 下一篇： 请教个问题，我想把数据中名字的重复值删掉