echarts 文字换行----绝对

最新推荐文章于 2024-10-29 18:39:47 发布

原创最新推荐文章于 2024-10-29 18:39:47 发布 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

大屏自适应专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了一种用于处理长字符串的换行算法，该算法能够根据指定的字符数量自动调整文本布局，确保标签或参数名称在显示时既美观又清晰。通过循环处理和条件判断，算法实现了对超过规定长度的标签进行智能换行，适用于各种界面展示需求。

干货极品看对带走

想改哪里放哪里
在这里插入图片描述

 formatter: function (params) {
              var newParamsName = '' // 最终拼接成的字符串
              var paramsNameNumber = params.length // 实际标签的个数
              var provideNumber = 7 // 每行能显示的字的个数
              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
            }// x轴文字换行