echarts-自定义tooltip悬浮文本，还原x轴，名称，颜色小点与值

通过formatter属性自定义样式，支持返回一个html字符串，那玩的花样可就多了
formatter返回参数中，比较常用的是：axisValuex轴的坐标值，valuex轴对应的值，seriesName折线的名称，marker颜色小点的html
下方代码可以直接运行在https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color

option = {
   tooltip: {
          trigger: "axis",
          formatter: params => {
            let str = `<div>${params[0].axisValue}</div>`
            params.forEach(item => {
              str += `<div style="display:flex;justify-content:space-between;width:150px;"><span>${item.marker}${item.seriesName}</span><span style="marigin-left:20px;">${
                item.value ? item.value : "-"
              }</span></div>`
            })
              // 数据差
              let result = "未超过"
              if (params[0].value && params[1].value) {
                // 比较不同
                const num = params[0].value - params[1].value
                if (num < 0) {
                  result = Math.abs(num).toFixed(2)
                }
              }
              str += `<div style="display:flex;justify-content:space-between;"><span><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FFDEE0;"></span>超过情况</span><span style="marigin-left:40px;">${result}</span></div>`
            return str
          }
        },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'a',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9]
    },
    {
      name: 'b',
      type: 'line',
      data: [1, 13, 2, 15, 3, 2, 0]
    }
  ]
};