实现效果如图:
饼图中间插入文字看series里面的label;插入图片和右对齐看legend:
let optionKindergarten = {
tooltip: {//点击饼图显示的提示框
extraCssText: "z-index:88",
formatter: e => {//提示框文字格式
return `${e.marker}${e.name.replace("数量", "")}<br>
人数:${e.data.value}<br>
占比:${e.data.peopleNum}`;
}
},
title: {//标题
text: this.chartTitle,//:幼儿园疫苗接种情况
padding: [16, 0, 0, 0],
textStyle: {
fontSize: 14,
color: "#687F96",
fontWeight: 200
}
},
legend: {//右边图例
top: "32%",//距上
right: "8%",//距右
orient: "vertical",//纵向排列
itemWidth: 13,//图片宽(针头)
itemHeight: 13,//图片高
itemGap: 10,//间隙
data: [//给legend左边插入自定义图片,firstImg为变量要引入
{
name: "第一针",
icon: "image://" + firstImg + ""
},
{
name: "第二针",
icon: "image://" + secondImg + ""
},
{
name: "第三针",
icon: "image://" + thirdImg + ""
},
{
name: "未接种",
icon: "image://" + forthImg + ""
},
],
textStyle: {
color: "#687F96",
rich: {
name: {//legend左边的文字:第一针、第二针...
fontSize: 10,
padding: [3, 10, 0, 0]//1.左边的文字添加右边距10(可自己调整)
},
value: {//legend右边的值:10.09%、59.62%...
fontSize:12,
color: "#182F41",
backgroundColor: "transparent",//2.右边的值添加背景色
align: "right",//3.右对齐
padding: [5, -100, 0, 0],//4.设置右边距为-100(-70/-80..可自己调整)
}
}
},
formatter(name) {//右边文本块的格式
let value;
let dataList = optionKindergarten.series[0].data;
for (var i = 0; i < dataList.length; i++) {
if (dataList[i].name == name) {
value = dataList[i].peopleNum;
}
}
var v = value;//一定要重新赋值
return [`{name|${name}}` + `{value|${v}}`].join("");
},
color: ["#B5D8FF", "#6BB1FF", "#0F81FF", "#FF7D62"],
series: [
{
type: "pie",
radius: ["46%", "56%"], //大小半径
center: ["25%", "56%"], //饼图横纵坐标
itemStyle: {
borderColor: "#fff",
borderWidth: 2
},
labelLine: {
show: false
},
label: {//饼图中间插入文字
show: true,
position: "center",//居中
formatter:
"{value|" + this.nucleicAcidNum.toLocaleString() +"}" +
"\n\r" +
"{total|总人数}",
rich: {
value: {//value格式
fontSize: 20,
fontFamily: 'PingFangSC-Semibold, sans-serif',
color: "#182F41",
lineHeight: 40,
fontWeight: 600,
padding:[-2,0,0,0]
},
total: {//总人数格式
fontFamily: 'PingFangSC-Regular, sans-serif',
fontSize: 12,
color: "#7B8997",
lineHeight: 14
}
}
},
emphasis: {
disabled: true//点击图例时是否关闭高亮效果
},
data: this.nucleicList
}
]
}