Echarts在线免费图表

 
            
const value = 80;
const rate = Math.round(value * 100 / 100);
option = {
   backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
   title: [
      {
         text: "单位：%",
         top: 0,
         left: 0,
         textStyle: {
            fontWeight: "normal",
            fontSize: 16,
            color: "#fff",
         },
      },
      {
         text: "{a|" + rate + "}",
         show: true,
         x: "center",
         y: "35%",
         textStyle: {
            rich: {
               a: {
                  fontSize: 30,
                  color: "#FFFFFF",
                  fontWeight: "bold",
               },
            },
         },
      },
      {
         text: '赋值覆盖率',
         x: "center",
         y: "center",
         borderColor: "#fff",
         textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "#fff",
         },
      },
   ],
   polar: {
      center: ["50%", "40%"],
      radius: ["60%", "75%"],
   },
   angleAxis: {
      max: 100,
      show: false,
   },
   radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
   },
   series: [
      {
         data: [value],
         name: "",
         type: "bar",
         roundCap: true,
         showBackground: true,
         backgroundStyle: {
            color: "rgba(19, 84, 146, .4)",
         },
         coordinateSystem: "polar",
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                     offset: 0,
                     color: "#005DCF",
                  },
                  {
                     offset: 1,
                     color: "#00CCFF",
                  },
               ]),
            },
         },
      },
   ],
}