echarts tooltip的formatter自定义样式设置
用echarts折线图的时候,hover数据点的样式是默认,但是有的时候显示的样式和自己理想的样式有区别的时候,我们就需要自己更改样式,来满足自己的需求,呢要怎么进行更改呢,官方文档说明可以在tooltip的formatter方法里面进行定义,下面我们来看一下:hover数据点的默认样式是这样的:因为时间段比较长的时候,他只会显示年份,月份和日份,但是我如果需要加上每段数据的具体时间,也就是精确到
·
用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是每个时间段折线的数据,有两条数据的话,可以通过下标拿到各条折线的数据,接下来我们就可以通过模板字符串进行自定义了! 效果如下图:
这样我们的效果就实现啦! 希望能帮到你们。
更多推荐
所有评论(0)