echarts嵌套环形饼图简单示例

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);
    },
复制代码