Echarts在线免费图表

 
            const imgList = [
   "//img.isqqw.com/profile/upload/2023/10/25/6a800e50-f954-45c3-9bfe-5513ba471a7b.png",
   "//img.isqqw.com/profile/upload/2023/10/25/dc5077bc-3cd1-4e4e-9c67-9bb90cfece2a.png",
   "//img.isqqw.com/profile/upload/2023/10/25/5b0fff16-ef6f-4f31-8eab-ac0d0ef40a16.png",
   "//img.isqqw.com/profile/upload/2023/10/25/2d977653-3038-45a8-926b-d80b2e74bae2.png",
   "//img.isqqw.com/profile/upload/2023/10/25/4e93cf77-ca50-4cfd-862f-513be3479112.png",

]
const data = [
   { name: "楼表", value: 99.70, num: 433 },
   { name: "楼阀", value: 67.37, num: 567 },
   { name: "户表", value: 99.90, num: 2064 },
   { name: "户阀", value: 99.80, num: 1022 },
   { name: "面板", value: 99.71, num: 1022 }
]
// y轴数据
const ydata = data.map((item) => item.name)

option = {
   backgroundColor: "#000",
   tooltip: {
      trigger: "item",
      padding: [8, 15],
      backgroundColor: "rgba(12, 51, 115,0.8)",
      borderColor: "rgba(3, 11, 44, 0.5)",
      textStyle: {
         color: "rgba(255, 255, 255, 1)"
      },
      formatter: function (data) {
         return data.name + "数量：" + data.data.num + "，抄通率：" + data.value + "%"
      }
   },
   grid: {
      top: "10%",
      left: "16%",
      right: "10%",
      bottom: "3%"
   },
   yAxis: [
      // 图标
      {
         type: "category",
         data: ydata,
         inverse: true,
         axisLabel: {
            fontSize: "18px",
            verticalAlign: "bottom",
            lineHeight: 20,
            margin: 0,
            formatter: function (value, index) {
               return `{img${index}|} `
            },
            rich: {
               img0: {
                  width: 40,
                  height: 40,
                  backgroundColor: {
                     image: imgList[0]
                  }
               },
               img1: {
                  width: 40,
                  height: 40,
                  backgroundColor: {
                     image: imgList[1]
                  }
               },
               img2: {
                  width: 40,
                  height: 40,
                  backgroundColor: {
                     image: imgList[2]
                  }
               },
               img3: {
                  width: 40,
                  height: 40,
                  backgroundColor: {
                     image: imgList[3]
                  }
               },
               img4: {
                  width: 40,
                  height: 40,
                  backgroundColor: {
                     image: imgList[4]
                  }
               },
               img5: {
                  width: 40,
                  height: 40,
                  backgroundColor: {
                     image: imgList[5]
                  }
               }
            }
         },
         axisLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: "#13387a"
            }
         }
      },
      // 文字
      {
         gridIndex: 0,
         splitLine: "none",
         axisTick: "none",
         axisLine: "none",
         data: data.map((item) => item.value),
         inverse: true,
         axisLabel: {
            show: true,
            verticalAlign: "bottom",
            align: "right",
            padding: [0, 10, 10, 0],
            formatter: function (value) {
               return "{z|抄通率} {x|" + value + "%}"
            },
            rich: {
               z: { color: "#83C9FE", fontSize: 14 },
               y: {
                  color: "#3dffef"
               },
               x: {
                  color: "rgba(222, 237, 255, 1)",
                  fontSize: 14
               }
            }
         }
      }
   ],
   xAxis: {
      type: "value",

      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      splitLine: {
         show: false
      },
      axisLabel: {
         show: false
      }
   },

   series: [
      {
         name: "",
         type: "bar",
         zlevel: 2,
         barWidth: 8,
         itemStyle: {
            normal: {
               barBorderRadius: 2,
               color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                     offset: 0,
                     color: "#16C8FB"
                  },
                  {
                     offset: 1,
                     color: "#0958D2"
                  }
               ])
            }
         },
         data: data,
         label: {
            normal: {
               color: "#555",
               show: true,
               position: [0, -20],
               textStyle: {
                  fontSize: 16,
                  color: "#fff"
               },
               rich: {
                  a: {
                     fontSize: 14
                  },
                  b: {
                     fontSize: 14
                  }
               },
               formatter: function (a, b) {
                  return "{a|" + a.name + "}"
               }
            }
         }
      },
      {
         // 背景
         type: "bar",
         barGap: "-100%",
         barWidth: 8,
         top: -8,
         tooltip: {
            show: false
         },
         itemStyle: {
            normal: {
               color: "rgba(128, 164, 229, .2)"
            }
         },

         data: [100, 100, 100, 100, 100]
      }
   ]
}