option = {
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b}: {c} ({d}%)"
},
"legend": {
"itemWidth": 14,
"itemHeight": 14,
"top": "bottom",
"data": ["一级", "二级", "三级", "四级", "五级"]
},
"series": [{
"name": "",//接口数据
"type": "pie",
"hoverAnimation": false,
"radius": [0, "35%"],
"center": ["52%", "50%"],
"tooltip": {
"show": false
},
"label": {
"position": "center",
"fontSize": 16,
"formatter": "{a}",
"color": "#333333"
},
"labelLine": {
"show": false
},
"data": [1]
}, {
"name": "评价指数：",
"type": "pie",
"radius": ["44%", "68%"],
"center": ["52%", "50%"],
"labelLine": {
"length": 30
},
"label": {
"formatter": "{d}%"
},
"itemStyle": {
"normal": {
"label": {
"formatter": "{d}%",
"textStyle": {
"color": "black",
"fontSize": 14
}
},
"labelLine": {
"Length": 4
}
}
},
//接口数据
"data": [{
"value": 0,
"name": "一级"
}, {
"value": 0,
"name": "二级"
}, {
"value": 0,
"name": "三级"
}, {
"value": 0,
"name": "四级"
}, {
"value": 0,
"name": "五级"
}]
}],
//接口数据
"color": ["", "#05CDFF", "#00FF00", "#FFFF00", "#FF9B00", "#FF0000"]
}
图例legned：要求正方形。echarts配置中option.legend.itemHeight默认高度为14，将option.legend.itemWidth设置为14即可得到为尺寸为14的正方形。
双层图表：设置option.series为数组，长度为2。把series数组内第一项作为内嵌圆形。option.series.hoverAnimation、option.series.tooltip.show、option.series.labelLine.show均设置为false来禁用掉交互效果。内圈中间的文字是用label.formatter去展示，是因为项目中echarts版本为4.9.0，利用一些position为center时无法居中，并且有鼠标hover频繁抖动和层级关系的问题（没有耐心仔细去查API了），于此，干脆用label.formatter达到效果。
option.color 设置数据系列的颜色
// 初始化图表
initMyChart() {
this.myChart = echarts.init(document.getElementById("id"));
this.myChart.setOption(this.option, true);
//模拟接口
setTimeout(() => {
this.myChart.setOption({
color: ["#00FF00"],
series: [
{ name: "优秀" },
{
data: [
{ value: 25.8, name: "一级" },
{ value: 20.8, name: "二级" },
{ value: 21.3, name: "三级" },
{ value: 19.3, name: "四级" },
{ value: 8.1, name: "五级" },
],
},
],
});
}, 2000);
},
