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

最新推荐文章于 2024-08-12 15:19:16 发布

p g one

最新推荐文章于 2024-08-12 15:19:16 发布

阅读量6.4k

点赞数 4

分类专栏： vue 文章标签： vue.js echarts

本文链接：https://blog.csdn.net/weixin_47711357/article/details/113523747

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

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

在这里插入图片描述

yAxis: [{
        type: 'category',
        inverse: true,
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: { // y轴文字的配置
            show: true,
            interval: 0,
            margin:80,
            textStyle: {
                align:'left',
                baseline:'middle',
                color:'#fff'
            },
        },
        data: ['大米1111', '玉米', '蔬菜', '鸡蛋', '坚果']
    }, {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '12'
            },
            formatter: function(value) {
                if (value >= 10000) {
                    return (value / 10000).toLocaleString() + '万';
                } else {
                    return value.toLocaleString();
                }
            },
        },
        data: [50000000, 22000000, 10000000, 5000000, 1]
    }]