【求助】ECharts横向柱状图然后柱子上面自定义文字怎么弄？

Question

如图

Answer 1

option = {
  xAxis: {
    type: 'value',
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      type:'bar',
      data:[0,0,0,0,0,0,0],
      label:{
        show:true,
        position:'right',
        formatter(params){
          // 根据params来做判断显示
          return 'xxx'
        }
      }
    },
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
      label:{
        show:true,
        position:'right'
      },
    },
  ]
};

可以用两个柱状图来做此效果，其中一个柱状图数据为0，仅展示label，通过formatter来处理自定义文字。

https://echarts.apache.org/examples/zh/editor.html?c=bar-simple

可以在这个页面把代码贴进去看效果。

Answer 2

很明显就是修改 yAxis 相关的配置就好了，首先就是让文本位置改变到柱状图上方。
切换进去之后多半会被柱状图遮盖，所以需要修改 lineHeight 或者 padding/margin 值就行。
最后序号的问题则可以通过 formatter 格式化去设置。

option = {
  xAxis: {
    show: false,
  },
  yAxis: [{
    type: 'category',
    inverse: true,
    offset: -10,
    axisLine: 'none',
    show: true,
    axisLabel: {
      color: ['#666'],
      align: 'left',
      verticalAlign: 'bottom',
      lineHeight: 42,
      fontSize: 14,
      formatter: function (value, index) {
        return (index+1) + "." + value
      },
    },
    data: stationData,
  }],
  series: [{
    name: seriesName[1],
    type: 'bar',
    barWidth: 15,
    data: [18, 16, 17, 15, 16, 15, 14, 15, 14, 13],
  }],
};

相关文档
yAxis.axisLabel. inside - Apache ECharts
yAxis.axisLabel. padding - Apache ECharts
yAxis.axisLabel.formatter - Apache ECharts

Answer 3

https://echarts.apache.org/examples/zh/editor.html?c=bar-simple

option = {
  xAxis: {
    type: 'value',
    axisLine: 'none',
    splitLine: {
      show: false
    }
  },
  yAxis: {
     type: 'category',
    inverse: true,
    offset: -10,
    axisLine: 'none',
    show: true,
    axisLabel: {
      color: ['#666'],
      align: 'left',
      verticalAlign: 'bottom',
      fontSize: 18,
      formatter: function (value, index) {
        return (index  < 9 ? '0' + (index+1):index+1) + "." + value
      },
    },
    data: ['xxxxxxxx事项', 'xxxxxxxx事项', 'xxxxxxxx事项', 'xxxxxxxx事项', 'xxxxxxxx事项', 'xxxxxxxx事项', 'xxxxxxxx事项']
  },
  series: [
    {
      type:'bar',
    },
    {
      type: 'bar',
      data: [2358, 1952, 1887, 1652, 1426, 1352, 1022],
      label:{
        show:true,
        position:'right',
        color:'#45bf9c',
        fontSize:16,
        fontWeight:'bold'
      },
      itemStyle:{
        color:'#45bf9c',
        borderRadius: 50
      }
    },
  ]
};