一篇文章搞定echarts地圖輪播高亮
前言
這兩天忙著做公司的超級數(shù)據(jù)大屏,實在擠不出時間連續(xù)更文。
但是更文活動都堅持這么久了也不想停止更新,那我就分享一下在工作中經常用到的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);//獲取地圖數(shù)據(jù) this.setMyEchart(); // 頁面掛載完成后執(zhí)行 }, methods:{ setMyEchart () { const myChart = this.$refs.myChart; // 通過ref獲取到DOM節(jié)點 if (myChart) { const thisChart = this.$echarts.init(myChart); // 利用原型Echarts的初始化 this.charts = thisChart;//保存實例 thisChart.setOption(this.option); // 將編寫好的配置項掛載到Echarts上 } }, } ...
我們在一開始初始化echarts的時候講實例保存起來等下來使用,其余的配置大家可以自行去配,源碼會放在文章底下,有興趣的話可以拿走。
設置定時器輪播
因為要設置輪播高亮,說白了就是給一個時間,固定多少多少時間亮一下然后提示框出來一下,現(xiàn)在默認大家已經設置好普通的鼠標移入高亮和提示框。
首先設置一個定時器方法,然后在里面調用官方的高亮方法和提示框方法,在規(guī)定的時間內進行閃爍即可。
... 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()中先獲取這個地圖所有城市的數(shù)量dataLength,因為dispatchAction是根據(jù)下標來進行高亮切換的如果我們的index數(shù)量大于城市數(shù)量他就不會顯示了,所有我們要控制inedx在所有城市數(shù)量以下。
設置定時器里面先清除之前高亮的城市,如果不清除的話就會一下子多個高亮了,不是我們想要的效果。
再使用我們的實例調用eharts的方法來實現(xiàn)高亮和提示框彈出,其中dispatchAction接收幾個參數(shù),type表示你要呈現(xiàn)的類型,比如高亮或者提示框,具體的可以在官網看到。
在最后我們再判斷一下index是否超出城市dataLength數(shù)量,如果是則清零重新來過,至此我們的一個輪播高亮就完成了。
加入鼠標事件
當然我們不能就這樣結束,還要加一些事件效果,比如說當我們鼠標移動到地圖里面時會停止輪播只高亮我們選擇的那個城市
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的城市,當然僅僅加入鼠標劃入也是不行的,這樣當我們鼠標滑動一次他就不會繼續(xù)輪播高亮了,我們還需要加多一個鼠標劃出事件,讓定時器重新開啟。
至此一個簡單的高亮輪播就完成了,具體源碼我放在這里。
總結
到此這篇關于echarts地圖輪播高亮的文章就介紹到這了,更多相關echarts地圖輪播高亮內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
window.location的重寫及判斷l(xiāng)ocation是否被重寫
這篇文章主要介紹了window.location的重寫及判斷l(xiāng)ocation是否被重寫,需要的朋友可以參考下2014-09-09javascript模擬鼠標點擊事件原理和實現(xiàn)方法
本文詳細介紹了JS模擬鼠標點擊事件的原理以及應用場景,并提供了模擬鼠標左鍵點擊事件、右鍵點擊事件、滾輪事件和移動事件的代碼實現(xiàn),了解JS模擬鼠標點擊事件的原理和實現(xiàn)方法對于開發(fā)人員非常重要,這對于許多面向用戶的web應用程序的開發(fā)和測試都具有很重要的意義2023-09-09ES6 Promise基礎用法(resolve、reject、then、catch,a
Promise是JavaScript中處理異步操作的對象,它有三種狀態(tài):Pending、Fulfilled、Rejected,使用new Promise創(chuàng)建Promise對象,通過resolve和reject改變狀態(tài),then和catch方法用于處理成功和失敗的結果,本文介紹ES6 Promise用法,感興趣的朋友一起看看吧2024-09-09javascript實現(xiàn)在網頁任意處點左鍵彈出隱藏菜單的方法
這篇文章主要介紹了javascript實現(xiàn)在網頁任意處點左鍵彈出隱藏菜單的方法,設計鼠標事件及css樣式操作的相關技巧,需要的朋友可以參考下2015-05-05IE和Firefox的Javascript兼容性總結[推薦收藏]
長久以來JavaScript兼容性一直是Web開發(fā)者的一個主要問題。在正式規(guī)范、事實標準以及各種實現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬2011-10-10