echarts-tooltip数据太多，被容器遮盖，分两列展示

使用 dataset 数据集画折线图，鼠标移上去（axis触发）

效果如图：

• 首先，处理tooltip展示的位置，由于数据过多，可以处理贴着容器最上边的边展示，使尽量展示最大化。
  文档中有 position 方法：

在代码中写：

tooltip: {
          trigger: 'axis',
          position: function(point, params, dom, rect, size) {
            return [point[1], 0]
          }
        },

• 然后开始撸 formatter：
• 
  代码：

tooltip: {
          trigger: 'axis',
          formatter: function(params) {
          	console.log(params)
          }，
          position: function(point, params, dom, rect, size) {
            return [point[1], 0]
          }
        },

打印 params 可以看到：

如效果图，我们需要展示的有 color ， 报警类型， 和 报警个数，用到了如上图红框的数据
接下来就处理params，完整代码：

tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let astr = ''
            params.forEach(ele => {
              const data = ele.data
              for (const key in data) {
                // 不为0的展示
                if (key === ele.seriesName && data[key]) {
                  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[key]}</span>
                    </div>
                 `
                }
              }
            })
            const b = '<div style="width: 300px;">' + astr + '<div>'
            return b
          },
          position: function(point, params, dom, rect, size) {
            return [point[1], 0]
          }
        }

其实很easy~
结束