echarts 横向柱状图 不带进度条 最大值为最长的一条

这种效果 。 后面的数据可以带 可以不带。

 先上代码

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;

---

这个其实也不难 就是不太懂的有点繁琐。 首先我是先去最大值 ，作为进度条的最大值，

然后就是y轴是两条轴， 第二条是透明的 所以设置的白色 为了让看不到。

itemStyle 是为了显示后面的数据 如不不用 你可以删除 。其次我加了判断 ，因为如果数据是负的话 ，他会往后走 ，

 形成这样的格局 ， 就很丑 于是当他数据为负的时候 就不让他的进度条显示。