-
图片示例
-
配置项
options = {
tooltip: {
trigger: "item",
// formatter: "{a} <br/>{b} : {c} ({d}%)",
formatter: "{d}%<br/>{b} : {c}人次 ",
},
title: {
zlevel: 0,
top: "center",
left: "22%",
textAlign: "center",
},
legend: {
align: "left", //这个是可以左右调整的
itemGap: 15,
orient: "vertical",
x: "right", //可设定图例在左、右、居中
y: "center", //可设定图例在上、下、居中
padding: [0, 40, 0, 0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
// data: ["第三针", "第二针", "第一针", "未接种"],
data: legend,
textStyle: {
color: ["#3e9ef5", "#60d691", "#f3e461", "#e76d41"],
fontSize: 14,
},
// legend 自定义拼接数据
formatter: (name) => {
// console.log("pie-legend", name);
let value = data.series.find((v) => v.name == name).value;
return name + ":" + value + " 人次";
},
},
series: [
{
avoidLabelOverlap: true,
color: ["#3e9ef5", "#60d691", "#f3e461", "#e76d41"],
type: "pie",
radius: [40, 60],
center: ["25%", "50%"],
data: data.series,
// data: [
// { value: 320, name: "第三针" },
// { value: 240, name: "第二针" },
// { value: 149, name: "第一针" },
// { value: 100, name: "未接种" },
// ],
animationEasing: "cubicInOut",
animationDuration: 2600,
label: {
normal: {
show: false,
},
},
lableLine: {
normal: {
show: false,
},
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "15",
fontWeight: "bold",
formatter: `{b}\n{d}%`,
},
},
},
],
}