Echarts X轴刻度标签换行显示

最新推荐文章于 2024-08-12 15:48:59 发布

郭周园

最新推荐文章于 2024-08-12 15:48:59 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/qvanminpiao/article/details/103153838

版权

本文介绍了如何在Echarts图表中实现X轴刻度标签的换行显示，通过调整配置项使长标签在有限的空间内自动换行，以保持图表的清晰易读。

摘要由CSDN通过智能技术生成

xAxis: [
    {
        'type':'category',
        splitLine: {show: false},
        axisLabel: {
            show: true,//是否显示
            interval:0,//强制显示
            //rotate:15,//倾斜显示
            //样式
            textStyle: {
                color: '#fff',
                fontSize:'10'
            },
            formatter : function(params){
                var newParamsName = "";// 最终拼接成的字符串
                var paramsNameNumber = params.length;// 实际标签的个数
                var provideNumber = 5;// 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {