解决方案:按照饼图的实际写法,将所有项作为180°上的饼图,所有相的和作为180°下的半圆不显示即可。
let list = [{ name: "张三", value: "9" }, { name: "李四", value: "50" }, { name: "王五", value: "30" }, { name: "马六", value: "9" }, { name: "__other", value: "0" }] let sum = 0; list.map((item, index) => { sum += parseInt(item.value) }) list[list.length - 1].value = sum let colorList = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', "rgba(0,0,0,0)"]
Echarts option:
option = { tooltip: {}, color: colorList, series: [{ name: "", type: "pie", hoverAnimation: false, startAngle: -180, radius: ["60%", "100%"], center: ["50%", "70%"], label: { normal: { show: true, position: "inner", //显示在扇形上 formatter: "{b}", //显示内容 textStyle: { color: "white", // 改变标示文字的颜色 fontSize: 12, //文字大小 fontWeight: "bold", }, }, }, labelLine: { normal: { show: false, }, }, data: list, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, ], }
存在的问题:
下面180°的图形,只是将图形通过rgba(0,0,0,0)隐藏了,在实际场景中需要调整 center: ["50%", "70%"]
来控制具体的显示方式。
Done!