var option={
grid: {
top: '10%',
left: '0%',
// right: '10%',
bottom: '15%'
},
tooltip: {
trigger: 'item',
formatter: '{b} {c}',
backgroundColor: '#02152A',
borderWidth: 0,
textStyle: {
color: '#fff'
}
},
graphic: {//中间放置文字
type: 'text',
left: '29%',
top: '48%',
style: {
text: '0',
textAlign: 'center',
fill: '#fff',
fontSize: 16
}
},
legend: {
orient: 'vertical',
left: 'right',
// top: '20%',
width: "auto",
align: 'left',
itemGap:30,//调整行间距
icon: 'circle',
itemHeight: 7,
textStyle: {
color: '#fff',
fontFamily: 'SimHei',
rich:{
a:{
width:40,
align:'left'
},
b:{
width:50,
align:'right'
}
}
},
formatter: (name) => {//自定义图例
var tarValue;
var optionData=[ {value: 10, name: '正常'}, {value: 20, name: '一级告警'}, {value: 20, name: '二级告警'}, {value: 20, name: '三级告警'}, {value: 10, name: '四级告警'} ]
optionData.forEach((item,i) => {
if (item.name == name) {
tarValue = Number(item.value ? item.value : 0)
}
});
let arr = [ '{a|'+name+" : "+'}'+'{b|'+tarValue+'台}' ]
return arr
}
},
series: [
{
type: 'pie',
radius: ['50%', '60%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
color: ['#07D65C', '#EAD300', '#ED9227', '#FF661D', '#EA0E45', '#728AF4', '#CE33A8', '#E6734F'],
itemStyle: {
borderRadius:5,
borderColor: '#010F1C',
borderWidth: 5
},
label: {
normal: {
// \n\n可让文字居于牵引线上方，很关键
// {b} 代表显示的内容标题
// {c}代表数据
// formatter: '{a|{b}}{a| {c} } ',
position: 'inner',
show : false,
borderWidth: 20,
borderRadius: 4,
padding: [0, 0],
rich: {
a: {
color: '#fff',
fontSize: 12
},
}
}
},
labelLine: {
show: false
},
data: [
{value: 10, name: '正常'},
{value: 20, name: '一级告警'},
{value: 20, name: '二级告警'},
{value: 20, name: '三级告警'},
{value: 10, name: '四级告警'}
]
}
]
}
重点代码：
自定义图例及调整行间：
legend: {
orient: 'vertical',
left: 'right',
// top: '20%',
width: "auto",
align: 'left',
itemGap:30,//调整行间距
icon: 'circle',
itemHeight: 7,
textStyle: {
color: '#fff',
fontFamily: 'SimHei',
rich:{
a:{
width:40,
align:'left'
},
b:{
width:50,
align:'right'
}
}
},
formatter: (name) => {//自定义图例
var tarValue;
var optionData=[ {value: 10, name: '正常'}, {value: 20, name: '一级告警'}, {value: 20, name: '二级告警'}, {value: 20, name: '三级告警'}, {value: 10, name: '四级告警'} ]
optionData.forEach((item,i) => {
if (item.name == name) {
tarValue = Number(item.value ? item.value : 0)
}
});
let arr = [ '{a|'+name+" : "+'}'+'{b|'+tarValue+'台}' ]
return arr
}
},
环形图中间放置文字：
graphic: {//中间放置文字
type: 'text',
left: '29%',
top: '48%',
style: {
text: '0',
textAlign: 'center',
fill: '#fff',
fontSize: 16
}
},
