echarts implements donut chart (progress) (notes)

Ring 1:

    var xdata =75; //接收x数据
    var ydata = 100; //接收y数据
    var myecharts = echarts.init(document.getElementById("mains"));
    // var myChart = echarts.init(document.getElementById('chart'));
    var datas_outer = []; //存放外层颜色小块
    var datas_inner = []; //存放内层颜色小块
    var num = 20; //定义小块个数
    var rate = xdata / ydata; //完成率

    for (var i = num; i >= 0; i--) {
      if (i <= rate * 20) {
        datas_outer.push({
          value: 1,
          name: "已完成",
          itemStyle: {
            color: "#57EC70", //浅绿色
            borderWidth: 4,
            borderColor: "#023151", //背景色 融入
          },
        });
        datas_inner.push({
          value: 1,
          name: "已完成",
          itemStyle: {
            color: "#185972", //深绿色
            borderWidth: 4,
            borderColor: "#023151", //背景色 融入
          },
        });
      } else {
        datas_outer.push({
          value: 1, //占位用
          name: "未完成",
          itemStyle: { color: "rgba(41,232,233,0)" },
        });
        datas_inner.push({
          value: 1, //占位用
          name: "未完成",
          itemStyle: { color: "rgba(41,232,233,0)" },
        });
      }
    }

    //定义图表option
    var options = {
      tooltip: {
        show: false,
      },
      title: {
        text: xdata + "/" + ydata, //中间标题
        x: "center",
        y: "center",
        textStyle: {
          color: "#FFFFFF",
          fontSize: "130%", //中间标题文字大小设置
        },
      },
      series: [
        {
          name: "完成情况外层",
          type: "pie",
          radius: ["60%", "40%"],
          center: ["50%", "50%"],
          clockwise: false,
          data: datas_outer,
          startAngle: 0,
          hoverAnimation: false,
          legendHoverLink: false,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
        {
          name: "完成情况内层",
          type: "pie",
          radius: ["38%", "30%"],
          center: ["50%", "50%"],
          clockwise: false,
          data: datas_inner,
          startAngle: 180,
          hoverAnimation: false,
          legendHoverLink: false,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      ],
    };
myecharts.setOption(options);

Ring 2:

var myecharts = echarts.init(document.getElementById("mains"));
    var options = {
      title: [
        // {
        //   // text: '已完成',
        //   x: "center",
        //   top: "65%",
        //   textStyle: {
        //     color: "#FFFFFF",
        //     fontSize: 122,
        //     fontWeight: "120",
        //   },
        // },
        {
          text: "75%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "30",
            color: "#FFFFFF",
            fontFamily: "DINAlternate-Bold, DINAlternate",
            foontWeight: "600",
          },
        },
      ],
      polar: {
        radius: ["42%", "55%"],
        center: ["50%", "50%"],
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: "",
          type: "bar",
          roundCap: true,
          barWidth: 50,
          // showBackground: true,
          backgroundStyle: {},
          data: [75], //数据
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#16CEB9",
                },
                {
                  offset: 1,
                  color: "#6648FF",
                },
              ]),
            },
          },
        },
        {
          name: "",
          type: "pie",
          startAngle: 90,
          radius: ["56%"],
          hoverAnimation: false,
          center: ["50%", "50%"],
          itemStyle: {
            color: "rgba(66, 66, 66, .1)",
            borderWidth: 1,
            borderColor: "#5269EE",
          },
          data: [100],
        },
        {
          name: "",
          type: "pie",
          startAngle: 80,
          radius: ["38%"],
          hoverAnimation: false,
          center: ["50%", "50%"],
          itemStyle: {
            color: "rgba(66, 66, 66, .1)",
            borderWidth: 1,
            borderColor: "#5269EE",
          },
          data: [100],
        },
      ],
    };
    myecharts.setOption(options);