Vue3+echarts繪制世界地圖的示例代碼
更新時(shí)間：2024年03月25日 14:34:51 作者：諾坎普的風(fēng)間
最近做項(xiàng)目需要實(shí)現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價(jià)值,感謝的可以了解一下
先放效果圖
之前所查找的資料都沒(méi)有講清楚如何引入地圖文件并繪制地圖，下面做一個(gè)記錄。
首先下載對(duì)應(yīng)的地圖json文件，這里可以參考我的這篇文章，提供了下載地址：
https://echarts.apache.org/examples/data/asset/geo/
第二步，在繪制地圖的vue組件中導(dǎo)入該json文件。解釋第三個(gè)import，world可以隨便改名字，在下面第三步注冊(cè)地圖的時(shí)候?qū)?yīng)第二個(gè)world。
import {defineComponent, toRaw} from "vue";
import axios from "axios";
import world from "@/assets/json/world.json"
第三步，定義圖表并配置圖表。注意在注冊(cè)地圖的時(shí)候，第一個(gè)是地圖的名稱，第二個(gè)是在import的時(shí)候給json文件取的名字
// 定義圖表
this.$echarts.registerMap('world', world)
let map_off = this.$echarts.init(document.getElementById("world_map_off"), "football_customed");
// 配置圖表
map_off.setOption(option)
// 圖表響應(yīng)式改變
window.addEventListener('resize', function () {
map_off.resize();下面給出完整代碼（script），template部分只需要設(shè)置對(duì)應(yīng)的圖表id即可
<script>
import {defineComponent, toRaw} from "vue";
import axios from "axios";
import world from "@/assets/json/world.json"
export default defineComponent({
data() {
return {
num: [],
}
},
methods: {
competition() {
// 獲取需要的數(shù)據(jù)
let zhuchang_data = []
let kechang_data = []
axios.get("http://127.0.0.1:5000/competition").then(res => {
// 獲取數(shù)據(jù)
zhuchang_data = toRaw(res.data.zhuchang_data)
kechang_data = toRaw(res.data.kechang_data)
console.log(zhuchang_data)
console.log(kechang_data)
// 生成出線方法
function formtGCData(geoData, data, srcNam, dest) {
var tGeoDt = []
if (dest) {
for (var i = 0; i < data.length; i++) {
if (srcNam !== data[i].name) {
tGeoDt.push({
coords: [geoData[srcNam], geoData[data[i].name]]
})
}
}
} else {
for (var j = 0; j < data.length; j++) {
if (srcNam !== data[j].name) {
tGeoDt.push({
coords: [geoData[data[j].name], geoData[srcNam]]
})
}
}
}
return tGeoDt
}
// 生成進(jìn)線方法
function formtVData(geoData, data, srcNam) {
var tGeoDt = []
for (var i = 0; i < data.length; i++) {
var tNam = data[i].name
if (srcNam !== tNam) {
tGeoDt.push({
name: tNam,
value: geoData[tNam]
})
}
}
tGeoDt.push({
name: srcNam,
value: geoData[srcNam],
symbolSize: 8,
})
tGeoDt.forEach((item) => {
if (item.name === 'china') {
item.itemStyle = {
color: 'red'
}
} else {
item.itemStyle = {
color: '#9E992F'
}
}
})
return tGeoDt
}
// 顯示點(diǎn)的坐標(biāo)
let geoCoordMap = {
china: [117.3, 41.03],
Botswana: [24.68, -22.33],
Canada: [-110.895168, 60.2312],
Brazil: [-50.895168, -10.2312],
};
// 所在點(diǎn)對(duì)應(yīng)數(shù)據(jù),上面數(shù)據(jù)添加修改后務(wù)必這里添加修改，value可不用
let data = [
{
id: 1,
name: 'china',
}, {
id: 2,
name: 'Botswana',
}, {
id: 3,
name: 'Canada',
}, {
id: 4,
name: 'Brazil',
}]
//箭頭類型 //''circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none''
var planePath = 'arrow'
// 定義圖表
this.$echarts.registerMap('world', world)
let world_map = this.$echarts.init(document.getElementById("world_map"), "football_customed");
// 定義主場(chǎng)圖表的配置
let option = {
geo: {
type: "map",
map: 'world',
zoom: 1.2,//地圖的縮放
label: {
emphasis: {
show: true,
color: '#fff'
}
},
roam: true,//是否滾動(dòng)縮放
regions: [
{
name: 'China', //這個(gè)名字可以是map（世界地圖），China（中國(guó)地圖高亮）
itemStyle: {
normal: {
areaColor: '#480103',
borderColor: '#ffc107',
borderWidth: 1,
},
emphasis: {
areaColor: '#b40106',
},
},
},
],
itemStyle: {
normal: {
areaColor: '#690613',
borderColor: 'rgba(255,255,255,0.6)',//國(guó)界線顏色
borderType: 'dotted',//國(guó)界線類型
},
emphasis: {
areaColor: '#ad9541'
}
},
},
series: [
{
type: 'lines',//飛線
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.1,
color: '#fff',//箭頭顏色
symbol: planePath,
symbolSize: 8,
},
lineStyle: {
normal: {
color: '#278FA2',//線的顏色
width: 1,
opacity: 0.4,
curveness: 0.2,
type: 'dotted',//'dotted'點(diǎn)型虛線 'solid'實(shí)線 'dashed'線性虛線
},
emphasis: {
type: 'dotted',
color: 'yellow',//線的顏色
}
},
data: formtGCData(geoCoordMap, data, 'china', false)
},
{
type: 'scatter',//圓點(diǎn)
coordinateSystem: 'geo',
zlevel: 10,
symbolSize: 10,
hoverAnimation: false,
silent: true,
data: formtVData(geoCoordMap, data, 'Brazil')
},
]
}
// 配置圖表
world_map.setOption(option)
// 圖表響應(yīng)式改變
window.addEventListener('resize', function () {
world_map.resize();
});
})
},
competition_off() {
// 獲取需要的數(shù)據(jù)
let zhuchang_data = []
let kechang_data = []
axios.get("http://127.0.0.1:5000/competition").then(res => {
// 獲取數(shù)據(jù)
zhuchang_data = toRaw(res.data.zhuchang_data)
kechang_data = toRaw(res.data.kechang_data)
// 生成出線方法
function formtGCData(geoData, data, srcNam, dest) {
var tGeoDt = []
if (dest) {
for (var i = 0; i < data.length; i++) {
if (srcNam !== data[i].name) {
tGeoDt.push({
coords: [geoData[srcNam], geoData[data[i].name]]
})
}
}
} else {
for (var j = 0; j < data.length; j++) {
if (srcNam !== data[j].name) {
tGeoDt.push({
coords: [geoData[data[j].name], geoData[srcNam]]
})
}
}
}
return tGeoDt
}
// 生成進(jìn)線方法
function formtVData(geoData, data, srcNam) {
var tGeoDt = []
for (var i = 0; i < data.length; i++) {
var tNam = data[i].name
if (srcNam !== tNam) {
tGeoDt.push({
name: tNam,
value: geoData[tNam]
})
}
}
tGeoDt.push({
name: srcNam,
value: geoData[srcNam],
symbolSize: 8,
})
tGeoDt.forEach((item) => {
if (item.name === 'china') {
item.itemStyle = {
color: 'red'
}
} else {
item.itemStyle = {
color: '#9E992F'
}
}
})
return tGeoDt
}
// 顯示點(diǎn)的坐標(biāo)
let geoCoordMap = {
china: [117.3, 41.03],
Botswana: [24.68, -22.33],
Canada: [-110.895168, 60.2312],
Brazil: [-50.895168, -10.2312],
};
// 所在點(diǎn)對(duì)應(yīng)數(shù)據(jù),上面數(shù)據(jù)添加修改后務(wù)必這里添加修改，value可不用
let data = [
{
id: 1,
name: 'china',
}, {
id: 2,
name: 'Botswana',
}, {
id: 3,
name: 'Canada',
}, {
id: 4,
name: 'Brazil',
}]
//箭頭類型 //''circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none''
var planePath = 'arrow'
// 定義圖表
this.$echarts.registerMap('world', world)
let map_off = this.$echarts.init(document.getElementById("world_map_off"), "football_customed");
// 定義主場(chǎng)圖表的配置
let option = {
geo: {
type: "map",
map: 'world',
zoom: 1.2,//地圖的縮放
label: {
emphasis: {
show: true,
color: '#fff'
}
},
roam: true,//是否滾動(dòng)縮放
regions: [
{
name: 'China', //這個(gè)名字可以是map（世界地圖），China（中國(guó)地圖高亮）
itemStyle: {
normal: {
areaColor: '#480103',
borderColor: '#ffc107',
borderWidth: 1,
},
emphasis: {
areaColor: '#b40106',
},
},
},
],
itemStyle: {
normal: {
areaColor: '#690613',
borderColor: 'rgba(255,255,255,0.6)',//國(guó)界線顏色
borderType: 'dotted',//國(guó)界線類型
},
emphasis: {
areaColor: '#ad9541'
}
},
},
series: [
{
type: 'lines',//飛線
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.1,
color: '#fff',//箭頭顏色
symbol: planePath,
symbolSize: 8,
},
lineStyle: {
normal: {
color: '#278FA2',//線的顏色
width: 1,
opacity: 0.4,
curveness: 0.2,
type: 'dotted',//'dotted'點(diǎn)型虛線 'solid'實(shí)線 'dashed'線性虛線
},
emphasis: {
type: 'dotted',
color: 'yellow',//線的顏色
}
},
data: formtGCData(geoCoordMap, data, 'china', false)
},
{
type: 'scatter',//圓點(diǎn)
coordinateSystem: 'geo',
zlevel: 10,
symbolSize: 10,
hoverAnimation: false,
silent: true,
data: formtVData(geoCoordMap, data, 'Brazil')
},
]
}
// 配置圖表
map_off.setOption(option)
// 圖表響應(yīng)式改變
window.addEventListener('resize', function () {
map_off.resize();
});
})
},
},
mounted() {
this.competition()
this.competition_off()
},
})
</script>核心步驟：下載對(duì)應(yīng)的地圖文件；在script中導(dǎo)入json文件；echarts注冊(cè)地圖。
到此這篇關(guān)于Vue3+echarts繪制世界地圖的示例代碼的文章就介紹到這了,更多相關(guān)Vue3 echarts繪制世界地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
antd?select?多選限制個(gè)數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個(gè)數(shù),實(shí)現(xiàn)思路和核心代碼都很簡(jiǎn)單，其中核心代碼在于disabled，代碼簡(jiǎn)單易懂需要的朋友可以參考下2022-11-11
基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue?路由切換過(guò)渡動(dòng)效滑入滑出效果的實(shí)例代碼
在支付寶賬單頁(yè)面有這樣一個(gè)特效切換過(guò)渡動(dòng)效滑入滑出效果，非常方便實(shí)用，那么這個(gè)功能如何實(shí)現(xiàn)的呢？下面小編通過(guò)vue實(shí)現(xiàn)路由切換過(guò)渡動(dòng)效滑入滑出效果，感興趣的朋友一起看看吧2022-03-03
Vue3使用element-plus組件不顯示問(wèn)題
這篇文章主要介紹了Vue3使用element-plus組件不顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法
這篇文章主要給大家介紹了在vue中如何通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下2023-06-06
vue2.0+SVG實(shí)現(xiàn)音樂(lè)播放圓形進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了Vue2.0+SVG實(shí)現(xiàn)音樂(lè)播放圓形進(jìn)度條組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue表單驗(yàn)證之禁止input輸入框輸入空格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue將后臺(tái)數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式
這篇文章主要為大家詳細(xì)介紹了vue將后臺(tái)數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09