问答

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

作者:admin 2021-08-03 我要评论

https://echarts.apache.org/ex... option = { title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis', axisPointer: { type:...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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
这种效果的
谢谢。

###

左对齐
yAxis: {

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

}

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • echart 柱状图如何让y轴文字靠左显示,

    echart 柱状图如何让y轴文字靠左显示,

  • npm 安装其他包出错

    npm 安装其他包出错

  • 移动端H5可以实现长按二维码识别功能

    移动端H5可以实现长按二维码识别功能

  • JS对象数组如何实现多属性查询?

    JS对象数组如何实现多属性查询?

腾讯云代理商
海外云服务器