<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上
            }
        },
    }
...

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

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