echarts实现 进度条

实现如下效果

var data = [
  {
    name: "A",
    value: 1205,
    total: 10000,
  },
  {
    name: "B",
    value: 7907,
    total: 10000,
  },
  {
    name: "使用率",
    value: 950,
    total: 1033,
  },
];
var backGroundData: any = [],
  nameData: any = [],
  valueData: any = [],
  maxValue = 0;

maxValue = Math.max(...data.map((i) => i.total));
data.map((i) => {
  backGroundData.push(maxValue);
  nameData.push(i.name);
  valueData.push((i.value * maxValue) / i.total);
});

const gradients = [
  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: "#0085FA" /*#0085FA*/,
    },
    {
      offset: 0.7,
      color: "#00BBFD" /*#00BBFD*/,
    },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: "#f05f1c" /*#0085FA*/,
    },
    {
      offset: 0.3,
      color: "#e9ea07" /*#00BBFD*/,
    },
  ]),
];

 var option = {
    // width: "90%",
    grid: {
      left: "2%",
      right: "2%",
      top: "8%",
      bottom: "1%",
    },
    title: {
      text: "详细库位使用率",
      left: "left",
      top: "10",
      textStyle: {
        color: "#fff",
        fontSize: "14",
        fontWeight: "normal",
      },
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter(param: any) {
        const target: any = data.find((i) => i.name === param[0].name);
        const { value, total } = target;
        return `${target.name} ${value}：${total}`;
      },
      //   formatter: "{b}：{c}",
      textStyle: {
        fontSize: "12",
      },
    },
    xAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      inverse: true,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: nameData,
    },
    series: [
      {
        type: "bar",
        data: valueData,
        barWidth: 10,
        z: 10,
        itemStyle: {
          color(param: any) {
            console.log(param);
            return param.dataIndex >= 2 ? gradients[1] : gradients[0];
          },
          barBorderRadius: 15,
        },
        label: {
          show: true,
          fontSize: 12,
          distance: 10,
          position: [0, "-50%"],
          formatter: "{b}",
          offset: [0, -10],
          color: "#a0c9cc",
        },
      },
      {
        type: "bar",
        barGap: "-100%",
        barWidth: 10,
        animation: false,
        z: -1,
        itemStyle: {
          color: "#fff",
          barBorderRadius: 15,
        },
        label: {
          show: true,
          //   position: 'right',
          position: ["50%", "-120%"],
          fontSize: 12,
          color: "#a0c9cc",
          formatter: function (param: any) {
            const target: any = data.find((i) => i.name === param.name);
            const { value, total } = target;
            const per = Math.round((value / total) * 100);
            return `${value}/${total}=${per}%`;
          },
        },
        data: backGroundData,
      },
    ],
  };