echarts记录篇(二 ):使用横向柱状图实现左侧分类对齐右侧显示数据效果

发布时间 2023-07-23 16:53:00作者: 夏小夏吖

一、效果图如下:

 二、直接上代码

yAxis: [
    {//左侧name分类
        inverse: true, //如果数据数组倒置排序,加上此代码
        data:categories1,
        axisLabel: {
            fontSize: 16,
            color: '#fff' 
        },
        axisLine:{  
            show:false
        },
        axisTick: {
            show: false
        },
        splitLine:{ //修改背景线条样式
            show:false 
        }
    },
    {//右侧value数值
        inverse: true, //如果数据数组倒置排序,加上此代码
        data:data1,
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '16'
            },
            formatter: (value) =>{
                // console.log(data1,'data1哈哈啊');
                if(value){
                    value = (value*1).toLocaleString()
                }
                return value;
            },
        },
        axisLine:{  
            show:false
        },
        axisTick: {
            show: false
        },
        splitLine:{ //修改背景线条样式
            show:false 
        }
    }
],