使用echarts柱状图横坐标文字过长放不下，文字会被隐藏

Posted on 2022-08-04 14:10 火冰·瓶阅读(5498) 评论(0) 编辑收藏举报

1、可以设置字体倾斜实现效果

这是在xAxis: 中加入了

axisLabel: {
    interval: 0,
    rotate: 20
}

interval：间隔每个坐标之间的间隔，正常显示设置 0 就可以了。

rotate：偏移，也可以说是倾斜。值是number类型

但是这样可能会有新的问题，就是左右边距不够文字会被遮挡一部分，这就需要用到

grid:{
    left:"20%",   //grid 组件离容器左侧的距离
    right:"30px", //grid 组件离容器右侧的距离
    bottom:"20%"  //grid 组件离容器下边距的距离
}

　　可以设置边框的距离，调到合适的距离文字就可以完全展示出来了。

2、第二种是让文字竖直排列

直接设置formatter文字竖直显示

axisLabel中使用formatter回调，formatter有两个参数，使用方法是这样的formatter:function(value,index){}

axisLabel: {
    interval: 0,
    formatter:function(value)
        {
            return value.split("").join("\n");
        }
}

3、第三种让文字竖直排列

series: [
    {
        data: [10, 9, 7, 7, 6, 5, 5,5,4,1],
        type: 'bar',
        label: {
            show: true,
            position: 'insideBottom',//文字显示在柱子中
            distance: 3,//文件间距
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,//文件旋转90度
            formatter: '{b}             {c}',
            fontSize: 14,//文字大小
            textStyle: { color: "#ffffff" }//文字颜色
        },
        barWidth: '30',
        itemStyle: {
            color: 'rgba(84,112,198,1)',
        },
        emphasis: {
            itemStyle: {
                color: 'rgba(84,112,198,0.7)',
            }
        }
    }
]