echarts horizontal histogram without progress bar, the maximum value is the longest one

this effect. The following data can be with or without.

 code first

import React, { Component, useState, useEffect, useMemo } from 'react';
import * as echarts from 'echarts';
import { DatasetComponent, GridComponent, VisualMapComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import {
  Row,
  Col,
}from 'antd'
echarts.use([DatasetComponent, GridComponent, VisualMapComponent, BarChart, CanvasRenderer]);

const Matechart = props => {
  let WaitPrice = props.WaitPrice - 0;
  let ShouldPrice = props.ShouldPrice - 0;
  let AlreadyPrice = props.AlreadyPrice - 0;
  let max = 0
  max = Math.max(WaitPrice , ShouldPrice , AlreadyPrice , 
    props.noAlreadyPrice,props.noWaitPrice , props.noShouldPrice )
  WaitPrice  < 0 ? WaitPrice = 0 : WaitPrice
  ShouldPrice < 0 ? ShouldPrice = 0 : ShouldPrice
  AlreadyPrice < 0 ? AlreadyPrice  = 0 : AlreadyPrice

  useEffect(() => {
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);

    let option = {
      dataset: {
        source: [[WaitPrice, '待回'], [AlreadyPrice, '已回'], [ShouldPrice, '应回']],
      },
      grid: {
        containLabel: false,
        // right:'10%',
        width:'60%',
      },
      xAxis: { name: 'amount', show: false, boundaryGap: [0, 0] },
      yAxis: [
        {
          type: 'category',
          data: ['待回', '已回', '应回'],
          axisLabel: {
            textStyle: {
              fontWeight: 'bolder',
              fontSize: 16,
              color: 'black',
            },
          },

          axisLine: { show: false },
          axisTick: [
            {
              show: false,
            },
          ],
          max: 2,
        },
        {
          type: 'category',
          // inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          data: [WaitPrice, AlreadyPrice, ShouldPrice],
          show: true,
          axisLabel: {
            textStyle: {
              color: 'white',
              fontSize: '12',
            },
          },
        },
      ],

      series: [
        {
          type: 'bar',
          zlevel: 1,
          encode: {
            // Map the "amount" column to X axis.
            x: 'amount',
            // Map the "product" column to Y axis
            y: 1,
          },
          itemStyle: {
            normal: {
              color: function(params) {
                var colorList = ['rgba(255,161,161)', 'rgba(158,181,255)', 'rgba(221,229,255)'];
                return colorList[params.dataIndex];
              },
              barBorderRadius: [3],
              label: {
                show: true, //开启显示
                position: 'right',
                // distance :15,
                padding: [3, 10, 10, 5],
                formatter: row => {
                  if (row.data[0]) {
                    return (row.data[0].toFixed() - 0).toLocaleString() + '元';
                  }else if ( row.data[0] === 0 ){
                    if( row.data[1] === '应回' ) return ( props.ShouldPrice !==null ?  (props.ShouldPrice.toFixed()- 0) .toLocaleString() + '元'   : 0 )
                    if( row.data[1] === '待回' ) return (  props.WaitPrice !== null  ?  (props.WaitPrice.toFixed()- 0) .toLocaleString() + '元'  :  0 )
                    if( row.data[1] === '已回' ) return (  props.AlreadyPrice !== null  ?   (props.AlreadyPrice.toFixed()- 0) .toLocaleString() + '元'  : 0 )               
                  }
                },
                textStyle: {
                  //数值样式
                  color: 'black',
                  fontSize: 16,
                  fontWeight: '700',
                },
              },
            },
          },
          barWidth: 20,
        },
        {
          name: '背景',
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          data: [max  ],
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255 , 0)',
              barBorderRadius: 0,
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  });
  return (
    <Row gutter={[24]}>
    <Col  xs={8} sm={22} xl={24} xxl={24} >
      <div
        id="main2"
        style={
   
   {
          minWidth: '100%',
          height: '280px',
        }}
      />
      </Col>
    </Row>
  );
};

export default Matechart;

---

This is actually not difficult, but it is a bit cumbersome to understand. First of all, I go to the maximum value first, as the maximum value of the progress bar,

Then there are two axes on the y-axis, the second one is transparent, so the white is set so that it cannot be seen.

itemStyle is to display the following data, if you don't use it, you can delete it. Secondly, I added a judgment, because if the data is negative, he will go backwards,

 Forming such a pattern is ugly, so when his data is negative, his progress bar will not be displayed.