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

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)',
                            }
                        }
                    }
                ]