Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择,
这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据;
一、鼠标HOVER时的事件:
参照官方文档解释,
可以看出这款插件有丰富的鼠标事件可供选择:
调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts()调用的函数的最底部即可
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.HOVER, function (param){
var selected = param.name;
//write your code here
//console.log(selected);打印参数
//hoverin();调用自定义函数
//document.getElementById('wrong-message').innerHTML = str;
});
二、tooltip的数据自定义;
这块研究了一段时间,都是浅浅的研究,
tooltip就是鼠标放在地图上显示的提示,如图红框里的就是tooltip的内容;
这里总结的主要是这块数据的自定义;
官方文档介绍说需要修改formatter;
option = {
tooltip : {
trigger: 'item',
formatter: '{b}'
}
},
文档中说明:formatter支持函数自定义数据及模板
那么,我们可以把上面的代码改造一下:
首先自定义一些数据:(例子)这里是图片的url
var $imgs = [
{area: '北京', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '天津', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '上海', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '重庆', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '河北', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '河南', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '云南', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '辽宁', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '黑龙江', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '湖南', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '安徽', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '山东', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '新疆', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '江苏', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '浙江', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '江西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '湖北', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '广西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '甘肃', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '山西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '内蒙古', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '陕西', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '吉林', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '福建', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '贵州', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '广东', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '青海', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '西藏', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '四川', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '宁夏', url:'http://www.blingschool.com/template/33/pc/images//logo2.png'},
{area: '海南', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '台湾', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '香港', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'},
{area: '澳门', url:'http://www.blingschool.com/template/33/pc/images//logo3.png'}
];
当鼠标HOVER的时候,去判断取哪些值来显示;
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback){
var $pna = params.name;
var res = ''; for(var i = 0;i<$imgs.length;i++){
if($imgs[i].area == $pna){
res = '<img src="'+ $imgs[i].url +'" />';//设置自定义数据的模板,这里的模板是图片
//console.log(res);
break;
}
} setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);//回调函数,这里可以做异步请求加载的一些代码
}, 1000)
return 'loading';
}
}
最终完成的效果如图
Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据的更多相关文章
- Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义提示框
[自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...
- echarts地图map城市间如何连线
let bjData = [ [{name:'北京'}, {name:'上海',value:95}], [{name:'北京'}, {name:'广州',value:90}]]; let conver ...
- echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
- 解决:Map的area属性标签鼠标Hover可以给area加背景
css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...
- ECharts地图详解 【转】
$(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' ...
- echarts地图详解
$(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' ...
- echarts地图定时切换散点及多图表级联联动
本文目录 1. 摘要 2.引入ECharts以及地图相关json 3. 界面布局 4. js实现图形布局 5.定时循环jquery实现 6. 总结 1. 摘要 最近做项目遇到个统计相关需求,一个页面 ...
- 如何在鼠标hover时改变标注的样式
如何在鼠标hover时改变标注的样式? ---------------- 教程 ----------------------- 首先创建1张地图 //初始化地图对象,加载地图 var map ...
- ECharts(中国地图)的使用 及 非空 tooltip formatter 验证
中国地图使用频率很高下载文件: echarts.min.js网址: http://echarts.baidu.com/download.html点击: ...
随机推荐
- 题目1 : Farthest Point
时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 Given a circle on a two-dimentional plane. Output the integral ...
- Mac OS X 安装Ruby
安装CocoaPods第一步 起因:重装系统后需要重新安装CocoaPods网上搜了下发现很多都过时了,已经不能用了.而且taobao Gems源已经停止服务,现在有ruby-china提供服务 PS ...
- ActivityLifecycleCallbacks 如何控制activity的生命周期
Android开发 - ActivityLifecycleCallbacks使用方法初探 初识 ActivityLifecycleCallbacks 利用ActivityLifecycleCallba ...
- Spring Cloud 微服务二:API网关spring cloud zuul
前言:本章将继续上一章Spring Cloud微服务,本章主要内容是API 网关,相关代码将延续上一章,如需了解请参考:Spring Cloud 微服务一:Consul注册中心 Spring clou ...
- ios 获取手机设备信息
[UIDevice currentDevice]:表示设备 NSString *devices=[[NSString alloc] initWithFormat: @"unique id: ...
- WebView加载URL跳转到系统浏览器的解决方法
1.问题 webview加载url跳转到系统浏览器,用户体验非常的差 2.解决方法 重写WebViewClient的shouldOverrideUrlLoading(WebView view, Str ...
- 第4章 URL管理器和实现方法
URL管理器:管理待抓取URL集合和已抓取URL集合 -- 防止重复抓取.防止循环抓取 URL需要支持哪些功能: 添加新URL到待爬取集合中.判断待添加URL是否在容器中,判断是否还有待爬取URL,获 ...
- Laravel开发:Laravel框架门面Facade源码分析
前言 这篇文章我们开始讲 laravel 框架中的门面 Facade,什么是门面呢?官方文档: Facades(读音:/fəˈsäd/ )为应用程序的服务容器中可用的类提供了一个「静态」接口.Lara ...
- Ant自己主动编译打包&公布 android项目
Eclipse用起来尽管方便,可是编译打包android项目还是比較慢,尤其将应用打包公布到各个渠道时,用Eclipse手动打包各种渠道包就有点不切实际了,这时候我们用到Ant帮我们自己主动编译打包了 ...
- Mark指针的指针(**)和链表使用(*&)
利用二级指针删除单向链表 彻底理解链表中为何使用指针的指针或者指针的引用 详解C++指针的指针和指针的引用