Echarts在线免费图表

 
            let percentage = 0.3;
option = {
   backgroundColor: "rgb(12,33,72)",
   title: {
      text: "使用率",
      textStyle: {
         fontSize: 20,
         fontWeight: "normal",
         color: "#fff",
      },
      x: "center",
      y: "38%",
   },
   graphic: [
      {
         type: "image",
         left: '39.2%',
         top: '36.5%',
         z: 1, // 设置背景图片的层叠顺序
         style: {
            image: "https://img.isqqw.com/profile/upload/2024/03/28/c73c05ac-e0db-46a7-bc34-5808fcf57907.png",
            width: 205,
            height: 205,
         },
      },
   ],
   series: [
      {
         type: "liquidFill",
         radius: "16%",
         center: ["50%", "50%"],
         data: [percentage, percentage],
         //水波
         color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: "rgba(20,180,255,0.5)",
               },
               {
                  offset: 1,
                  color: "rgba(20,180,255,1)",
               },
            ]),
         ],
         label: {
            normal: {
               color: "#fff",
               insideColor: "transparent",
               textStyle: {
                  fontSize: 30,
                  fontWeight: "bold",
                  fontFamily: "Microsoft YaHei",
               },
            },
         },
         outline: {
            show: true,
            borderDistance: 0,
            itemStyle: {
               borderColor: "#1a559f",
               borderWidth: 0,
               // shadowBlur: 20,
               // shadowColor: "rgba(165, 89, 15, 1)",
            },
         },
         backgroundStyle: {
            color: {
               type: "linear",
               x: 1,
               y: 0,
               x2: 0.5,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: "rgba(30, 108, 187, 0)",
                  },
                  {
                     offset: 0.5,
                     color: "rgba(30, 108, 187, .25)",
                  },
                  {
                     offset: 1,
                     color: "rgba(30, 108, 187, 1)",
                  },
               ],
               globalCoord: false,
            },
         },
         z: 5, // 设置水球图的层叠顺序
      },
   ],
}