项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动,曾尝试了connect不好使,所以自己写了这段代码。代码思路为:

  1. 鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮;
  2. 鼠标移入地图时,根据鼠标在地图的坐标位置,使另一侧的地图tooltip悬浮于获取的坐标位置,保证两张地图的tooltip的位置相同。


遇见的坑:

  1. 使用dispatchAction引发showTip,会发现tooltip只能显示很短的时间,所以我鼠标移入地图时,给另一个地图设置tooltip[0].alwaysShowContent=truetooltip[0].triggerOn="none"。官网要求使用dispatchAction引发showTip需要设置triggerOn="none",但是我试了有没有都行,有alwaysShowContent=true就行;
  2. 在设置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地图联动高亮区域的更多相关文章

  1. echarts地图自定义任意区域

    这里可以直接在地图上框选区域,右侧会自动生成geojson

  2. Echarts 地图添加自定义区域

    使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...

  3. echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  4. 小程序Echarts 构建中国地图并锚定区域点击事件

    小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...

  5. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  6. 本周学习总结(原生+Echarts地图)

    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...

  7. ArcGIS JS 学习笔记4 实现地图联动

    1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨. 2.准备 ...

  8. echarts地图扩展文件使用geoJson格式。

    echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json,但是最多生成到”区 ...

  9. cocos2dx混合模式应用———制作新手引导高亮区域 (2.2.0)

    cocos2dx混合模式应用———制作新手引导高亮区域 转自:http://www.cnblogs.com/mrblue/p/3455775.html 首先,效果预览一下 高亮区域的图片: 示例代码: ...

随机推荐

  1. c语言——uthash使用

    参考:https://troydhanson.github.io/uthash/userguide.html https://blog.csdn.net/lovemust/article/detail ...

  2. Python——函数设计与案例

    函数设计与案例 一. 函数的定义与调用 如果在开发程序时,需要多次使用某块代码,但是为了提高编写的效率以及代码的重用,所以把具有独立功能的代码块组织为一个小块,这就是函数 打印如下 print('人生 ...

  3. CDN网络科普小文(小说版)

    引言 作为公司 cdn 小组的一名小码仔,我为写一篇 cdn 的科普文章准备了好一段时间(大概有一个多月没有更新我的社交账号了). 在我刚进入公司,培训完,进入小组,了解到我们做的是 cdn 相关的工 ...

  4. ElasticSearch 分布式及容错机制

    1 ElasticSearch分布式基础 1.1 ES分布式机制 分布式机制:Elasticsearch是一套分布式的系统,分布式是为了应对大数据量.它的特性就是对复杂的分布式机制隐藏掉. 分片机制: ...

  5. 关于 jmeter变量是否在引用时候需要加上引号的坑

    今天在玩jmeter的时候,发现一个问题:一个关于 jmeter变量是否在引用时候需要加上引号的坑: 众所周知:jmeter引用变量的时候 需要使用${变量名} 但是:大家是否遇到过有时候变量名外需要 ...

  6. FatFs知识点总结[多篇转载]

    一.实用简单的fatfs基础知识点总结: https://my.oschina.net/u/274829/blog/282135 二.深入点的FAT表解析: http://blog.chinaunix ...

  7. springboot通过maven下载依赖失败解决

    公司直接用不了内网遇到的好的坑.导入网上的springboot项目的启动入口一致有报错,如:Cannot resolve symbol 'SpringApplication' maven配置设置都做了 ...

  8. 保姆教程系列二、Nacos实现注册中心

    前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 上篇我们介绍到  保姆教程系列一.Linux搭建Nacos 注册中心原理 一.环境准备 Java版本:1.8+   (Linux ce ...

  9. synchronized和Lock的区别是什么?

    原创2020-11-19 11:38:29011024区别:1.lock是一个接口,而synchronized是java的一个关键字.2.synchronized在发生异常时会自动释放占有的锁 ...

  10. kafka producer 打数据,ack 为 0, 1, -1 的时候代表啥, 设置 -1 的时候,什么情况下,leader 会认为一条消息 commit了?

    1(默认)  数据发送到Kafka后,经过leader成功接收消息的的确认,就算是发送成功了.在这种情况下,如果leader宕机了,则会丢失数据. 0 生产者将数据发送出去就不管了,不去等待任何返回. ...