一文搞定 echarts 地圖輪播高亮
?? 前言
這兩天忙著做公司的超級數(shù)據(jù)大屏，實在擠不出時間連續(xù)更文。 但是更文活動都堅持這么久了也不想停止更新，那我就分享一下在工作中經(jīng)常用到的 echarts地圖輪播高亮吧。技術棧用的是 vue2.x相信效果大家已經(jīng)清楚了那我們就開干吧。
??? toDoList
[ ] 簡單的準備一個地圖 [ ] 保存實例備用 [ ] 設置定時器 [ ] 設置鼠標移入移出事件
?? just do it
??? 準備一個地圖
首先準備一個簡簡單單的地圖，因為我在廣州所以就用廣東省的地圖啦~ 怎么在 echarts使用地圖我就不說了看看文檔然后把對應的地圖json導入就可以了，相信大家也會。對了有人問到我在哪里找地圖json文件，我們可以在DataV.GeoAtlas[2]查詢我們想要找的城市然后選擇Json文件下載就可以啦。
?? 保存實例備用
首先我們要知道想讓地圖輪播高亮就需要用到 eharts自帶的dispatchAction[3]API，而這個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)在默認大家已經(jīng)設置好普通的鼠標移入高亮和提示框。
首先設置一個定時器方法，然后在里面調(diào)用官方的高亮方法和提示框方法，在規(guī)定的時間內(nèi)進行閃爍即可。
...
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ù)量以下。設置定時器里面先清除之前高亮的城市，如果不清除的話就會一下子多個高亮了，不是我們想要的效果。 再使用我們的實例調(diào)用 eharts的方法來實現(xiàn)高亮和提示框彈出，其中dispatchAction接收幾個參數(shù),type表示你要呈現(xiàn)的類型，比如高亮或者提示框，具體的可以在官網(wǎng)[4]看到。在最后我們再判斷一下 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ù)輪播高亮了，我們還需要加多一個鼠標劃出事件，讓定時器重新開啟。至此一個簡單的高亮輪播就完成了，具體源碼[5]我放在這里。
?? 寫在最后
這種高亮效果在工作中也經(jīng)常用到，我個人覺得還是比較好看的，希望能幫到有需要的同學，如果有什么疑問的話歡迎評論區(qū)留言喔~ 如果您覺得這篇文章有幫助到您的的話不妨??關注+點贊+收藏+評論+轉(zhuǎn)發(fā)??支持一下喲~~??
關于本文
作者：快跑啊小盧_
https://juejin.cn/post/6997978246839042079
評論
圖片
表情