Vue2 ECharts地图轮播高亮实现教程

前言

近期忙于公司超级数据大屏的开发，难以抽出连续时间进行文章更新。

鉴于持续更文活动的承诺，这里分享一个工作中常用的ECharts地图轮播高亮功能。

本项目采用Vue2.x技术栈，具体视觉效果如下所示，接下来开始具体实现。

待办事项

准备基础地图配置
保存ECharts实例
配置定时器逻辑
处理鼠标交互事件

具体实现步骤

地图初始化准备

首先构建一个基础地图，以广东省地图为例进行演示。

关于如何在ECharts中加载地图，请参考官方文档并导入对应的地图JSON文件。若需获取地图JSON，可通过DataV.GeoAtlas平台搜索目标城市并下载。

实例保存策略

实现地图轮播高亮的核心在于使用ECharts提供的dispatchAction API，该API必须基于ECharts实例调用。因此，在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上
            }
        },
    }
...

在初始化阶段保存实例，其他配置项可根据实际需求自行调整，完整源码将在文末提供。

定时器轮播配置

轮播高亮的本质是设定时间间隔，使地图按顺序高亮并显示提示框。假设已具备基础的鼠标悬停高亮和提示框功能。

定义定时器方法，内部调用官方高亮及提示框API，通过设定时间间隔实现自动闪烁效果。


...
    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);
        },
    }

在Vue的data中定义变量用于存储定时器句柄及当前高亮城市的索引值。

在mapActive方法中，首先获取地图城市总数dataLength。由于dispatchAction依据索引切换高亮，需确保索引值不超过城市总数，否则无法显示。

在定时器执行逻辑中，首先清除当前高亮的城市。若不执行此步骤，会导致多个城市同时高亮，不符合预期效果。

随后利用保存的实例调用dispatchAction方法实现高亮和提示框弹出。该方法接收type参数指定动作类型（如高亮或提示框），具体参数详见官网文档。

最后判断索引值是否超出城市总数，若超出则重置索引为0，从而完成一轮轮播高亮逻辑。

鼠标交互事件处理

为提升用户体验，需添加鼠标交互逻辑：当鼠标移入地图区域时，停止自动轮播，仅高亮当前鼠标所在的城市。


    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();
            });
        },
      }

在鼠标移入事件中，清除当前索引对应的高亮状态。仅处理移入事件会导致鼠标滑过后轮播不再继续，因此还需添加鼠标移出事件，以重新启动定时器恢复轮播。

至此，一个简单的地图高亮轮播功能即告完成，完整源码已提供。

总结

本文介绍了ECharts地图轮播高亮的实现方法，更多相关内容请参考本站过往文章或继续浏览后续内容，感谢支持。

Vue2结合ECharts实现地图自动轮播高亮与交互控制

前言