vue + echarts實現(xiàn)中國省份地圖點擊聯(lián)動
更新時間：2022年04月08日 08:44:04 作者：JYeontu
這篇文章主要介紹了vue + echarts實現(xiàn)中國地圖省份點擊聯(lián)動,需要的朋友可以參考下
引入echarts
npm下載
npm install echarts
cdn引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" ></script>
引入中國地圖china.js
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js" ></script>
配置中國地圖
定義一個div來作為地圖的載體
render: function(createElement) {
return createElement("div", {
attrs: {
id: "main",
},
style: {
height: "450px",
width:'600px',
margin: 'auto'
},
});
},
設置各省份的值
定義省份數(shù)據(jù)
data() {
return {
dataList: [
{ name: "南海諸島" },
{ ename: "beijing", name: "北京"},
{ ename: "tianjin", name: "天津" },
{ ename: "shanghai", name: "上海" },
{ ename: "chongqing", name: "重慶" },
{ ename: "hebei", name: "河北" },
{ ename: "henan", name: "河南"},
{ ename: "yunnan", name: "云南" },
{ ename: "liaoning", name: "遼寧" },
{ ename: "heilongjiang", name: "黑龍江" },
{ ename: "hunan", name: "湖南"},
{ ename: "anhui", name: "安徽" },
{ ename: "shandong", name: "山東" },
{ ename: "xinjiang", name: "新疆" },
{ ename: "jiangsu", name: "江蘇" },
{ ename: "zhejiang", name: "浙江" },
{ ename: "jiangxi", name: "江西" },
{ ename: "hubei", name: "湖北" },
{ ename: "guangxi", name: "廣西"},
{ ename: "gansu", name: "甘肅" },
{ ename: "shanxi", name: "山西" },
{ ename: "neimenggu", name: "內(nèi)蒙古" },
{ ename: "shanxi1", name: "陜西" },
{ ename: "jilin", name: "吉林" },
{ ename: "fujian", name: "福建" },
{ ename: "guizhou", name: "貴州" },
{ ename: "guangdong", name: "廣東" },
{ ename: "qinghai", name: "青海" },
{ ename: "xizang", name: "西藏" },
{ ename: "sichuan", name: "四川" },
{ ename: "ningxia", name: "寧夏" },
{ ename: "hainan", name: "海南" },
{ name: "臺灣"},
{ ename: "xianggang", name: "香港" },
{ ename: "aomen", name: "澳門" },
],
};
},
隨機給各省份賦值
let dataList = this.dataList;
for(let i = 0; i < dataList.length; i++){
dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
}
鼠標懸浮展示
option中的tooltip可以設置鼠標懸浮在省份上的數(shù)據(jù)顯示
// 鼠標懸浮提示框
series: [
{
name: "省份",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
tooltip: {
//數(shù)據(jù)格式化
formatter: function(params, callback) {
return (
params.seriesName + "<br />" + params.name + "：" + params.value
);
},
},
如下圖為鼠標懸浮在廣東上的數(shù)據(jù)提示??
visualMap圖注配置數(shù)值映射
在min和max中，數(shù)值越大，區(qū)域顏色越深。
visualMap: {
min: 0, //最小值
max: 1000, //最大值
left: "left", //位于地圖左邊
top: "bottom",//位于地圖下方
text: ["高", "低"], //取值范圍的文字
inRange: {
color: ["#e0ffff", "blue"], //取值范圍的顏色
},
show: true, //圖注
},
geo地圖繪制
geo: {
map: "china", //引入地圖數(shù)據(jù)
roam: false, //不開啟縮放和平移
zoom: 1, //視角縮放比例
label: {
normal: {
show: true,
fontSize: "10",
color: "rgba(0,0,0,0.7)",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: { //高亮的顯示設置
areaColor: "skyblue", //鼠標選擇區(qū)域顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
省份區(qū)域點擊事件
可以通過該點擊事件實現(xiàn)省份下鉆聯(lián)動，點擊跳轉(zhuǎn)到省級地圖頁面，省級地圖頁面根據(jù)傳入?yún)?shù)渲染不同的省份地圖數(shù)據(jù)即可，具體實現(xiàn)后面會講到。
myChart.on("click", function(params) {
if(!params.data.ename){
alert('暫無' + params.name + '地圖數(shù)據(jù)');
return;
}
_this.$router.push({
path: "/province",
query: { provinceName: params.data.ename, province: params.name },
});
});
完整代碼
<script>
export default {
render: function(createElement) {
return createElement("div", {
attrs: {
id: "main",
},
style: {
height: "450px",
width:'600px',
margin: 'auto'
},
});
},
data() {
return {
dataList: [
{ name: "南海諸島" },
{ ename: "beijing", name: "北京"},
{ ename: "tianjin", name: "天津" },
{ ename: "shanghai", name: "上海" },
{ ename: "chongqing", name: "重慶" },
{ ename: "hebei", name: "河北" },
{ ename: "henan", name: "河南"},
{ ename: "yunnan", name: "云南" },
{ ename: "liaoning", name: "遼寧" },
{ ename: "heilongjiang", name: "黑龍江" },
{ ename: "hunan", name: "湖南"},
{ ename: "anhui", name: "安徽" },
{ ename: "shandong", name: "山東" },
{ ename: "xinjiang", name: "新疆" },
{ ename: "jiangsu", name: "江蘇" },
{ ename: "zhejiang", name: "浙江" },
{ ename: "jiangxi", name: "江西" },
{ ename: "hubei", name: "湖北" },
{ ename: "guangxi", name: "廣西"},
{ ename: "gansu", name: "甘肅" },
{ ename: "shanxi", name: "山西" },
{ ename: "neimenggu", name: "內(nèi)蒙古" },
{ ename: "shanxi1", name: "陜西" },
{ ename: "jilin", name: "吉林" },
{ ename: "fujian", name: "福建" },
{ ename: "guizhou", name: "貴州" },
{ ename: "guangdong", name: "廣東" },
{ ename: "qinghai", name: "青海" },
{ ename: "xizang", name: "西藏" },
{ ename: "sichuan", name: "四川" },
{ ename: "ningxia", name: "寧夏" },
{ ename: "hainan", name: "海南" },
{ name: "臺灣"},
{ ename: "xianggang", name: "香港" },
{ ename: "aomen", name: "澳門" },
],
};
},
methods: {
initEchart() {
let dataList = this.dataList;
for(let i = 0; i < dataList.length; i++){
dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
}
const _this = this;
var myChart = echarts.init(document.getElementById("main"));
var option = {
tooltip: {
//數(shù)據(jù)格式化
formatter: function(params, callback) {
return (
params.seriesName + "<br />" + params.name + "：" + params.value
);
},
},
visualMap: {
min: 0,
max: 1000,
left: "left",
top: "bottom",
text: ["高", "低"], //取值范圍的文字
inRange: {
color: ["#e0ffff", "blue"], //取值范圍的顏色
},
show: true, //圖注
},
geo: {
map: "china", //引入地圖數(shù)據(jù)
roam: false, //不開啟縮放和平移
zoom: 1, //視角縮放比例
label: {
normal: {
show: true,
fontSize: "10",
color: "rgba(0,0,0,0.7)",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: { //高亮的顯示設置
areaColor: "skyblue", //鼠標選擇區(qū)域顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
// 鼠標懸浮提示框
series: [
{
name: "省份",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
};
myChart.setOption(option);
myChart.on("click", function(params) {
if(!params.data.ename){
alert('暫無' + params.name + '地圖數(shù)據(jù)');
return;
}
_this.$router.push({
path: "/province",
query: { provinceName: params.data.ename, province: params.name },
});
});
},
},
mounted() {
this.initEchart();
},
};
</script>
展示效果
配置省級地圖
前面通過中國地圖的省份區(qū)域點擊事件跳轉(zhuǎn)到省級地圖頁面，并傳遞對應參數(shù)，在省級地圖頁面可以根據(jù)參入?yún)?shù)來渲染不同的地圖數(shù)據(jù)。
引入省份地圖資源
如下圖，省份地圖資源的js版數(shù)據(jù)和json版數(shù)據(jù)我都已經(jīng)放在源碼中，這里我使用的是json版數(shù)據(jù)，有需要的同學可以直接去下載。
編寫簡單頁面
返回按鈕+省級地圖。
<div>
<div @click="goBack()">返回</div>
<div :id="id" class="o-echarts"></div>
</div>
地圖配置
與前面中國地圖的配置規(guī)則是一樣的，按需配置即可
option: {
title: {
text: '',
top: '8%',
left: '8%',
textStyle: {
fontSize: 14,
fontWeight: 300,
color: '#b6d7ff'
}
},
tooltip: {
padding: 0,
// 數(shù)據(jù)格式化
formatter: function (params, callback) {
return params.name + '：' + params.value
}
},
legend: {
orient: 'vertical',
top: '9%',
left: '5%',
icon: 'circle',
data: [],
selectedMode: 'single',
selected: {},
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
inactiveColor: '#b6d7ff',
textStyle: {
color: '#ec808d',
fontSize: 14,
fontWeight: 300,
padding: [0, 0, 0, 15]
}
},
visualMap: {
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 取值范圍的文字
inRange: {
color: ['#e0ffff', 'blue'] // 取值范圍的顏色
},
show: true // 圖注
},
geo: {
map: '',
roam: false, // 不開啟縮放和平移
zoom: 0.6, // 視角縮放比例
label: {
normal: {
show: true,
fontSize: 10,
color: '#000'
},
emphasis: {
show: true,
color: 'blue',
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: 'skyblue', // 鼠標選擇區(qū)域顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
left: '5%',
right: '5%',
top: '5%',
bottom: '5%'
},
series: [
{
name: '年度總項目數(shù)據(jù)查詢',
type: 'map',
geoIndex: 0, // 不可缺少，否則無tooltip 指示效果
data: []
}
],
provinceJSON: {},
provinceName: ''
}
根據(jù)參數(shù)配置不同地圖數(shù)據(jù)
const provinceName = this.$route.query.provinceName
const province = this.$route.query.province
this.provinceName = provinceName
this.provinceJSON = require('../../utils/省份數(shù)據(jù)/json(省份)/' + provinceName)
this.option.geo.map = province
this.echartObj = echarts.init(document.getElementById(this.id))
echarts.registerMap(province, this.provinceJSON)
this.echartObj.setOption(this.option);
window.addEventListener('resize', () => {
if (this.echartObj && this.echartObj.resize) {
this.echartObj.resize()
}
})
完整代碼
<template>
<div>
<div @click="goBack()">返回</div>
<div :id="id" class="o-echarts"></div>
</div>
</template>
<script>
export default {
name: 'province',
data () {
return {
id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
echartObj: null,
option: {
title: {
text: '',
top: '8%',
left: '8%',
textStyle: {
fontSize: 14,
fontWeight: 300,
color: '#b6d7ff'
}
},
tooltip: {
padding: 0,
// backgroundColor: "transparent",
// 數(shù)據(jù)格式化
formatter: function (params, callback) {
return params.name + '：' + params.value
}
},
legend: {
orient: 'vertical',
top: '9%',
left: '5%',
icon: 'circle',
data: [],
selectedMode: 'single',
selected: {},
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
inactiveColor: '#b6d7ff',
textStyle: {
color: '#ec808d',
fontSize: 14,
fontWeight: 300,
padding: [0, 0, 0, 15]
}
},
visualMap: {
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 取值范圍的文字
inRange: {
color: ['#e0ffff', 'blue'] // 取值范圍的顏色
},
show: true // 圖注
},
geo: {
map: '',
roam: false, // 不開啟縮放和平移
zoom: 0.6, // 視角縮放比例
label: {
normal: {
show: true,
fontSize: 10,
color: '#000'
},
emphasis: {
show: true,
color: 'blue',
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: 'skyblue', // 鼠標選擇區(qū)域顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
left: '5%',
right: '5%',
top: '5%',
bottom: '5%'
},
series: [
{
name: '年度總項目數(shù)據(jù)查詢',
type: 'map',
geoIndex: 0, // 不可缺少，否則無tooltip 指示效果
data: []
}
],
provinceJSON: {},
provinceName: ''
}
}
},
mounted () {
const provinceName = this.$route.query.provinceName
const province = this.$route.query.province
this.provinceName = provinceName
this.provinceJSON = require('../../utils/省份數(shù)據(jù)/json(省份)/' + provinceName)
this.option.geo.map = province
this.echartObj = echarts.init(document.getElementById(this.id))
echarts.registerMap(province, this.provinceJSON)
this.echartObj.setOption(this.option);
window.addEventListener('resize', () => {
if (this.echartObj && this.echartObj.resize) {
this.echartObj.resize()
}
})
},
methods: {
goBack () {
this.$router.go(-1)
},
}
}
</script>
<style lang="scss">
.o-echarts {
height: 400px;
width: 600px;
margin: auto;
}
</style>
相關文章
vue項目中如何實現(xiàn)element-ui組件按需引入
這篇文章主要介紹了vue項目中如何實現(xiàn)element-ui組件按需引入，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue+ElementUI?封裝簡易PaginationSelect組件的詳細步驟
這篇文章主要介紹了Vue+ElementUI?封裝簡易PaginationSelect組件,這里簡單介紹封裝的一個Pagination-Select組件幾個步驟，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強大的功能之一，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家介紹了vue element plus多語言切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
今天小編就為大家分享一篇Vue 解決多級動態(tài)面包屑導航的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue使用localStorage存儲數(shù)據(jù)的方法
這篇文章主要為大家詳細介紹了Vue使用localStorage存儲數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當多個樣式出現(xiàn)時，就會導致樣式?jīng)_突，本文介紹了具體解決方法2017-08-08
今天小編就為大家分享一篇vue2.0獲取鼠標位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法
近嘗試上手 Vue3+TS+Vite,所以下面這篇文章主要給大家介紹了關于vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10