eacharts tooltip 自定义内容

在做项目时有需求 在提示框里面自定义内容,查了文档后可以使用 formatter 来做

eacharts tooltip 自定义内容

官方例子中的name  相当于opction.series里面的数据,下面看实例更清晰。

在此例子中,我操作的是折线图标

eacharts tooltip 自定义内容

接下来查看 series 里面的内容

eacharts tooltip 自定义内容

 

其中使用的数据是这样的

eacharts tooltip 自定义内容

接下里看 console.log(e)里面是什么东西

eacharts tooltip 自定义内容

可以看到当鼠标移动到对应的数据小圆点的时候 就会出现这些数据,

接下来我们在formatter中利用e里面的数据,进行操作自己想要的内容

 

eacharts tooltip 自定义内容

其中  e[0]表示的就是当前的series[0]  ,这里我取了e[0].dataIndex 作为标记来显示对应的时间

var data 就使用了ES6拼接方法  最后返回data 这样就完成了自己定义的内容了

 

eacharts tooltip 自定义内容