Echarts横向柱状图显示配置

需求描述

• 柱子横向显示
• 标题显示在柱子上方
• 颜色不同，且使用渐变效果
• 显示横向刻度线，不显示其他坐标轴及刻度线

要求效果

配置代码

// Echarts配置
// x轴：只显示刻度线，不显示轴线及刻度值
xAxis: {
  type: 'value',
  show: true,
  splitLine: {
    show: true, // 分隔线
  },
  axisLine: {
    show: false, // 轴线
  },
  axisLabel: {
    show: false, // 轴线文字
  },
},
// y轴：刻度值显示在柱子上方
yAxis: {
  type: 'category',
  data: [...],
  axisLabel: {
    show: true,
    inside: true,
    // 调整刻度值显示位置
    textStyle: {
      color: '#93A0AC',
      verticalAlign: 'bottom',
      fontSize: 12,
      align: 'left',
      padding: [0, 0, 15, -5], // 调整到刚好轴线上方
    },
  },
  axisTick: {
    show: false, // 轴线刻度
  },
  axisLine: {
    show: false,
  },
  inverse: true, // 横向柱状图默认为从下往上排列，此处进行翻转
},
// 数据
series: [
  {
    name: '',
    type: 'bar',
    label: {
      position: 'right', // 数据显示在横向柱子顶部
      show: true,
    },
    barWidth: 20,
    emphasis: {
      focus: 'series',
    },
    data: [...],
    itemStyle: {
      color: (params) => {
        // 动态给每个柱子设置渐变色
        const index = params.dataIndex
        return new echarts.graphic.LinearGradient(1, 0, 0, 0, 
        [
        // 默认的颜色顺序需要提前定义
          {
            offset: 0,
            color: BAR_COLOR_LIST[index][0], // 开始颜色 
          },
          {
            offset: 1,
            color: BAR_COLOR_LIST[index][1], // 结束颜色
          },
        ])
      },
    },
  },
],