echarts横向柱状图

一、效果图

二、代码

let option = {
    grid: {
      top: '8%',
      bottom: -20,
      right: 20,
      left: 20,
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data, 'name'),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        // 标题
        axisLabel: {
          interval: 0,
          inside: true,
          color: 'white',
          bottom: 15,
          fontSize: 12,
          itemStyle: {
            normal: {
              fontFamily: 'PingFangSC, PingFang SC' // 字体类型
            }
          },
          // margin: [0, 0, 0, 0],
          padding: [0, 0, 6, 0],
          align: 'left',
          verticalAlign: 'bottom',
          formatter: function (value, index) {
            let aVal = '@' + value
            let parts = aVal.split('@')
            return `{title|${parts[0]}}{unit|${parts[1]}}` //return '{title|' + value + '}'
          },
          rich: {
            title: {
              width: 6,
              height: 6,
              backgroundColor: '#fff',
              borderRadius: 100,
              margin: [0, 12, 0, 0] // width: 50,
              // fontSize: 12
            },
            unit: {
              padding: [0, 0, 0, 4]
            }
          }
        }
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data, 'name'),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 0,
          interval: 0,
          inside: true,
          padding: [0, 0, 5, 0],
          color: 'white',
          textStyle: {
            normal: {
              fontFamily: 'Voltage' // 字体类型
            }
          },
          align: 'right',
          verticalAlign: 'bottom',
          formatter: function (value, index) {
            let aa = data[index].value + '@G'
            let parts = aa.split('@')
            return `{fontSize|${parts[0]}}{unit|${parts[1]}}`
          },
          rich: {
            fontSize: {
              // 设置数字的字体大小
              fontSize: 15
            },
            unit: {
              // 设置单位的字体大小
              fontSize: 12,
              color: 'white',
              padding: [5, 0, 0, 5]
            }
          }
        }
      }
    ],
    series: [
      {
        type: 'bar',
        showBackground: true,
        barMinWidth: '5',
        backgroundStyle: {
          opacity: 0.1,
          color: '#4D88FE'
        },
        yAxisIndex: 0,
        data: data,
        barWidth: '3px',
        barCategoryGap: '0.3',
        itemStyle: {
          normal: {
            color: '#0090ff',
            borderRadius: [5, 5, 5, 5]
          }
        }
      }
    ]
  }