一篇文章搞定echarts地图轮播高亮

 更新时间:2021年08月20日 12:47:00   作者:快跑啊小卢_  
ECharts是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求,下面这篇文章主要给大家介绍了关于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地图轮播高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js中的如何定位固定层的位置

    js中的如何定位固定层的位置

    这篇文章主要介绍了js中的如何定位固定层的位置,需要的朋友可以参考下
    2014-06-06
  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    这篇文章主要介绍了Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-05-05
  • javascript 代码是如何被压缩的示例代码

    javascript 代码是如何被压缩的示例代码

    这篇文章主要介绍了javascript 代码是如何被压缩的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript设计模式手写示例讲解

    JavaScript设计模式手写示例讲解

    这篇文章主要介绍了JavaScript设计模式手写示例,设计模式(Design pattern) 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好
    2022-12-12
  • javascript history对象详解

    javascript history对象详解

    本文主要介绍了javascript history对象的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js下通过getList函数实现分页效果的代码

    js下通过getList函数实现分页效果的代码

    js下通过getList函数实现分页效果的代码,需要通过js分页的朋友可以参考下。
    2010-09-09
  • 过期软件破解办法实例详解

    过期软件破解办法实例详解

    这篇文章主要介绍了过期软件破解办法实例详解的相关资料,5行脚本代码即可改变软件期限,具有参考价值,其他软件可参考此方法,需要的朋友可以参考下
    2017-01-01
  • 20分钟打造属于你的Bootstrap站点

    20分钟打造属于你的Bootstrap站点

    20分钟打造属于你的Bootstrap站点,学会使用twitter bootstrap建立一个站点,从而巩固Bootstrap一系列基础知识,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript将取代AppleScript?

    JavaScript将取代AppleScript?

    这篇文章主要介绍了JavaScript将取代AppleScript?AppleScript是OS X平台的类似JavaScript的脚本语言,需要的朋友可以参考下
    2014-09-09
  • JavaScript使用箭头函数实现优化代码

    JavaScript使用箭头函数实现优化代码

    在JavaScript的编程世界里,我们时常被普通函数的冗长写法所困扰,每次都需要写function关键字,有时候还要明确地写return语句,下面我们就来看看如何利用箭头函数优化这些繁琐的代码吧
    2023-11-11

最新评论