Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
更新時間：2021年12月14日 15:23:52 作者：前端小馬
這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
實現(xiàn)效果
完整代碼+詳細注釋
<template>
<div class="echart">
<div class="content">
<div id="map_cn"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import 'echarts/map/js/china.js' //這一步必須引入
export default {
data() {
return {
//地圖中的數(shù)據(jù)
dataList: [
{
name: "南海諸島",
value: 25,
},
{
name: "北京",
value: 71,
},
{
name: "天津",
value: 52,
},
{
name: "上海",
value: 14,
},
{
name: "重慶",
value: 50,
},
{
name: "河北",
value: 20,
},
{
name: "河南",
value: 30,
},
{
name: "云南",
value: 55,
},
{
name: "遼寧",
value: 50,
},
{
name: "黑龍江",
value: 40,
},
{
name: "湖南",
value: 6,
},
{
name: "安徽",
value: 96,
},
{
name: "山東",
value: 75,
},
{
name: "新疆",
value: 45,
},
{
name: "江蘇",
value: 15,
},
{
name: "浙江",
value: 8,
},
{
name: "江西",
value: 78,
},
{
name: "湖北",
value: 78,
},
{
name: "廣西",
value: 36,
},
{
name: "甘肅",
value: 25,
},
{
name: "山西",
value: 140,
},
{
name: "內(nèi)蒙古",
value: 85,
},
{
name: "陜西",
value: 85,
},
{
name: "吉林",
value: 74,
},
{
name: "福建",
value: 20,
},
{
name: "貴州",
value: 74,
},
{
name: "廣東",
value: 47,
},
{
name: "青海",
value: 45,
},
{
name: "西藏",
value: 41,
},
{
name: "四川",
value: 3,
},
{
name: "寧夏",
value: 7,
},
{
name: "海南",
value: 7,
},
{
name: "臺灣",
value: 200,
},
{
name: "香港",
value: 2,
},
{
name: "澳門",
value: 5,
}
],
//指定圖表的配置項和數(shù)據(jù)
option: {
//標(biāo)題組件
title: {
show: true,
text: '全國各省份旅游景點(已評級)數(shù)量',
subtext: '截至到2021年12月',
left: "center",
top: 16,
},
//提示框組件
tooltip: {
show: true,
//觸發(fā)類型：數(shù)據(jù)項圖形觸發(fā)
trigger: 'item',
padding: 10,
borderWidth: 1,
borderColor: '#409eff',
backgroundColor: 'rgba(255,255,255,0.4)',
textStyle: {
color: '#000000',
fontSize: 12
},
//提示框內(nèi)容格式器
formatter: (e) => {
let data = e.data;
//此處將各等級景點數(shù)量表示為0-10內(nèi)的隨機整數(shù)
data.five = Math.random() * 10 | 0;
data.four = Math.random() * 10 | 0;
data.three = Math.random() * 10 | 0;
data.two = Math.random() * 10 | 0;
data.one = Math.random() * 10 | 0;
//景點數(shù)量 - 五個等級之和
data.number = data.five + data.four + data.three + data.two + data.one;
//字符串模板
let context = `
<div>
<p style="line-height: 30px; font-weight: 600">${data.name}</p>
<p><span>景點數(shù)量 : </span><span>${data.number}處</span></p>
<p><span>5A級 : </span><span>${data.five}處</span></p>
<p><span>4A級 : </span><span>${data.four}處</span></p>
<p><span>3A級 : </span><span>${data.three}處</span></p>
<p><span>2A級 : </span><span>${data.two}處</span></p>
<p><span>1A級 : </span><span>${data.one}處</span></p>
</div>
`;
return context;
}
},
//視覺映射組件(左下角)
visualMap: {
show: true,
left: 26,
bottom: 40,
showLabel: true,
// 是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）
calculable: false,
// 拖拽時，是否實時更新
realtime: true,
align: 'left',
//各顏色代表的區(qū)域
pieces: [
{
gte: 100,
label: "> 100",
color: "#FDB669"
},
{
gte: 50,
lt: 99,
label: "50 - 99",
color: "#FECA7B"
},
{
gte: 30,
lt: 49,
label: "30 - 49",
color: "#FEE191"
},
{
gte: 10,
lt: 29,
label: "10 - 29",
color: "#FFF0A8"
},
{
lt: 9,
label: '< 10',
color: "#FFFFBF"
}
]
},
//地理坐標(biāo)系組件
geo: {
//使用 registerMap 注冊的地圖名稱
map: "china",
//是否開啟鼠標(biāo)縮放和平移漫游
roam: true,
//當(dāng)前視角縮放比例
zoom: 1,
//滾輪縮放的極限控制
scaleLimit: {
min: 1, //最小1倍
max: 3 //最大3倍
},
//地圖組件離容器的距離
top: 90,
left: 'center',
//圖形上的文本標(biāo)簽
label: {
show: true,
fontSize: "11"
},
//地圖區(qū)域的多邊形 圖形樣式
itemStyle: {
borderColor: "rgba(0, 0, 0, 0.2)",
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10,
// 高亮狀態(tài)(鼠標(biāo)移入后)的多邊形和標(biāo)簽樣式
emphasis: {
areaColor: "#f98333",
shadowOffsetX: 2,
shadowOffsetY: 2,
},
}
},
series: [
{
type: "map",
roam: true,
geoIndex: 0,
data: '',
label: {
show: true,
}
}
]
},
};
},
methods: {
//定義方法 draw_map 繪制中國地圖
draw_map() {
let myChart = this.$echarts.init(document.getElementById('map_cn'));
//高亮輪播展示
var hourIndex = 0;
var carouselTime = null;
//setInterval() 可在每隔指定的毫秒數(shù)循環(huán)調(diào)用函數(shù)或表達式,直到clearInterval把它清除
//使用setInterval方法后,必須使用箭頭函數(shù)而不能寫function,否則后續(xù)在該方法中無法調(diào)用data中的數(shù)據(jù)
//carouselTime =setInterval(function(){ //錯誤寫法
carouselTime = setInterval(() => {
//dispatchAction echarts的API：觸發(fā)圖表行為
myChart.dispatchAction({
type: "downplay", //downplay 取消高亮指定的數(shù)據(jù)圖形
seriesIndex: 0
});
myChart.dispatchAction({
type: "highlight", //highLight 高亮指定的數(shù)據(jù)圖形
seriesIndex: 0, //系列index
dataIndex: hourIndex //數(shù)據(jù)index
});
myChart.dispatchAction({
type: "showTip", //showTip 顯示提示框
seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
//當(dāng)循環(huán)到數(shù)組當(dāng)中的最后一條數(shù)據(jù)后，重新進行循環(huán)
if (hourIndex > this.dataList.length) {
hourIndex = 0;
}
}, 3000);
//鼠標(biāo)移入組件時停止輪播
myChart.on("mousemove", (e) => {
clearInterval(carouselTime); //清除循環(huán)
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex
});
});
//鼠標(biāo)移出組件時恢復(fù)輪播
myChart.on("mouseout", () => {
carouselTime = setInterval(() => {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: hourIndex
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
if (hourIndex > this.dataList.length) {
hourIndex = 0;
}
}, 3000);
});
//顯示地圖
myChart.setOption(this.option);
},
//修改echart配制
setEchartOption() {
this.option.series[0].data = this.dataList;
},
},
created() {
this.setEchartOption();
},
mounted() {
this.$nextTick(() => {
this.draw_map();
});
}
};
</script>
<style scoped lang="less">
.echart {
width: 100%;
.content {
width: 95.8%;
height: 100px;
margin: auto;
#map_cn {
width: 65%;
height: 7rem;
background-color: #eaeaea;
margin: auto;
}
}
}
</style>
要點小結(jié)
1.setTimeout() 與 setInterval() 的區(qū)別
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式，只執(zhí)行一次；
setInterval() 可在每隔指定的毫秒數(shù)循環(huán)調(diào)用函數(shù)或表達式，直到clearInterval把它清除，多次調(diào)用。
2.使用 setInterval() 方法后，必須使用箭頭函數(shù)形式而不能用 function
如果使用 function，后續(xù)在該方法中調(diào)用 data 中的數(shù)據(jù)如 console.log(this.dataList.length);會報如下錯誤(其實就是找不到該數(shù)據(jù))；
這是因為 fun()、(function(){ ... })() 或回調(diào)函數(shù)中的 this 默認都指向 window，而 window 中是找不到你所要用的 data 中的數(shù)據(jù)的，我們應(yīng)該改為箭頭函數(shù)形式。
以上就是Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示的詳細內(nèi)容，更多關(guān)于Vue ECharts 中國地圖繪制的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue中保留字符串中的空格的解決方案，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
Vue結(jié)合ElementUI實現(xiàn)數(shù)據(jù)請求和頁面跳轉(zhuǎn)功能(最新推薦)
我們在Proflie.vue實例中,有beforeRouteEnter、beforeRouteLeave兩個函數(shù)分別是進入路由之前和離開路由之后,我們可以在這兩個函數(shù)之內(nèi)進行數(shù)據(jù)的請求,下面給大家分享Vue結(jié)合ElementUI實現(xiàn)數(shù)據(jù)請求和頁面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2024-05-05
Vue3中的element-plus表格實現(xiàn)代碼
這篇文章主要介紹了Vue3中的element-plus表格實現(xiàn)代碼,用組件屬性實現(xiàn)跳轉(zhuǎn)路由,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue3 中的數(shù)據(jù)偵測的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue基于websocket實現(xiàn)智能聊天及吸附動畫效果
這篇文章主要介紹了vue基于websocket實現(xiàn)智能聊天及吸附動畫效果,主要功能是基于websocket實現(xiàn)聊天功能，封裝了一個socket.js文件，使用Jwchat插件實現(xiàn)類似QQ、微信電腦端的功能，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue 如何使用餓了么UI仿寫teambition的篩選功能，幫助大家更好的理解和學(xué)習(xí)使用vue框架2021-03-03
這篇文章主要介紹了修改Vue項目運行的IP和端口的方法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02
解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vuex是專門為Vuejs應(yīng)用程序設(shè)計的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機快速了解與實例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點，下面文章圍繞?v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細代碼?需要的小伙伴可以參考一下，希望對大家有所幫助2021-11-11