?? 前言

• 這兩天忙著做公司的超級數(shù)據(jù)大屏，實(shí)在擠不出時(shí)間連續(xù)更文。
• 但是更文活動(dòng)都堅(jiān)持這么久了也不想停止更新，那我就分享一下在工作中經(jīng)常用到的echarts地圖輪播高亮吧。
• 技術(shù)棧用的是vue2.x 相信效果大家已經(jīng)清楚了那我們就開干吧。

??? toDoList

• [ ]  簡單的準(zhǔn)備一個(gè)地圖
• [ ]  保存實(shí)例備用
• [ ]  設(shè)置定時(shí)器
• [ ]  設(shè)置鼠標(biāo)移入移出事件

?? just do it

??? 準(zhǔn)備一個(gè)地圖

• 首先準(zhǔn)備一個(gè)簡簡單單的地圖，因?yàn)槲以趶V州所以就用廣東省的地圖啦~
• 怎么在echarts使用地圖我就不說了看看文檔然后把對應(yīng)的地圖json導(dǎo)入就可以了，相信大家也會。對了有人問到我在哪里找地圖json文件，我們可以在DataV.GeoAtlas^[2]查詢我們想要找的城市然后選擇Json文件下載就可以啦。

?? 保存實(shí)例備用

• 首先我們要知道想讓地圖輪播高亮就需要用到eharts自帶的dispatchAction^[3]API，而這個(gè)API是要用eharts實(shí)例去使用的,所以在vue中我們要將一開始地圖初始化的實(shí)例給保存下來。

<template>
    <div ref="myChart" id="myChart" class="gzMap"></div>
</template>
...
    data () {
        return {
                charts: '',
                option:{
                    ...
                }
        };
    },
...
    mounted () {
        this.$echarts.registerMap('廣東', gzData);//獲取地圖數(shù)據(jù)
        this.setMyEchart(); // 頁面掛載完成后執(zhí)行
    },
    methods:{
        setMyEchart () {
            const myChart = this.$refs.myChart; // 通過ref獲取到DOM節(jié)點(diǎn)
            if (myChart) {
                const thisChart = this.$echarts.init(myChart); // 利用原型Echarts的初始化
                this.charts = thisChart;//保存實(shí)例
                thisChart.setOption(this.option); // 將編寫好的配置項(xiàng)掛載到Echarts上
            }
        },
    }
...
復(fù)制代碼

• 我們在一開始初始化echarts的時(shí)候講實(shí)例保存起來等下來使用，其余的配置大家可以自行去配，源碼會放在文章底下，有興趣的話可以拿走。

? 設(shè)置定時(shí)器輪播

• 因?yàn)橐O(shè)置輪播高亮，說白了就是給一個(gè)時(shí)間，固定多少多少時(shí)間亮一下然后提示框出來一下，現(xiàn)在默認(rèn)大家已經(jīng)設(shè)置好普通的鼠標(biāo)移入高亮和提示框。

• 首先設(shè)置一個(gè)定時(shí)器方法，然后在里面調(diào)用官方的高亮方法和提示框方法，在規(guī)定的時(shí)間內(nèi)進(jìn)行閃爍即可。

...
    data () {
        return {
                mTime: '',
                charts: '',
                index: -1,
                option:{
                    ...
                }
        };
    },
...
    methods:{
        setMyEchart () {
            ...
            this.mapActive();
            ...
        },
        mapActive () {
            const dataLength = gzData.features.length;
            // 用定時(shí)器控制高亮
            this.mTime = setInterval(() => {
                // 清除之前的高亮
                this.charts.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                this.index++;
                // 當(dāng)前下標(biāo)高亮
                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);
        },
    }
復(fù)制代碼

• 我們首先在data設(shè)置一個(gè)接收定時(shí)器的容器和一個(gè)index下標(biāo)來代表是哪個(gè)城市高亮。
• 在mapActive()中先獲取這個(gè)地圖所有城市的數(shù)量dataLength，因?yàn)?code style="font-size: 14px;border-radius: 4px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(155, 110, 35);background-color: rgb(255, 245, 227);padding: 3px;margin: 3px;">dispatchAction是根據(jù)下標(biāo)來進(jìn)行高亮切換的如果我們的index數(shù)量大于城市數(shù)量他就不會顯示了，所有我們要控制inedx在所有城市數(shù)量以下。
• 設(shè)置定時(shí)器里面先清除之前高亮的城市，如果不清除的話就會一下子多個(gè)高亮了，不是我們想要的效果。
• 再使用我們的實(shí)例調(diào)用eharts的方法來實(shí)現(xiàn)高亮和提示框彈出，其中dispatchAction接收幾個(gè)參數(shù),type表示你要呈現(xiàn)的類型，比如高亮或者提示框，具體的可以在官網(wǎng)^[4]看到。
• 在最后我們再判斷一下index是否超出城市dataLength數(shù)量，如果是則清零重新來過，至此我們的一個(gè)輪播高亮就完成了。
  
  

??? 加入鼠標(biāo)事件

• 當(dāng)然我們不能就這樣結(jié)束，還要加一些事件效果，比如說當(dāng)我們鼠標(biāo)移動(dòng)到地圖里面時(shí)會停止輪播只高亮我們選擇的那個(gè)城市

    methods:{
        setMyEchart () {
            ...
            this.mapActive();
            ...
        },
        mouseEvents () {
            // 鼠標(biāo)劃入
            this.charts.on('mouseover', () => {
                // 停止定時(shí)器，清除之前的高亮
                clearInterval(this.mTime);
                this.mTime = '';
                console.log(this.mTime);
                this.charts.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: this.index
                });
            });
            // 鼠標(biāo)劃出重新定時(shí)器開始
            this.charts.on('mouseout', () => {
                this.mapActive();
            });
        },
      }
復(fù)制代碼

• 可以看到我們給鼠標(biāo)劃入加入了事件，當(dāng)我們鼠標(biāo)移動(dòng)到地圖上時(shí)就清除之前對應(yīng)index的城市，當(dāng)然僅僅加入鼠標(biāo)劃入也是不行的，這樣當(dāng)我們鼠標(biāo)滑動(dòng)一次他就不會繼續(xù)輪播高亮了，我們還需要加多一個(gè)鼠標(biāo)劃出事件，讓定時(shí)器重新開啟。
• 至此一個(gè)簡單的高亮輪播就完成了，具體源碼^[5]我放在這里。

?? 寫在最后

• 這種高亮效果在工作中也經(jīng)常用到，我個(gè)人覺得還是比較好看的，希望能幫到有需要的同學(xué)，如果有什么疑問的話歡迎評論區(qū)留言喔~
• 如果您覺得這篇文章有幫助到您的的話不妨??關(guān)注+點(diǎn)贊+收藏+評論+轉(zhuǎn)發(fā)??支持一下喲~~??