Echarts设置柱状图y轴垂直翻转展示

y轴垂直翻转

实现效果：

设置 inverse: true 即可，代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    inverse: true,
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

柱状图间距设置

实现效果：

设置 barCategoryGap: 0 即可，注意： 如果设置了 barWidth ，则barCategoryGap: 0 不会生效。
代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    inverse: true,
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      // barWidth: '5', // 设置柱 宽度
      barCategoryGap: 0, // 设置柱 间距
    }
  ]
};

y轴 坐标轴名称位置

翻转y轴之后会发现，y轴的 坐标轴名称 也翻转了，此时，我希望坐标轴名称还保留在顶部，可自定义 name的位置即可 nameLocation: 'start' ，实现效果和代码如下：
nameLocation 可选 'start'，'middle' 或者 'center'，'end'

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    name: '降雨量',
    nameLocation: 'start',
    inverse: true,
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      // barWidth: '5', // 设置柱 宽度
      // barCategoryGap: 0, // 设置柱 间距
    }
  ]
};