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);
});
orderData.totalNum = n;
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: data.totalNum, 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 } } } ] };
效果如图: