Echarts在线免费图表

 
            const data = 65;
const name = "当前报到进度";
const color = "rgba(225, 255, 225 ";
const animation = false// 是否开启动画

option = {
   backgroundColor: "#0c2358",
   animationDuration: 2000,
   animation: animation,
   title: {
      text: data + "%",
      textStyle: {
         fontSize: 38,
         fontFamily: "PangMenZhengDao",
         fontWeight: 400,
         color: "#1FF7FF",
      },
      subtext: name,
      subtextStyle: {
         fontSize: 16,
         fontFamily: "Source Han Sans CN-Regular",
         fontWeight: 400,
         color: "#FFFFFF",
      },
      textAlign: "center",
      itemGap: 15,
      left: "50%",
      top: "44%"
   },
   series: [
      {// 中间圆
         name: "centerPie",
         type: "pie",
         startAngle: 180,
         center: ['50%', '50%'],
         radius: "65%",
         color: ["rgba(29, 246, 255, 0.1)"],
         label: { show: false },
         data: [
            {
               value: 50,
               name: "空白占比",
            }, {
               value: 50,
               name: "空白占比",
               itemStyle: {
                  color: "rgba(255,255,255,0)"
               },
               cursor: "default",
               tooltip: {
                  show: false
               }
            }
         ]
      },
      {// 外层圈
         name: 'outPie',
         type: 'pie',
         startAngle: 180,
         center: ['50%', '50%'],
         radius: ['70%', '80%'],
         color: [{
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
               offset: 0, color: 'rgba(152, 251, 255, 1)' // 0% 处的颜色
            }, {
               offset: 1, color: 'rgba(29, 246, 255, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
         }, "rgba(29, 246, 255, 0.1)"],
         label: { show: false },
         data: [
            { value: data / 2, name: 'rateOut' },
            { value: 50 - data / 2, name: 'blankOut' },
            {
               value: 50,
               name: "空白占比",
               itemStyle: {
                  color: "rgba(255,255,255,0)"
               },
               cursor: "default",
               tooltip: {
                  show: false
               }
            }
         ]
      },
      {// 主占比图
         name: 'pie',
         type: 'pie',
         startAngle: 180,
         center: ['50%', '50%'],
         radius: '80%',
         color: ["rgba(29, 246, 255, 0.1)", "transparent"],
         label: {
            show: false,
            position: "center",
            fontSize: 18,
            fontFamily: "HarmonyOS Sans-Medium",
            fontWeight: 500,
            color: color + ", 1)",
            formatter: (params) => {
               return data + "%"
            }
         },
         emphasis: {
            disabled: true,
         },
         data: [
            { value: data / 2, name: 'rate' },
            { value: 50 - data / 2, name: 'blank' },
            {
               value: 50,
               name: "空白占比",
               itemStyle: {
                  color: "rgba(255,255,255,0)"
               },
               cursor: "default",
               tooltip: {
                  show: false
               }
            }
         ]
      },
   ]
};