echarts tooltip的formatter自定义样式设置

用echarts折线图的时候，hover数据点的样式是默认，但是有的时候显示的样式和自己理想的样式有区别的时候，我们就需要自己更改样式，来满足自己的需求，呢要怎么进行更改呢，官方文档说明可以在tooltip的formatter方法里面进行定义，下面我们来看一下：
hover数据点的默认样式是这样的：

因为时间段比较长的时候，他只会显示年份，月份和日份，但是我如果需要加上每段数据的具体时间，也就是精确到几点几分，这个时候会怎么办呢？我们就可以在tooltip的formatter里面进行自定义，手动添加一些我们需要的数据。如图：

 myChart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let str = params[0].data[0] + "<br />";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+item.color+'"></span>' + item.seriesName + " : " + item.data[1] + "<br />";
            });
            return str;
          },
        },
        });

其中params是每个时间段折线的数据，有两条数据的话，可以通过下标拿到各条折线的数据，接下来我们就可以通过模板字符串进行自定义了！ 效果如下图：

这样我们的效果就实现啦！ 希望能帮到你们。