echart 柱状图如何让y轴文字靠左显示,series上文字右对齐显示

https://echarts.apache.org/ex...

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
          splitLine: { // 网格线
            show: false
          }
    },
    yAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
        axisLabel: { // y轴文字的配置
            show: true,
            interval: 0,
            textStyle: {
              align: 'right',
            },
          },
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230],
            label: {
              show: true, // 开启显示
              position: 'right', // 在上方显示
              textStyle: {
                fontSize: 15
              }
            }
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807],
            label: {
              show: true, // 开启显示
              position: 'right', // 在上方显示
              textStyle: {
                fontSize: 15
              }
            }
        }
    ]
};

image.png
这种效果的
谢谢。

阅读 12.6k
1 个回答

左对齐
yAxis: {

type: 'category',
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
axisLabel: { // y轴文字的配置
    show: true,
    interval: 0,
    margin:80,
    textStyle: {
        align:'left',
        baseline:'middle'
    },
  },

}

柱上的数字是根据柱的长短走的。右对齐是拼出来的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题