Echarts在线免费图表

 
            const handred = 100;
const point = 81.3;
option = {
  title: {
    text: point + "%",
    x: "center",
    y: "center",
    textStyle: {
      fontWeight: "normal",
      color: "#29EEF3",
      fontSize: "55",
    },
  },

  series: [
    {
      name: "circle",
      type: "pie",
      startAngle: 0,
      clockWise: true,
      center: ["50%", "50%"],
      radius: ["70%", "80%"],
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      },
      hoverAnimation: false,
      data: [
        {
          value: point,
          name: "占比",
          itemStyle: {
            normal: {
              color: {
                // 颜色渐变
                colorStops: [
                  {
                    offset: 0,
                    color: "#4FADFD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#28E8FA", // 100% 处的颜色1
                  },
                ],
              },
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          name: "剩余",
          value: handred - point,
          itemStyle: {
            normal: {
              color: "#f7f7f7",
            },
          },
        },
      ],
    },
    {
      name: "circle",
      type: "pie",
      clockWise: true,
      startAngle: 0,
      center: ["50%", "50%"],
      radius: ["55%", "70%"],
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      },
      hoverAnimation: false,
      data: [
        {
          value: point,
          name: "占比",
          itemStyle: {
            normal: {
              color: "#e1eae1",
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          name: "剩余",
          value: handred - point,
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
        },
      ],
    },
  ],
}