Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
更新時間：2021年12月14日 15:23:52 作者：前端小馬
這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
實現(xiàn)效果
完整代碼+詳細(xì)注釋
<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)的隨機(jī)整數(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ù)或表達(dá)式,直到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ù)后，重新進(jìn)行循環(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ù)或計算表達(dá)式，只執(zhí)行一次；
setInterval() 可在每隔指定的毫秒數(shù)循環(huán)調(diào)用函數(shù)或表達(dá)式，直到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 默認(rèn)都指向 window，而 window 中是找不到你所要用的 data 中的數(shù)據(jù)的，我們應(yīng)該改為箭頭函數(shù)形式。
以上就是Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示的詳細(xì)內(nèi)容，更多關(guān)于Vue ECharts 中國地圖繪制的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue利用插件實現(xiàn)按比例切割圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue?Echarts實現(xiàn)多功能圖表繪制的示例詳解
作為前端人員，日常圖表、報表、地圖的接觸可謂相當(dāng)頻繁，今天小編隆重退出前端框架之VUE結(jié)合百度echart實現(xiàn)中國地圖+各種圖表的展示與使用；作為“你值得擁有”專欄階段性末篇，值得一看2023-02-02
這篇文章主要為大家介紹了vue前端實現(xiàn)打印下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue 實現(xiàn)無規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue的事件綁定與方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue中在echarts里設(shè)置的定時器清除不掉問題及解決
這篇文章主要介紹了vue中在echarts里設(shè)置的定時器清除不掉問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue+Element?ui實現(xiàn)照片墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)購物車結(jié)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue.js 1.x與2.0中js實時監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實時監(jiān)聽input值的變化的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03