echarts横向柱形图显示不同类别所占整体百分比

横向柱形图实现思路为将每个类别名称设置为y轴，然后将x轴隐藏

显示所占百分比思路为设置两个数据区域，然后让两个数据区域重叠，其中一个将数据都设置成100,另一个就设置自己所占百分比就行了

xAxis: {
  show: false, //将x轴隐藏
  type: 'value',
  boundaryGap: [0, 0], //坐标轴两边留白策略,即图形在坐标轴内距离坐标轴线的边距,在未设置min和max值时,[0,0]表示两边不留白,图表紧挨坐标轴线,[0.3, 0.8]即表示图表距离轴线左边距为3*一个刻度值,距离右边界边距为8*一个刻度值,
  //min: 1000000 当设置min值是坐标轴起点的数值,如果Min值小于数据中的最小值,则图形会到坐标轴左侧显示,设置的boundrayGap: [x, y]中的x值无效,坐标轴刻度按max值和数据值来设定
  //max: 2000000 当设置max值是坐标轴终点的数值,设置的boundrayGap: [x, y]中的y值无效
}

yAxis: {
  axisLine: {
    show: false
  }, // y轴坐标轴线隐藏,注意不是y轴隐藏,我们还要显示文字的
  axisTick: [{
    show: false
  }] // y轴坐标轴刻度隐藏
}

// 设置两个数据区域
series: [
  {
    type: 'bar',
    data: [2.3, 64.2, 73.2, 63.4, 63.4]，
    tooltip: { show: false},
    barMinHeight: 30, //最小柱高
    barWidth: 10, // 柱宽度
    barMaxWidth: // 最大柱宽度
    z: 10, // 控制图表前后顺序
    itemStyle: { // 柱子样式
      normal: {
        color: '#ff6600', // 柱状图颜色
        label: {
          show: true, // 显示文本
          position: 'top', // 数据值位置
          formatter: '{c}%',
          textStyle: {
            color: '#000'
          }
        }
      }
    }
  },
  {
    type: 'bar',
    data: [100, 100, 100, 100, 100],
    tooltip: { show: false},
    barMinHeight: 30,
    barWidth: 10,
    barMaxWidth: 100,
    barGap: '-100%', // 两个柱子之间的距离，如果要重叠设置为-100%
    itemStyle: {
      normal: {
        color: '#ccc', // 柱子颜色，作为底层背景
        label: {
          show: false,
          position: 'top',
          testStyle: {
            color: '#000'
          }
        }
      }
    }
  }
]