echats--》饼图如何在环形中央设置⽂字？遇到⼀个需求，在环形图中央空⽩部分显⽰总数量。
    let data = {
totalNum: "",
data: [
{ value: 335, name: "待接单" },
{ value: 310, name: "已完成" },
{ value: 234, name: "进⾏中" }
]
};
let n = 0;
orderData.data.forEach(item => {
n += Number(item.value);
});
let option = {
title: {
text: "报单总数",
x: "center",
y: "center",
top: "185",
textStyle: {
fontSize: 13,
fontWeight: "300",
color: "#6e6e6e"
}
},
color: ["#f04864", "#facc14", "#3aa0ff"], //饼状图颜⾊数组
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
style: {
textAlign: "left"
}
},
legend: { //设置legend模板序列化
formatter: function(name) {
let pieLegendVale = {};
data.data.filter((item, index) => {
if (item.name == name) {
pieLegendVale = item;
}
});
return pieLegendVale.value + "\n" + pieLegendVale.name;
},
itemGap: 10, // 设置legend的间距
itemWidth: 15, // 设置宽度
itemHeight: 15, // 设置⾼度
orient: "horizontal", //垂直显⽰还是⽔平显⽰
right: 0, //legend相对位置
bottom: 0, //legend相对位置
textStyle: { fontSize: "14" }, //legend字体⼤⼩
data: ["待接单", "已完成", "进⾏中"]
},
graphic: [
{
/
/环形图中间添加⽂字
type: "text", //通过不同top值可以设置上下显⽰
left: "center",
top: "43%",
style: {
text: alNum,
textAlign: "center",
fill: "black", //⽂字的颜⾊
width: 30,
height: 30,
fontSize: 30,
fontFamily: "Microsoft YaHei"
}
}
],
series: [
{
name: "⼯单完成率",
type: "pie",
radius: ["60%", "87%"],            avoidLabelOverlap: false,            data: data.data,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
}
}
]
};
效果如图：
textstyle

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。