echarts进度条制作

直接上图

横向的，可以放到组件的，不需要太高

option = {
    grid: { left: '5%', top: '5', right: '25%', bottom: '5' },
    xAxis: {
      type: 'value',
      show: false,
      max: 100, // 最大值值用机组的maxNumber，保证柱子背景长度
    },
    yAxis: [
      {
        type: 'category',
        position: 'right',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#333333',
          },
          formatter: function (params) {
            return `${params}`;
          },
        },
        data: ['25'],
      },
    ],
    series: [
      {
        name: '正数',
        type: 'bar',
        stack: '总量',
        barWidth: 12,
        barMinHeight: 20,
        silent: true, // 禁止点击事件
        showBackground: true,
        backgroundStyle: {
          // 柱子背景设置
          borderRadius: [30, 30, 30, 30],
          color: '#e7e7e7',
        },
        emphasis: {
          focus: 'series',
        },
        data: ['25'],
        itemStyle: {
          normal: {
            barBorderRadius: [30, 30, 30, 30],
            label: {
              show: false,
              position: 'right',
              formatter: function (params) {
                var val1 = params.value + '' + unit;
                return val1;
              },
            },
            color:'yellow',
          },
        },
      },
      {
        name: '正数',
        type: 'bar',
        stack: '总量',
        barWidth: 12,
        barMinHeight: 20,
        silent: true, // 禁止点击事件
        showBackground: true,
        backgroundStyle: {
          // 柱子背景设置
          borderRadius: [30, 30, 30, 30],
          color: '#e7e7e7',
        },
        emphasis: {
          focus: 'series',
        },
        data: ['15'],
        itemStyle: {
          normal: {
           
            label: {
              show: false,
              position: 'right',
              formatter: function (params) {
                var val1 = params.value + '' + unit;
                return val1;
              },
            },
            color: 'red'
          },
        },
      },
      {
        name: '正数',
        type: 'bar',
        stack: '总量',
        barWidth: 12,
        barMinHeight: 20,
        silent: true, // 禁止点击事件
        showBackground: true,
        backgroundStyle: {
          // 柱子背景设置
          borderRadius: [30, 30, 30, 30],
          color: '#e7e7e7',
        },
        emphasis: {
          focus: 'series',
        },
        data: ['15'],
        itemStyle: {
          normal: {
           
            label: {
              show: false,
              position: 'right',
              formatter: function (params) {
                var val1 = params.value + '' + unit;
                return val1;
              },
            },
            color: 'green'
          },
        },
      },
      {
        name: '正数',
        type: 'bar',
        stack: '总量',
        barWidth: 12,
        barMinHeight: 20,
        silent: true, // 禁止点击事件
        showBackground: true,
        backgroundStyle: {
          // 柱子背景设置
          borderRadius: [30, 30, 30, 30],
          color: '#e7e7e7',
        },
        emphasis: {
          focus: 'series',
        },
        data: ['15'],
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: 'right',
              formatter: function (params) {
                var val1 = params.value + '' + unit;
                return val1;
              },
            },
            color: 'blue'
          },
        },
      },
    ],
  };