Vue3+echarts绘制世界地图的示例代码
更新时间：2024年03月25日 14:34:51 作者：诺坎普的风间
最近做项目需要实现世界地图,本文主要介绍了Vue3+echarts绘制世界地图的示例代码,具有一定的参考价值,感谢的可以了解一下
先放效果图
之前所查找的资料都没有讲清楚如何引入地图文件并绘制地图，下面做一个记录。
首先下载对应的地图json文件，这里可以参考我的这篇文章，提供了下载地址：
https://echarts.apache.org/examples/data/asset/geo/
第二步，在绘制地图的vue组件中导入该json文件。解释第三个import，world可以随便改名字，在下面第三步注册地图的时候对应第二个world。
import {defineComponent, toRaw} from "vue";
import axios from "axios";
import world from "@/assets/json/world.json"
第三步，定义图表并配置图表。注意在注册地图的时候，第一个是地图的名称，第二个是在import的时候给json文件取的名字
// 定义图表
this.$echarts.registerMap('world', world)
let map_off = this.$echarts.init(document.getElementById("world_map_off"), "football_customed");
// 配置图表
map_off.setOption(option)
// 图表响应式改变
window.addEventListener('resize', function () {
map_off.resize();下面给出完整代码（script），template部分只需要设置对应的图表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() {
// 获取需要的数据
let zhuchang_data = []
let kechang_data = []
axios.get("http://127.0.0.1:5000/competition").then(res => {
// 获取数据
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
}
// 生成进线方法
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
}
// 显示点的坐标
let geoCoordMap = {
china: [117.3, 41.03],
Botswana: [24.68, -22.33],
Canada: [-110.895168, 60.2312],
Brazil: [-50.895168, -10.2312],
};
// 所在点对应数据,上面数据添加修改后务必这里添加修改，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");
// 定义主场图表的配置
let option = {
geo: {
type: "map",
map: 'world',
zoom: 1.2,//地图的缩放
label: {
emphasis: {
show: true,
color: '#fff'
}
},
roam: true,//是否滚动缩放
regions: [
{
name: 'China', //这个名字可以是map（世界地图），China（中国地图高亮）
itemStyle: {
normal: {
areaColor: '#480103',
borderColor: '#ffc107',
borderWidth: 1,
},
emphasis: {
areaColor: '#b40106',
},
},
},
],
itemStyle: {
normal: {
areaColor: '#690613',
borderColor: 'rgba(255,255,255,0.6)',//国界线颜色
borderType: 'dotted',//国界线类型
},
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'点型虚线 'solid'实线 'dashed'线性虚线
},
emphasis: {
type: 'dotted',
color: 'yellow',//线的颜色
}
},
data: formtGCData(geoCoordMap, data, 'china', false)
},
{
type: 'scatter',//圆点
coordinateSystem: 'geo',
zlevel: 10,
symbolSize: 10,
hoverAnimation: false,
silent: true,
data: formtVData(geoCoordMap, data, 'Brazil')
},
]
}
// 配置图表
world_map.setOption(option)
// 图表响应式改变
window.addEventListener('resize', function () {
world_map.resize();
});
})
},
competition_off() {
// 获取需要的数据
let zhuchang_data = []
let kechang_data = []
axios.get("http://127.0.0.1:5000/competition").then(res => {
// 获取数据
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
}
// 生成进线方法
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
}
// 显示点的坐标
let geoCoordMap = {
china: [117.3, 41.03],
Botswana: [24.68, -22.33],
Canada: [-110.895168, 60.2312],
Brazil: [-50.895168, -10.2312],
};
// 所在点对应数据,上面数据添加修改后务必这里添加修改，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");
// 定义主场图表的配置
let option = {
geo: {
type: "map",
map: 'world',
zoom: 1.2,//地图的缩放
label: {
emphasis: {
show: true,
color: '#fff'
}
},
roam: true,//是否滚动缩放
regions: [
{
name: 'China', //这个名字可以是map（世界地图），China（中国地图高亮）
itemStyle: {
normal: {
areaColor: '#480103',
borderColor: '#ffc107',
borderWidth: 1,
},
emphasis: {
areaColor: '#b40106',
},
},
},
],
itemStyle: {
normal: {
areaColor: '#690613',
borderColor: 'rgba(255,255,255,0.6)',//国界线颜色
borderType: 'dotted',//国界线类型
},
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'点型虚线 'solid'实线 'dashed'线性虚线
},
emphasis: {
type: 'dotted',
color: 'yellow',//线的颜色
}
},
data: formtGCData(geoCoordMap, data, 'china', false)
},
{
type: 'scatter',//圆点
coordinateSystem: 'geo',
zlevel: 10,
symbolSize: 10,
hoverAnimation: false,
silent: true,
data: formtVData(geoCoordMap, data, 'Brazil')
},
]
}
// 配置图表
map_off.setOption(option)
// 图表响应式改变
window.addEventListener('resize', function () {
map_off.resize();
});
})
},
},
mounted() {
this.competition()
this.competition_off()
},
})
</script>核心步骤：下载对应的地图文件；在script中导入json文件；echarts注册地图。
到此这篇关于Vue3+echarts绘制世界地图的示例代码的文章就介绍到这了,更多相关Vue3 echarts绘制世界地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
WebStorm是一个非常适合学习和开发Vue项目的集成开发环境,下面这篇文章主要给大家介绍了关于利用WebStorm创建一个Vue项目的完整步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了Vue中的同步和异步调用顺序，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
vue elementUI table 自定义表头和行合并的实例代码
这篇文章主要介绍了vue elementUI table 自定义表头和行合并的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家介绍了VUE指令和pinia控制按钮权限示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
vue2.0 + element UI 中 el-table 数据导出Excel的方法
下面小编就为大家分享一篇vue2.0 + element UI 中 el-table 数据导出Excel的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Ant Design Vue 添加区分中英文的长度校验功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下功能，2020-01-01
这篇文章主要介绍了Vuejs监听vuex中值的变化的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在本篇文章里我们给大家分享了Vue组件插槽的使用以及调用组件内的方法相关知识点，有需要的朋友们参考下。2018-11-11
这篇文章主要介绍了vueRouter常用属性,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-12-12
Vue+FormData+axios实现图片上传功能的项目实战
本文主要介绍了Vue+FormData+axios实现图片上传功能的项目实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
最新评论