echarts-三环进度条

const colorList = ["#4386f1", "#33d2e4", "#5daafb"];
const props = {
  data:[
      { name: "月度计划", number: 8.75, jdt: 75 },
      { name: "累计完成值", number: 5.37, jdt: 40 },
      { name: "当日完成值", number: 0.47, jdt: 5 },
    ]
}
option = {
    title: [
      //标题组件，数组里的一个对象表示一个标题组件
      {
        text: "",
        left: "center",
        bottom: "5%",
        show: false,
        textStyle: { color: "#fff" },
      },
    ],
    series: [
      //系列
      {
        name: "",
        clockWise: false,
        type: "pie", //pie类型的图实现环形图
        radius: ["25%", "35%"], //数组的话，表示内圆和外圆的半径大小，相对于宽高中较小的那一个。
        center: ["35%", "50%"], //圆心坐标
        avoidLabelOverlap: false, //是否启用防止标签重叠策略
        startAngle: 90, //第一个数据开始绘制的角度，以正交直角坐标系为标准
        label: {
          //每个数据的标签
          show: true, //设置为true则显示第一个数据
          position: ["80%", "10%"], //位置居中
          formatter: "{d}%", //{d}表示数据在总数据中的百分比
          fontSize: 20,
          fontWeight: "bold",
        },
        emphasis: {
          //高亮，即鼠标经过时的样式
          scale: false, //表示不放大item
        },
        labelLine: {
          show: true,
        },
        data: [
          {
            value: Number(props.data[2].jdt),
            name: "",
            label: {
              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
            },
            itemStyle: {
              normal: { color: colorList[2] },
            },
          },
          {
            value: 100 - Number(props.data[1].jdt),
            name: "",
            label: {
              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
            },
            emphasis: {
              label: {
                show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
              },
            },
            itemStyle: {
              normal: { color: "#eff6fc" },
            },
          },
        ],
      },
      {
        name: "",
        clockWise: false,
        type: "pie", //pie类型的图实现环形图
        radius: ["45%", "55%"], //数组的话，表示内圆和外圆的半径大小，相对于宽高中较小的那一个。
        center: ["35%", "50%"], //圆心坐标
        avoidLabelOverlap: false, //是否启用防止标签重叠策略
        startAngle: 90, //第一个数据开始绘制的角度，以正交直角坐标系为标准
        label: {
          //每个数据的标签
          show: true, //设置为true则显示第一个数据
          position: ["80%", "10%"], //位置居中
          formatter: "{d}%", //{d}表示数据在总数据中的百分比
          fontSize: 20,
          fontWeight: "bold",
        },
        emphasis: {
          //高亮，即鼠标经过时的样式
          scale: false, //表示不放大item
        },
        labelLine: {
          show: true,
        },
        data: [
          {
            value: Number(props.data[1].jdt),
            name: "",
            label: {
              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
            },
            itemStyle: {
              normal: { color: colorList[1] },
            },
          },
          {
            value: 100 - Number(props.data[1].jdt),
            name: "",
            label: {
              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
            },
            emphasis: {
              label: {
                show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
              },
            },
            itemStyle: {
              normal: { color: "#eff6fc" },
            },
          },
        ],
      },
      {
        name: "",
        clockWise: false,
        type: "pie", //pie类型的图实现环形图
        radius: ["65%", "75%"], //数组的话，表示内圆和外圆的半径大小，相对于宽高中较小的那一个。
        center: ["35%", "50%"], //圆心坐标
        avoidLabelOverlap: false, //是否启用防止标签重叠策略
        startAngle: 90, //第一个数据开始绘制的角度，以正交直角坐标系为标准
        label: {
          //每个数据的标签
          show: true, //设置为true则显示第一个数据
          position: ["80%", "10%"], //位置居中
          formatter: "{d}%", //{d}表示数据在总数据中的百分比
          fontSize: 20,
          fontWeight: "bold",
        },
        color: ["#4188f7", "#eff6fc"], //系列的颜色
        emphasis: {
          //高亮，即鼠标经过时的样式
          scale: false, //表示不放大item
        },
        labelLine: {
          show: true,
        },
        data: [
          {
            value: Number(props.data[0].jdt),
            name: "",
            label: {
              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
            },
            itemStyle: {
              normal: { color: colorList[0] },
            },
          },
          {
            value: 100 - Number(props.data[0].jdt),
            name: "",
            label: {
              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
            },
            emphasis: {
              label: {
                show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
              },
            },
            itemStyle: {
              normal: { color: "#eff6fc" },
            },
          },
        ],
      },
    ],
  };