场景1：内容多，但在容器足够显示这么多内容

方案1：设置tooltip.confine = true;将tooltip限制在容器内，下图为echarts对tooltip.confine的解释

方案2：设置position

/*1.设置x轴左右固定，上下跟随。*/
position: function(point, params, dom, rect, size){
    return [0,point[1]];
}

/*2.设置Y轴上下固定，X左右跟随。*/
position: function(point, params, dom, rect, size){
    return [point[1],0];
}

 

场景2：内容多，容器过小，设置为在容器内部显示也无法显示完全

方案1：格式化重新输出，使用tooltip的formatter配置项，格式化输出。

我的tooltip内容格式化代码：

tooltip: {
          formatter: function (params) {
            if (params instanceof Array) {
              let str = '';
              str += `${params[0].axisValue}<br/>`;
              params.forEach((m, index) => {
                str +=  `<span class="chart-tooltip-color" style="display: inline-block; margin-right: 10px; background-color: ${m.color}; width: 10px; height: 10px; border-radius:100%; margin-right: 5px"></span>`;
                str += `${m.seriesName}：${m.data}`;
                str += `${index % 3 === 0 ? '<br/>' : ''}`; //一排放几个可根据实际情况改变
              });
              return str;
            }
          },
        }

格式化之后的效果图如下图所示：

方案2：使用tooltip的extraCssText配置项，给tooltip添加样式，使文本支持换行展示

 tooltip: {
     trigger: 'axis',
     confine: true,
     extraCssText: 'white-space: normal; word-break: break-all;'
 },