两个echarts地图联动高亮区域
项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动,曾尝试了connect不好使,所以自己写了这段代码。代码思路为:
- 鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮;
- 鼠标移入地图时,根据鼠标在地图的坐标位置,使另一侧的地图tooltip悬浮于获取的坐标位置,保证两张地图的tooltip的位置相同。
遇见的坑:
- 使用dispatchAction引发showTip,会发现tooltip只能显示很短的时间,所以我鼠标移入地图时,给另一个地图设置
tooltip[0].alwaysShowContent=true
和tooltip[0].triggerOn="none"
。官网要求使用dispatchAction引发showTip需要设置triggerOn="none",但是我试了有没有都行,有alwaysShowContent=true
就行; - 在设置tooltip的时候,使用的是对象。而获取的时候tooltip会成为数组,也许echarts是为了满足多个tooltip的需求。
函数只要传进去echarts实例就行,代码如下:
//前面的代码省略直接调用,传入echarts实例对象
connectMap(chart1,chart2);
function connectMap(chart1,chart2){
//当鼠标移入左侧的地图上
chart1.on("mouseover",function(target){
var option=chart2.getOption();
option.tooltip[0].alwaysShowContent=true;
option.tooltip[0].triggerOn="none";
chart2.setOption(option,true);
chart2.dispatchAction({
type:'downplay',
seriesName:'rightmap'
})
chart2.dispatchAction({
type:'highlight',
name:target.name,
})
})
chart1.on("mousemove",function(target){
chart2.dispatchAction({
type:'showTip',
name:target.name,
x:target.event.offsetX,
y:target.event.offsetY
})
})
chart1.on("mouseout",function(){
var option=chart2.getOption();
option.tooltip[0].alwaysShowContent=false;
option.tooltip[0].triggerOn="mousemove";
chart2.setOption(option,true);
chart2.dispatchAction({
type:'hideTip'
})
})
//当鼠标移到右边的地图
chart2.on("mouseover",function(target){
var option=chart1.getOption();
option.tooltip[0].alwaysShowContent=true;
option.tooltip[0].triggerOn="none";
chart1.setOption(option,true);
chart1.dispatchAction({
type:'downplay',
seriesName:'rightmap'
})
chart1.dispatchAction({
type:'highlight',
name:target.name,
})
})
chart2.on("mousemove",function(target){
chart1.dispatchAction({
type:'showTip',
name:target.name,
x:target.event.offsetX,
y:target.event.offsetY
})
})
chart2.on("mouseout",function(){
var option=chart1.getOption();
option.tooltip[0].alwaysShowContent=false;
option.tooltip[0].triggerOn="mousemove";
chart1.setOption(option,true);
chart1.dispatchAction({
type:'hideTip'
})
})
}
两个echarts地图联动高亮区域的更多相关文章
- echarts地图自定义任意区域
这里可以直接在地图上框选区域,右侧会自动生成geojson
- Echarts 地图添加自定义区域
使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...
- echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
- 小程序Echarts 构建中国地图并锚定区域点击事件
小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...
- react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
- 本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
- ArcGIS JS 学习笔记4 实现地图联动
1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨. 2.准备 ...
- echarts地图扩展文件使用geoJson格式。
echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/ 这里可以生成省市区的json,但是最多生成到”区 ...
- cocos2dx混合模式应用———制作新手引导高亮区域 (2.2.0)
cocos2dx混合模式应用———制作新手引导高亮区域 转自:http://www.cnblogs.com/mrblue/p/3455775.html 首先,效果预览一下 高亮区域的图片: 示例代码: ...
随机推荐
- c语言——uthash使用
参考:https://troydhanson.github.io/uthash/userguide.html https://blog.csdn.net/lovemust/article/detail ...
- Python——函数设计与案例
函数设计与案例 一. 函数的定义与调用 如果在开发程序时,需要多次使用某块代码,但是为了提高编写的效率以及代码的重用,所以把具有独立功能的代码块组织为一个小块,这就是函数 打印如下 print('人生 ...
- CDN网络科普小文(小说版)
引言 作为公司 cdn 小组的一名小码仔,我为写一篇 cdn 的科普文章准备了好一段时间(大概有一个多月没有更新我的社交账号了). 在我刚进入公司,培训完,进入小组,了解到我们做的是 cdn 相关的工 ...
- ElasticSearch 分布式及容错机制
1 ElasticSearch分布式基础 1.1 ES分布式机制 分布式机制:Elasticsearch是一套分布式的系统,分布式是为了应对大数据量.它的特性就是对复杂的分布式机制隐藏掉. 分片机制: ...
- 关于 jmeter变量是否在引用时候需要加上引号的坑
今天在玩jmeter的时候,发现一个问题:一个关于 jmeter变量是否在引用时候需要加上引号的坑: 众所周知:jmeter引用变量的时候 需要使用${变量名} 但是:大家是否遇到过有时候变量名外需要 ...
- FatFs知识点总结[多篇转载]
一.实用简单的fatfs基础知识点总结: https://my.oschina.net/u/274829/blog/282135 二.深入点的FAT表解析: http://blog.chinaunix ...
- springboot通过maven下载依赖失败解决
公司直接用不了内网遇到的好的坑.导入网上的springboot项目的启动入口一致有报错,如:Cannot resolve symbol 'SpringApplication' maven配置设置都做了 ...
- 保姆教程系列二、Nacos实现注册中心
前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 上篇我们介绍到 保姆教程系列一.Linux搭建Nacos 注册中心原理 一.环境准备 Java版本:1.8+ (Linux ce ...
- synchronized和Lock的区别是什么?
原创2020-11-19 11:38:29011024区别:1.lock是一个接口,而synchronized是java的一个关键字.2.synchronized在发生异常时会自动释放占有的锁 ...
- kafka producer 打数据,ack 为 0, 1, -1 的时候代表啥, 设置 -1 的时候,什么情况下,leader 会认为一条消息 commit了?
1(默认) 数据发送到Kafka后,经过leader成功接收消息的的确认,就算是发送成功了.在这种情况下,如果leader宕机了,则会丢失数据. 0 生产者将数据发送出去就不管了,不去等待任何返回. ...