echarts tooltips数据内容过多超出显示范围

第一种：使用echarts tooltips属性下的confine：限制tootip在容器内

使用confine属性的优点 ：在dom容器里面，不会出现数据显示被遮住
使用confine属性的缺点 ：在dom容器里面，当数据量过多时，整个tooltips盖住了下面的图表，

      tooltip: { // 提示框
          trigger: 'axis',
          confine: true // 限制tootip在容器内
     }

第二种：使用echarts positon设置位置和formatter格式化数据分列展示，可以分多列。下图只展示两列

formatter和position相结合使用的优点：可以展示数据量很大的数据，宽度较大推荐使用
formatter和position相结合使用的缺点：弹出的宽度无法自适应，数据过小点显示留白较多，会影响原有的布局，产生滚动条

 tooltip: { // 提示框
   trigger: 'axis',
   formatter: function (params) {
            let astr = ''
            console.log('params', params)
            params.forEach(ele => {
              const data = ele.data
              // 不为0的展示
              if (ele.seriesName && data) {
                astr += `
                    <div style="display: block;height:20px;width: 50%;float:left;">
                      <i style="width: 10px;height: 10px;display: inline-block;background: ${ele.color};border-radius: 10px;"></i>
                      <span>${ele.seriesName}: ${data}</span>
                    </div>
                 `
              }
            })
            const b = '<div style="min-width:300px">' + astr + '<div>'
            return b
          },
           position: function (point, params, dom, rect, size) {
            return [point[1], 0]
          }
   }       

第三种：使用echarts tooltip属性属性下的appendToBody,把将 tooltip 的 DOM 节点添加为 HTML 的 的子节点，所有的数据都会展示

   tooltip: { // 提示框
          trigger: 'axis',
          appendToBody: true
  }