来源:echarts绘制进度条

const barWidth = 20;
option = {
  tooltip: {
    trigger: 'axis',
    formatter: (tipArr) => {
      let arr = tipArr
        .map((item) => {
          return {
            type: item.seriesName,
            value: item.value,
            marker: item.marker,
            axisValue: item.axisValue
          };
        })
        .filter((item) => {
          return item.type !== '进度条背景';
        });

      let map = new Map();
      for (let item of arr) {
        map.set(item.type, item);
      }
      let str = '';
      [...map.values()].forEach((i) => {
        str += `${i.marker}${i.axisValue}: ${i.value}%<br/>`;
      });
      return '控制率<br />' + str;
    }
  },
  grid: {
    left: '50',
    top: '40',
    right: '0',
    bottom: '10',
    containLabel: true
  },
  xAxis: {
    // 数值轴
    type: 'value',
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  yAxis: [
    {
      // 类目轴
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        show: true
      },
      // 标签文字样式
      axisLabel: {
        color: 'black',
        fontSize: 14,
        textStyle: {
          color: 'rgb(198, 237, 239)'
        }
      },
      data: ['成都厂', '什邡厂', '绵阳', '西昌厂', '长城雪茄厂'],
      max: 5, // 关键：设置y刻度最大值，相当于设置总体行高
      inverse: true
    }
  ],
  series: [
    {
      name: '控制率',
      type: 'bar',
      barWidth: barWidth,
      data: [40, 30, 20, 10, 5],
      barCategoryGap: 20,
      label: {
        show: true,
        position: 'inside',
        formatter: '{c}%',
        color: '#434343',
        fontSize: 14
      },
      // 颜色设置
      itemStyle: {
        normal: {
          barBorderRadius: 122,
          color: 'rgb(124, 255, 178)',
          position: 'right'
        }
      },
      zlevel: 1
    },
    {
      name: '进度条背景',
      type: 'bar',
      barGap: '-100%',
      barWidth: barWidth,
      data: [100, 100, 100, 100, 100],
      color: 'rgba(47, 50, 52)',
      itemStyle: {
        normal: {
          barBorderRadius: 122,
          barBorderColor: '#01a4bf',
          barBorderWidth: 0
        }
      }
    }
  ]
};