echarts中的自定义tooltip浮层展示

1.轴触发：轴触发拿到的数据是当前这条垂直线上的所有数据（这里做的处理是：将数据从大到小排，只展示数据较大的10条数据）

              tooltip: {
                trigger: 'axis',//轴触发
                formatter (params) {
                  // 拿到横坐标时间格式化一下
                  var res = `${i18n.$t('time')}:${moment(params[0].name).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )}\n`
                  var resCopy = []
                  for (var i = 0; i < params.length; i++) {
                    const name = params[i].seriesName //名称
                    const value = params[i].data[params[i].seriesName] //值
                    const marker = params[i].marker //样式（前面的小圆点）
                    if (value !== null) {
                      resCopy.push({ name: name, value: value, marker: marker })
                    }       
                  }
                  // 对结果排序 且 只保留10条数据
                  resCopy = resCopy.sort(_this.compare('value')).slice(0, 10)
                  for (var j = 0; j < resCopy.length; j++) {
                    // 如果是单条线提示只展示数据，如果是多条线提示显示名字+数据
                    if (resCopy[j].name === 'null') {
                      res += '<br>' + resCopy[j].marker + resCopy[j].value
                    } else if (resCopy[j].value !== null) {
                      res +=
                        '<br>' +
                        resCopy[j].marker +
                        resCopy[j].name +
                        '：' +
                        resCopy[j].value
                    }
                  }
                  return res
                }
              },

2.点触发：点触发拿到的是当前鼠标接触的点的数据

             tooltip: {
                trigger: 'item',//点触发
                formatter (params) {
                  // 拿到横坐标时间格式化一下
                  var res = `${i18n.$t('time')}:${moment(params[0].name).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )}\n`
                     //点触发拿到的只是当前点的数据
                    const name = params.seriesName
                    const value = params.data[params.seriesName]
                    const marker = params.marker    

                    // 如果是单条线提示只展示数据，如果是多条线提示显示名字+数据
                     if (name === 'null') {
                       res += '<br>' + params.marker + +value
                     } else {
                       if (value !== null) {
                         res += '<br>' + params.marker + name + '：' + value
                       }
                     }
            
                  return res
                }
              },

点触发的缺点：1.不太灵敏，必须精确的放到点上才出提示，用户体验不好。

                          2.针对多条线，且线之间有交叉的话，交叉点只能展示一个点，不能展示所有交叉的线的点

3.如果要展示的是一段文字，限宽不限高，文本自动换行：

   tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          extraCssText: 'white-space: pre-wrap;max-width:400px	',
          formatter: function (params) {
            return `<div >${params.data.name}</div>`
          }
        },