echarts中x轴文字过长换行显示

实现：

xAxis:{
  axisLabel: {
     textStyle: textStyle,
     rotate: this.rotate ? -25 : 0, // 字体倾斜
     align: "center",//标识中间显示
     margin: 15,//距离X轴线的距离
     formatter : function(params){
         let newParamsName = "";// 最终拼接成的字符串
         const paramsNameNumber = params.length;// 实际标签的个数
         const provideNumber = 5;// 每行能显示的字的个数
         const rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
         /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
         */
         // 条件等同于rowNumber>1
         if (paramsNameNumber > provideNumber) {
            /** 循环每一行,p表示行 */
            for (let p = 0; p < rowNumber; p++) {
                let tempStr = "";// 表示每一次截取的字符串
                const start = p * provideNumber;// 开始截取的位置
                const end = start + provideNumber;// 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                   // 最后一次不换行
                   tempStr = params.substring(start, paramsNameNumber);
                } else {
                   // 每一次拼接字符串并换行
                   tempStr = params.substring(start, end) + "\n\n";
                }
                newParamsName += tempStr;// 最终拼成的字符串
             }
          } else {
             // 将旧标签的值赋给新标签
             newParamsName = params;
          }
          //将最终的字符串返回
          return newParamsName
      }
   },
} 复制

封装js方法：

// 获取x轴文字样式
/**
 * @description
 * @param {*} xLabel tilt:倾斜 wrap:换行 vertical：垂直 stagger：错行 default：默认
 * @param {*} rotationAngle, // 文字倾斜的角度
 * @return {*}
 */
export const getXLabelStyle = (xLabel, rotationAngle = '45') => {
  // x轴文字显示方法1：倾斜显示
  const axisLabelTilt = {
    interval: 0, // 强制全部显示，1表示隔一个；2隔两个
    rotate: rotationAngle, // 文字倾斜的角度
  };
 
  // x轴文字显示方法2：换行显示
  const axisLabelWrap = {
    interval: 0, // 强制全部显示，1表示隔一个；2隔两个
    formatter(params) {
      let newParamsName = ''; // 最终拼接成的字符串
      const paramsNameNumber = params.length; // 实际标签的个数
      const provideNumber = 3; // 每行能显示的字的个数
      const rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
      /**
       * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
       */
      // 条件等同于rowNumber>1
      if (paramsNameNumber > provideNumber) {
        /** 循环每一行,p表示行 */
        for (let p = 0; p < rowNumber; p += 1) {
          let tempStr = ''; // 表示每一次截取的字符串
          const start = p * provideNumber; // 开始截取的位置
          const 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轴文字显示方法3：垂直显示
  const axisLabelVertical = {
    interval: 0, // 强制全部显示，1表示隔一个；2隔两个
    formatter(params) {
      return params.split('').join('\n');
    },
  };
 
  // x轴文字显示方法4：错行显示
  const axisLabelStagger = {
    interval: 0, // 强制全部显示，1表示隔一个；2隔两个
    formatter(value, index) {
      if (index % 3 === 0) {
        return value;
      }
      if (index % 3 === 1) {
        return `\n\n${value}`;
      }
      if (index % 3 === 2) {
        return `\n\n\n\n${value}`;
      }
    },
  };
 
  if (xLabel === 'tilt') return axisLabelTilt;
  if (xLabel === 'wrap') return axisLabelWrap;
  if (xLabel === 'vertical') return axisLabelVertical;
  if (xLabel === 'stagger') return axisLabelStagger;
  if (xLabel === 'default') return {};
};
 复制