Echarts 地图（map）插件之鼠标HOVER和tooltip自定义数据

最新推荐文章于 2024-08-06 19:39:35 发布

weixin_30502157

最新推荐文章于 2024-08-06 19:39:35 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wwlhome/p/4643525.html

版权

本文介绍了如何在使用Echarts地图插件时，自定义鼠标HOVER时的事件及tooltip的数据。通过设置鼠标事件和调整formatter函数，可以实现地图元素被选中时的个性化提示效果。

摘要由CSDN通过智能技术生成

在项目开发中，有需要用到地图的地方，百度的echarts地图插件就是个不错的选择，

这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据；

一、鼠标HOVER时的事件：

参照官方文档解释,

可以看出这款插件有丰富的鼠标事件可供选择：

　　调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts（）调用的函数的最底部即可

1 var ecConfig = require('echarts/config');
2     myChart.on(ecConfig.EVENT.HOVER, function (param){
3         var selected = param.name;
4         //write your code here
5         //console.log(selected);打印参数
6         //hoverin();调用自定义函数
7         //document.getElementById('wrong-message').innerHTML = str;
8     });