## echarts y轴文本字数过多过长

叶玊儿

于 2024-01-18 18:34:54 发布

阅读量392

点赞数 10

分类专栏： echarts随笔文章标签： echarts javascript ecmascript 前端前端框架

本文链接：https://blog.csdn.net/weixin_61895123/article/details/135681470

版权

echarts随笔专栏收录该内容

1 篇文章 0 订阅

订阅专栏

随笔记录: echarts y轴文本字数过多过长解决办法


yAxis: [{

     type: 'category',

     inverse: true,

     axisLabel: {

      show: true,

      interval: 0,//标签设置为全部显示

      formatter:function(params){

        var newParamsName = "";// 最终拼接成的字符串

        var paramsNameNumber = params.length;// 实际标签的字数

        var provideNumber = 10;// 每行能显示的字的个数

        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整

        /**

         \* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签

         */

       // 条件等同于rowNumber>1

        if (paramsNameNumber > provideNumber) {

          /** 循环每一行,p表示行 */

          for (var p = 0; p < rowNumber; p++) {

            var tempStr = "";// 表示每一次截取的字符串

            var start = p * provideNumber;// 开始截取的位置

            var end = start + provideNumber;// 结束截取的位置

            // 此处特殊处理最后一行的索引值

            if (p == rowNumber - 1) {

              // 最后一次不换行

              tempStr = params.substring(start, paramsNameNumber);

            } else {

             // 每一次拼接字符串并换行

              tempStr = params.substring(start, end) + "\n";

            }

            newParamsName += tempStr;// 最终拼成的字符串

          }

        } else {

          // 将旧标签的值赋给新标签

          newParamsName = params;

        }

        //将最终的字符串返回

        return newParamsName

      },

      textStyle: {

       color: '#000'

      },

     },

     splitLine: {

      show: false

     },

     axisTick: {

      show: false

     },

     axisLine: {

      show: false

     },

     // data: ["安徽省", "河南省", "浙江省", "湖北省", "贵州省", "江西省", "江苏省", "四川省", "云南省", "湖南省"]

     // data: salvProName

    }]

Echarts x轴/y轴文本内容太长，toolship提示文本太长无法显示完整的几种解决方案_echarts y轴文字太长-CSDN博客 ===>>原博主文章出处

最后效果图