echarts双折线图，tooltip展示自定义内容和样式

正常echarts的折线图的tooltip有默认的展示内容，是固定的。

那么如果需要自定义呢，滑过每一条数据，展示的都不一样，如下图：

上图中，分别滑过2023-12-25和2024-0101的tooltip的日期展示区间是不一致的。

解决方法两步：

（1） 组装数据。

正常y轴的数据是：

yData: [10, 100, 178, 299]

我们需要把y轴的数据，增加自定义字段，数据改为：

yData: [{value: 10}, {showStr: 'XXX'}]

增加一个showStr自定义字段，用在哪里呢？

（2） 格式化tooltip展示内容及样式。

 

tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          borderColor: '#CADBE9',
          borderWidth: 1,
          formatter: function (params) {
            let result = ''
            params.forEach((item, index) => {
              let color = item.borderColor
              let dom =
                `<span style="display:inline-block;margin-right:5px;margin-bottom:5px;border-radius:1px;width:12px;height:2px;background-color:${color};"></span><span style="color:#40444D;">${item.data.showStr}：</span><span style="color:#40444D;font-weight:700;font-size:20px">${item.value}</span>`
              if (index === 0) {
                result = `<span style="color:#40444D;">${item.name}</span>`
              }
              result += '<br />' + dom
            })
            return result
          },

这里就可以在formatter中随意添加数据，dom元素，自定义样式了。

以上。

祝大家所有的bug都能解决！