Echarts在线免费图表

 
            const data = [
   { name: "桂A12352", value: 95, state: "未关注" },
   { name: "桂A12619", value: 90, state: "已关注" },
   { name: "桂A99696", value: 80, state: "已关注" },
   { name: "桂A16161", value: 70, state: "已关注" },
   { name: "桂A15162", value: 60, state: "未关注" },
   { name: "桂A12352", value: 50, state: "未关注" },
];
const ydata = data.map((obj) => obj.value);
const state = data.map((obj) => obj.state);

option = {
    backgroundColor: '#091837', //背景颜色
   tooltip: {
      show: true,
      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)",
      },
   },
   legend: {
      show: false,
   },
   grid: {
      left: "2%",
      right: "2%",
      top: "5%",
      bottom: "0%",
   },
   xAxis: [
      {
         splitLine: {
            show: false,
         },
         type: "value",
         show: false,
         axisLine: {
            //x轴坐标轴，false为隐藏，true为显示
            show: false,
         },
      },
   ],
   yAxis: [
      {
         type: "category",
         show: true,
         splitLine: {
            show: false,
         },
         axisLine: {
            show: false,
         },

         axisTick: {
            show: false,
         },
         inverse: true,
         axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 25,
            margin: 80,
            show: true,
            fontSize: 14,
            formatter: function (params) {
               if (params == "未关注") {
                  return ["{b" + "|" + params + "}"];
               } else if (params == "已关注") {
                  return ["{a" + "|" + params + "}"];
               }
            },
            rich: {
               a: {
                  color: "#fff",
                  backgroundColor: "#3c9cff",
                  width: 50,
                  height: 14,
                  align: "center",
                  borderRadius: 5,
               },

               b: {
                  color: "#fff",
                  backgroundColor: "#d1d1d1",
                  width: 50,
                  height: 15,
                  align: "center",
                  borderRadius: 5,
               },
            },
         },
         data: state,
      },
      {
         type: "category",
         inverse: true,
         axisTick: "none",
         axisLine: "none",
         show: true,
         axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 17,
            // margin: 5,
            show: true,
            textStyle: {
               color: "rgba(255, 255, 255, 1)",
               fontSize: 12,
            },
            // formatter: function (value) {
            //   return value;
            // },
         },
         data: ydata,
      },
   ],
   series: [
      {
         show: true,
         name: "",
         type: "bar",
         barWidth: 5, // 柱子宽度
         barGap: "30%",
         showBackground: true,
         backgroundStyle: {
            color: {
               type: "linear",
               x: 0,
               y: 0,
               x2: 1,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: "rgba(5, 31, 81, 1)",
                  },
                  {
                     offset: 1,
                     color: "rgba(21, 78, 138, 1)",
                  },
               ],
            },
         },
         label: {
            show: true,
            offset: [5, -10],
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12,
            fontWeight: 500,
            position: "left",
            align: "left",
            formatter: function (params) {
               return params.data.name;
            },
         },
         itemStyle: {
            color: {
               type: "linear",
               x: 0,
               y: 0,
               x2: 1,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: "rgba(80, 179, 255, 0.3)",
                  },
                  {
                     offset: 1,
                     color: "rgba(93, 160, 236, 1)",
                  },
               ],
            },
         },
         data: data,
      },
   ],
   dataZoom: [
      {
         yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
         show: false, // 是否显示滑动条，不影响使用
         type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 4, // 展示到第几个。
      },
   ],
};