echarts 图表中 axisLabel 和 tooltip 中值太长不自动换行问题

1、tooltip 中值太长不自动换行

        在tooltip中添加 extraCssText:'max-width:300px; white-space:pre-wrap;word-break:break-all;'

 tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          extraCssText:'max-width:300px; white-space:pre-wrap;word-break:break-all;'
        },

2、axisLabel  中值太长不自动换行

        在axisLabel中使用 formatter

axisLabel: {
            interval: 0,
            formatter: (params) => {
              // 文字自动换行处理
              return getEchartBarXAxisTitle(
                params,
                echartsOptions.value[1].options.series[0].data
              );
            }
          }

getEchartBarXAxisTitle() 方法

/**
 * <li>Echarts 中axisLabel中值太长自动换行处理；经测试：360、IE7-IE11、google、火狐  * 均能正常换行显示</li>
 * <li>处理echarts 柱状图 x 轴数据显示根据柱子间隔距离自动换行显示</li>
 * @param title				将要换行处理x轴值
 * @param datas       x轴数据，用于计算柱状图柱子个数
 * @param fontSize			x轴数据字体大小，根据图片字体大小设置而定，此处内部默认为12
 * @param barContainerWidth	        柱状图初始化所在的外层容器的宽度
 * @param xWidth			柱状图x轴左边的空白间隙 x 的值，详见echarts文档中grid属性，默认80
 * @param x2Width			柱状图x轴邮编的空白间隙 x2 的值，详见echarts文档中grid属性，默认80
 * @param insertContent		每次截取后要拼接插入的内容， 不传则默认为换行符：\n
 * @returns titleStr		截取拼接指定内容后的完整字符串
 */
export function getEchartBarXAxisTitle(
  title,
  datas,
  fontSize = 12,
  barContainerWidth = 698,
  xWidth = 80,
  x2Width = 80,
  insertContent = '\n'
) {
  if (!title || title.length == 0) {
    console.log('截取拼接的参数值不能为空！');
    return false;
  }
  if (!datas || datas.length == 0) {
    console.log('用于计算柱状图柱子个数的参数datas不合法！');
    return false;
  }
  if (Number.isNaN(barContainerWidth)) {
    console.log('柱状图初始化所在的容器的宽度不是一个数字');
    return false;
  }
  let xAxisWidth =
    parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width)); //柱状图x轴宽度=统计页面宽度-柱状图x轴的空白间隙(x + x2)
  let barCount = datas.length; //x轴单元格的个数（即为获取x轴的数据的条数）
  let preBarWidth = Math.floor(xAxisWidth / barCount); //统计x轴每个单元格的间隔
  let preBarFontCount = Math.floor(preBarWidth / fontSize); //柱状图每个柱所在x轴间隔能容纳的字数 = 每个柱子 x 轴间隔宽度 / 每个字的宽度（12px）
  if (preBarFontCount > 3) {
    //为了x轴标题显示美观，每个标题显示留两个字的间隙，如：原本一个格能一样显示5个字，处理后一行就只显示3个字
    preBarFontCount -= 1;
  } else if (preBarFontCount <= 3 && preBarFontCount >= 2) {
    //若每个间隔距离刚好能放两个或者字符时，则让其只放一个字符
    preBarFontCount -= 1;
  }

  let newTitle = ''; //拼接每次截取的内容，直到最后为完整的值
  let titleSuf = ''; //用于存放每次截取后剩下的部分
  let rowCount = Math.ceil(title.length / preBarFontCount); //标题显示需要换行的次数

  if (rowCount > 1) {
    //标题字数大于柱状图每个柱子x轴间隔所能容纳的字数，则将标题换行
    // 常规换行版本
    // for (let j = 1; j <= rowCount; j++) {
    //   if (j == 1) {
    //     newTitle += title.substring(0, preBarFontCount) + insertContent;
    //     titleSuf = title.substring(preBarFontCount); //存放将截取后剩下的部分，便于下次循环从这剩下的部分中又从头截取固定长度
    //   } else {
    //     let startIndex = 0;
    //     let endIndex = preBarFontCount;
    //     if (titleSuf.length > preBarFontCount) {
    //       //检查截取后剩下的部分的长度是否大于柱状图单个柱子间隔所容纳的字数

    //       newTitle += titleSuf.substring(startIndex, endIndex) + insertContent;
    //       titleSuf = titleSuf.substring(endIndex); //更新截取后剩下的部分，便于下次继续从这剩下的部分中截取固定长度
    //     } else if (titleSuf.length > 0) {
    //       newTitle += titleSuf.substring(startIndex);
    //     }
    //   }
    // }
    // 省略号版本
    for (let j = 1; j <= rowCount; j++) {
      if (j == 1) {
        newTitle += title.substring(0, preBarFontCount) + insertContent;
        titleSuf = title.substring(preBarFontCount); //存放将截取后剩下的部分，便于下次循环从这剩下的部分中又从头截取固定长度
      } else {
        let startIndex = 0;
        let endIndex = preBarFontCount;
        if (j == 2) {
          if (titleSuf.length > preBarFontCount) {
            //检查截取后剩下的部分的长度是否大于柱状图单个柱子间隔所容纳的字数

            newTitle +=
              titleSuf.substring(startIndex, endIndex) + insertContent;
            titleSuf = titleSuf.substring(endIndex); //更新截取后剩下的部分，便于下次继续从这剩下的部分中截取固定长度
          } else if (titleSuf.length > 0) {
            newTitle += titleSuf.substring(startIndex);
          }
        } else {
          if (j == rowCount) {
            // 三个省略号的长度差不多为1
            titleSuf = title.substring(
              title.length - preBarFontCount + 1,
              title.length
            );
            newTitle += ' ... ' + titleSuf + insertContent;
          }
          titleSuf = titleSuf.substring(endIndex);
        }
      }
    }
  } else {
    newTitle = title;
  }
  return newTitle;
}

参考链接：Echarts 关于 axisLabel 中值太长不自动换行的问题