vue+echarts5實(shí)現(xiàn)中國地圖的示例代碼
更新時(shí)間：2022年01月18日 09:35:36 作者：易de
本文主要介紹了vue+echarts5實(shí)現(xiàn)中國地圖的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
使用echarts5.0版本實(shí)現(xiàn)中國地圖，E charts在5.0版本之后，地圖不能直接引入了，需要自己去下載。
地圖文件下載地址：
下載地址
（http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5）
注意： 將下載后的json文件放置/public目錄下
map類型的地圖
<template>
<div>
<div ref="mapEcharts" class="map-echart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
name: "Map",
data() {
return {
timer: null,
seriesData: [
{name: '天津市', value: 20057.34},
{name: '北京市', value: 15477.48},
{name: '上海市', value: 31686.1},
{name: '河北省', value: 6992.6},
{name: '山東省', value: 44045.49},
{name: '山西省', value: 4045.49},
],
map: null
}
},
created() {
},
mounted(){
this.initMapEcharts();
},
methods: {
initMapEcharts() {
// 獲取地圖數(shù)據(jù)
// 將下載后的json文件放置/public目錄下
axios.get('/china.json').then(res => {
console.log(res);
// 使用數(shù)據(jù)注冊地圖
echarts.registerMap('china', res.data)
this.$nextTick(() => {
// 初始化地圖
this.map = echarts.init(this.$refs['mapEcharts'])
// 設(shè)置基礎(chǔ)配置項(xiàng)
const option = {
// 標(biāo)題
title: {
text:"中國地圖",
left: 'center',
subtext: "下載鏈接",
sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
},
// 懸浮窗
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value || 0}`
}
},
// 圖例
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
// 要顯示的散點(diǎn)數(shù)據(jù)
series: [
{
type: 'map',
map: 'china',
// 這是要顯示的數(shù)據(jù)
data: this.seriesData,
// 自定義命名映射，不設(shè)置的話，label默認(rèn)是使用 geoJson中的name名
nameMap: {
'北京市': "北京重命名",
"天津市": '天津重命名'
},
},
]
}
// 將配置應(yīng)用到地圖上
this.map.setOption(option)
// 設(shè)置定時(shí)器，自動(dòng)循環(huán)觸發(fā)tooltip懸浮窗事件
this.setTimer()
let that = this;
// 當(dāng)鼠標(biāo)在地圖上時(shí)，停止自動(dòng)tooltip事件
this.map.on('mouseover', {series: 0,}, function(params) {
that.clearTimer()
})
// 當(dāng)鼠標(biāo)移出地圖后，再自動(dòng)tooltip
this.map.on('mouseout', {series: 0}, function(params) {
that.setTimer()
})
})
})
},
setTimer() {
// 當(dāng)前選中區(qū)域的下標(biāo)
let curIndex = -1;
this.timer && clearInterval(this.timer)
this.timer = setInterval(() => {
const len = this.seriesData.length;
// dispatchAction是主動(dòng)去觸發(fā)echarts事件，取消高亮當(dāng)前的數(shù)據(jù)圖形
this.map.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: curIndex
})
// 下一個(gè)選中區(qū)域的下標(biāo)
curIndex = (curIndex + 1) % len;
// 高亮下一個(gè)數(shù)據(jù)圖形
this.map.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curIndex
})
// 顯示tooltip
this.map.dispatchAction({
type: 'showTip',
seriesIndex:0,
dataIndex: curIndex
})
}, 1000)
},
clearTimer() {
this.timer && clearInterval(this.timer)
},
},
beforeDestroy() {
this.clearTimer()
}
}
</script>
<style>
.map-echart {
height: 900px;
width: 900px;
}
</style>
geo類型地圖
<template>
<div>
<div ref="geoEcharts" class="geo-echart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
import { color } from 'echarts'
export default {
name: "Geo",
data() {
return {
timer: null,
seriesData: [
{name: '天津市', value: 20057.34},
{name: '北京市', value: 15477.48},
{name: '上海市', value: 31686.1},
{name: '河北省', value: 6992.6},
{name: '山東省', value: 44045.49},
{name: '山西省', value: 4045.49},
],
map: null
}
},
created() {
},
mounted(){
this.initGeoEcharts();
},
methods: {
initGeoEcharts() {
axios.get('/china.json').then(res => {
echarts.registerMap('china', res.data)
this.$nextTick(() => {
const map = echarts.init(this.$refs['geoEcharts'], null, {renderer:'svg'})
const option = {
title: {
text:"中國地圖",
left: 'center',
subtext: "下載鏈接",
sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
},
// 懸浮窗
tooltip: {
trigger: 'item',
formatter: function(params) {
console.log(2222, params);
return `${params.name}: ${params.value || 0}`
}
},
// 圖例
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
geo: {
map: 'china',
zoom: 1,
roam: 'move',
nameMap: {
'新疆維吾爾自治區(qū)': "新疆",
"西藏自治區(qū)": '西藏',
"甘肅省": "甘肅",
"寧夏回族自治區(qū)": "寧夏",
"廣西壯族自治區(qū)": "廣西",
"內(nèi)蒙古自治區(qū)": "內(nèi)蒙古",
"香港特別行政區(qū)": "香港",
"澳門特別行政區(qū)": "澳門"
},
label: {
show: true,
color: 'black',
position: "inside",
distance: 0,
fontSize: 10,
rotate:45
},
// 所有地圖的區(qū)域顏色
itemStyle: {
areaColor: 'rgba(0,60,153,0.8)',
borderColor: '#02c0ff'
},
emphasis: {
itemStyle: {
areaColor: 'rgba(0,60,153,0.5)',
shadowColor: 'rgba(0,0,0,0.8)',
shadowBlur: 5,
shadowOffsetY: 5
}
},
// 針對某些區(qū)域做一些特別的樣式
// regions: [{
// name: '廣東省',
// itemStyle: {
// areaColor: 'yellow',
// color: 'black',
// borderColor: 'pink'
// }
// }]
},
// 數(shù)據(jù)
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '江蘇省', value:[120.15, 31.99, 9]}, // 值為，經(jīng)緯度，數(shù)據(jù)
{name: '湖北省', value: [111, 31.89, 15477]},
{name: '四川省', value: [102.15, 31.89, 31686]},
{name: '浙江省', value: [120.15, 29.89, 6992]},
{name: '山東省', value: [118.15, 36.9, 44045]}
],
SymbolSize: 4
},
{
type: 'lines',
coordinateSystem: 'geo',
data: [
{coords: [[121.15,38], [111, 31.89], [100.15, 31.89],[121.15, 29.89], [105.15, 30.89]]}
],
polyline: true, // 是否是多段線
lineStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 處的顏色
}, {
offset: 1, color: 'blue' // 100% 處的顏色
}],
global: false, // 缺省為 false
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
curveness: 1
},
opacity: 0.3,
width: 2,
},
// 線特效的配置
effect: {
show: true,
period: 5, // 特效動(dòng)畫的時(shí)間，單位為 s
trailLength: 1, //特效尾跡長度[0,1]值越大，尾跡越長重
// symbol: 'image://' + require('@/echartsMap/money.png'), // 自定義動(dòng)畫圖標(biāo)
symbolSize: 15, //圖標(biāo)大小
color:"red"
}
}
]
}
map.setOption(option)
})
})
}
},
}
</script>
<style>
.geo-echart{
height: 900px;
width: 900px;
}
</style>
到此這篇關(guān)于vue+echarts5實(shí)現(xiàn)中國地圖的示例代碼的文章就介紹到這了,更多相關(guān)vue echarts5中國地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
在使用elementUI el-form 中，對于業(yè)務(wù)不同的時(shí)候可能會(huì)產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個(gè)表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼,需要的朋友可以參考下2019-05-05
Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue項(xiàng)目中頁面跳轉(zhuǎn)傳參的方法總結(jié)
在Vue項(xiàng)目中,你可以使用路由（vue-router）來實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
使用vue3.2實(shí)現(xiàn)多頁簽導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何使用vue3.2 + elementPlus + pinia 實(shí)現(xiàn)多頁簽導(dǎo)航,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12
這篇文章主要介紹了深入理解Vue.js輕量高效的前端組件化方案 ,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購物車的增加減少移除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue上傳組件vue Simple Uploader的用法示例
本篇文章主要介紹了Vue上傳組件vue Simple Uploader的用法示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue中this.$createElement方法的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了基于Vue實(shí)現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下2018-04-04