一篇文章搞定echarts地圖輪播高亮

Posted on by

前言

這兩天忙著做公司的超級數據大屏，實在擠不出時間連續更文。

但是更文活動都堅持這麼久瞭也不想停止更新，那我就分享一下在工作中經常用到的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地圖輪播高亮內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：