一篇文章搞定echarts地图轮播高亮
前言
这两天忙着做公司的超级数据大屏,实在挤不出时间连续更文。
但是更文活动都坚持这么久了也不想停止更新,那我就分享一下在工作中经常用到的echarts地图轮播高亮吧。
技术栈用的是vue2.x 相信效果大家已经清楚了那我们就开干吧。
toDoList
- 简单的准备一个地图
- 保存实例备用
- 设置定时器
- 设置鼠标移入移出事件
just do it
准备一个地图
首先准备一个简简单单的地图,因为我在广州所以就用广东省的地图啦~
怎么在echarts使用地图我就不说了看看文档然后把对应的地图json导入就可以了,相信大家也会。对了有人问到我在哪里找地图json文件,我们可以在DataV.GeoAtlas查询我们想要找的城市然后选择Json文件下载就可以啦。
保存实例备用
首先我们要知道想让地图轮播高亮就需要用到eharts自带的dispatchActionAPI,而这个API是要用eharts实例去使用的,所以在vue中我们要将一开始地图初始化的实例给保存下来。
<template> <div ref="myChart" id="myChart" class="gzMap"></div> </template> ... data () { return { charts: '', option:{ ... } }; }, ... mounted () { this.$echarts.registerMap('广东', gzData);//获取地图数据 this.setMyEchart(); // 页面挂载完成后执行 }, methods:{ setMyEchart () { const myChart = this.$refs.myChart; // 通过ref获取到DOM节点 if (myChart) { const thisChart = this.$echarts.init(myChart); // 利用原型Echarts的初始化 this.charts = thisChart;//保存实例 thisChart.setOption(this.option); // 将编写好的配置项挂载到Echarts上 } }, } ...
我们在一开始初始化echarts的时候讲实例保存起来等下来使用,其余的配置大家可以自行去配,源码会放在文章底下,有兴趣的话可以拿走。
设置定时器轮播
因为要设置轮播高亮,说白了就是给一个时间,固定多少多少时间亮一下然后提示框出来一下,现在默认大家已经设置好普通的鼠标移入高亮和提示框。
首先设置一个定时器方法,然后在里面调用官方的高亮方法和提示框方法,在规定的时间内进行闪烁即可。
... data () { return { mTime: '', charts: '', index: -1, option:{ ... } }; }, ... methods:{ setMyEchart () { ... this.mapActive(); ... }, mapActive () { const dataLength = gzData.features.length; // 用定时器控制高亮 this.mTime = setInterval(() => { // 清除之前的高亮 this.charts.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: this.index }); this.index++; // 当前下标高亮 this.charts.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: this.index }); this.charts.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: this.index }); if (this.index > dataLength) { this.index = 0; } }, 2000); }, }
我们首先在data设置一个接收定时器的容器和一个index下标来代表是哪个城市高亮。
在mapActive()中先获取这个地图所有城市的数量dataLength,因为dispatchAction是根据下标来进行高亮切换的如果我们的index数量大于城市数量他就不会显示了,所有我们要控制inedx在所有城市数量以下。
设置定时器里面先清除之前高亮的城市,如果不清除的话就会一下子多个高亮了,不是我们想要的效果。
再使用我们的实例调用eharts的方法来实现高亮和提示框弹出,其中dispatchAction接收几个参数,type表示你要呈现的类型,比如高亮或者提示框,具体的可以在官网看到。
在最后我们再判断一下index是否超出城市dataLength数量,如果是则清零重新来过,至此我们的一个轮播高亮就完成了。
加入鼠标事件
当然我们不能就这样结束,还要加一些事件效果,比如说当我们鼠标移动到地图里面时会停止轮播只高亮我们选择的那个城市
methods:{ setMyEchart () { ... this.mapActive(); ... }, mouseEvents () { // 鼠标划入 this.charts.on('mouseover', () => { // 停止定时器,清除之前的高亮 clearInterval(this.mTime); this.mTime = ''; console.log(this.mTime); this.charts.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: this.index }); }); // 鼠标划出重新定时器开始 this.charts.on('mouseout', () => { this.mapActive(); }); }, }
可以看到我们给鼠标划入加入了事件,当我们鼠标移动到地图上时就清除之前对应index的城市,当然仅仅加入鼠标划入也是不行的,这样当我们鼠标滑动一次他就不会继续轮播高亮了,我们还需要加多一个鼠标划出事件,让定时器重新开启。
至此一个简单的高亮轮播就完成了,具体源码我放在这里。
总结
到此这篇关于echarts地图轮播高亮的文章就介绍到这了,更多相关echarts地图轮播高亮内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
- overlay就是在地图上以另外一种形式浮现在地图上,常见的地图覆盖物为这三种类型,如:popup 弹窗、label标注信息、text文本信息等,接下来跟随小编看下openlayers6之地图覆盖物overlay详解,一起看看吧...2021-09-15
- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
本文给大家介绍javascript实现高德地图和百度地图提取行政区边界经纬度坐标的相关知识,本文实用性非常高,代码简单易懂,需要的朋友参考下吧...2016-01-24- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要介绍了百度地图API之百度地图退拽标记点获取经纬度的实现代码,需要的朋友可以参考下...2017-01-16
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06
- 这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-11
- 相信大家现在都知道微信小程序吧,下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料,分享出来供大家参考学习,文中通过示例代码介绍的非常详细,需要的朋友们下面跟着小编来一起学习学习吧。...2017-06-15
- 这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下...2016-03-07
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30echarts实现获取datazoom的起始值(包括x轴和y轴)
这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20- 猪先飞网之前分享过多篇关于帝国CMS当前栏目高亮的教程,点此查看 ,各有各的特点,各有各的优势,今天猪先飞网再分享一篇帝国CMS自定义导航栏目当前栏目高亮教程,于之前的不同处在...2015-12-30
在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧...2016-02-26