如何让echart环形,在中间位置显示数据
效果图:
在显示环形的基础上添加以下代码:
也即是在图表配置项中添加。
注意:会发现并没有效果,这个只是写的是显示在环形的位置,并没有让数据显示;
还需要再data中进行设置,这个很关键
这个必须要写,不然的话,没有数据显示,显示的格式就是第二张图上的formatter中的内容。
完整的代码
YearPatrolChartOption2 = () => {
const sldata = [
{ name: "未完成计划", value: 20, icon: "roundRect" },
{
name: "已完成计划", value: 80, icon: "roundRect", label: {
normal: {
show: true
}
}
}
];
return {
color: ["#1676fe", "#FAB20C ", "#FA6119", "#9F51F0"],
tooltip: {
trigger: "item",
fommatter: "{a} : {b}",
confine: true,//将此权限打开后tooltip将不再溢出
},
// 图列组件
legend: {
data: lgdata,
// 设置图例的位置
// left: "65%",
fommatter: "{a} : {b}",
bottom: "5%",
left:"35%",
orient: "vertical",
itemWidth: 10,//图例图形的宽度
itemHeight: 10,
},
series: {
type: "pie",
// 饼图的位置
// center: ["35%", "50%"],
// 饼图的大小
radius: ["35%", "55%"],
data: sldata,
label: {
normal: {
show: false,
formatter: "{d}%\n{b}",
position: "center",
lineHight: 30,
},
},
}
};
}