ECharts 实现双饼状图

实现双饼图效果直接看series属性吧

var myChart = echarts.init(document.getElementById('main'));
 var bottomChartColor =  ["#ffa141", "#00ffec"]
var option = {
    series: [
		  //用来装饰的饼图
          {
            name: "",
            type: "pie",
            selectedMode: "single",
            silent: true,
            radius: [0, "37%"],
            center: ["45%", "50%"], //饼图位置控制
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
            color: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              z: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: "transparent",
                },
                {
                  offset: 1,
                  color: "#4872ff",
                },
              ],
              global: false,
            },
          },
          //用来展示的饼图
          {
            name: "",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["45%", "50%"], //饼图位置控制
            //bottomChartData我自己的饼图数据，和正常饼图数据无异
            data: this.bottomChartData.map((item, index) => {
              item.label = {
                color: bottomChartColor[index],
              };
              return item;
            }),
            itemStyle: {
              color: (params) => {
                var index = params.dataIndex;
                return bottomChartColor[index];
              },
            },
            label: {
              color: "#FFFFFF",
              formatter: function (t) {
                return t.value;
              },
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
    ],
};