用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是每个时间段折线的数据,有两条数据的话,可以通过下标拿到各条折线的数据,接下来我们就可以通过模板字符串进行自定义了! 效果如下图:
在这里插入图片描述
这样我们的效果就实现啦! 希望能帮到你们。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐