Vue3+echarts绘制世界地图

先放效果图

 之前所查找的资料都没有讲清楚如何引入地图文件并绘制地图，下面做一个记录。

首先下载对应的地图json文件，这里可以参考我的这篇文章，提供了下载地址：记录echarts各种地图json文件下载地址-CSDN博客

第二步，在绘制地图的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].nameif (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].nameif (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注册地图。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/768303.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

笔记本和台式机主板内部结构分析

笔记本和台式机主板内部结构分析

笔记本和态势机主板内存接口以及配件安装位置 笔记本主板 1 以thinkpad L-490为例,使用拆机小工具拆机&#xff0c;打开后面板&#xff0c;内部结构示意图如下 台式机主板 以技嘉-B660M-AORUS-PRO-AX型号主板为例 笔记本电脑和台式机电脑的相同之处 CPU&#xff1a;笔记本…
阅读更多...
【boost_search搜索引擎】1.获取数据源

【boost_search搜索引擎】1.获取数据源

boost搜索引擎 1、项目介绍2、获取数据源 1、项目介绍 boost_search项目和百度那种不一样&#xff0c;百度是全站搜索&#xff0c;而boost_search是一个站内搜索。而项目的宏观上实现思路就如同图上的思路。 2、获取数据源 我们要实现一个站内搜索&#xff0c;我们就要有这…
阅读更多...
Rust 程序设计语言学习——结构体

Rust 程序设计语言学习——结构体

结构体和元组类似&#xff0c;它们都包含多个相关的值。和元组一样&#xff0c;结构体的每一部分可以是不同类型。但不同于元组&#xff0c;结构体需要命名各部分数据以便能清楚的表明其值的意义。由于有了这些名字&#xff0c;结构体比元组更灵活&#xff1a;不需要依赖顺序来…
阅读更多...
医院预约挂号系统设计与实现|jsp+ Mysql+Java+ Tomcat(可运行源码+数据库+设计文档)

医院预约挂号系统设计与实现|jsp+ Mysql+Java+ Tomcat(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;…
阅读更多...
初识kafka-数据存储篇1

初识kafka-数据存储篇1

目录 背景 1 kafka总体体系结构 2 疑问解答 2.1 高吞吐低延迟 2.2 实现分布式存储和数据读取 2.3 如何保证数据不丢失 背景 最近在和产品过项目审批的时候&#xff0c;深刻感受到业务方对系统的时时响应提出了更高的要求。目前手上大部分的业务都是基础定时任务去实现的&…
阅读更多...
nodejs+vue高校会议室预订管理系统python-flask-django-php

nodejs+vue高校会议室预订管理系统python-flask-django-php

伴随着我国社会的发展&#xff0c;人民生活质量日益提高。于是对系统进行规范而严格是十分有必要的&#xff0c;所以许许多多的信息管理系统应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套高校会议室预订管理系统&#xff0c;帮助学校进行会议…
阅读更多...
JDK，JRE，JVM之间的关系

JDK，JRE，JVM之间的关系

他们明面上的关系是JDK包含JRE&#xff0c;JRE包含JVM。 简单理解JDK就是Java开发工具包。JRE是Java运行环境。JVM是Java虚拟机。 JDK是面向开发者的&#xff0c;JRE是面向JAVA程序的用户的。也就是说开发者开发JAVA程序是需要用到JDK&#xff0c;如果用户不去开发JAVA程序&am…
阅读更多...
OpenHarmony IDL工具规格及使用说明书（仅对系统应用开放）

OpenHarmony IDL工具规格及使用说明书（仅对系统应用开放）

IDL接口描述语言简介 当客户端和服务器进行IPC通信时&#xff0c;需要定义双方都认可的接口&#xff0c;以保障双方可以成功通信&#xff0c;OpenHarmony IDL&#xff08;OpenHarmony Interface Definition Language&#xff09;则是一种定义此类接口的工具。OpenHarmony IDL先…
阅读更多...
初识 Redis 浅谈分布式

初识 Redis 浅谈分布式

目 录 一.认识 Redis二.浅谈分布式单机架构分布式是什么数据库分离和负载均衡理解负载均衡数据库读写分离引入缓存数据库分库分表引入微服务 三.概念补充四.分布式小结 一.认识 Redis 在 Redis 官网我们可以看到介绍 翻译过来就是&#xff1a;数以百万计的开发人员用作缓存、…
阅读更多...
nodejs+vue高校社团管理小程序的设计与实现python-flask-django-php

nodejs+vue高校社团管理小程序的设计与实现python-flask-django-php

相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低学校的运营人员成本&#xff0c;实现了高校社团管理的标准化、制度化、程序化的管理&#xff0c;有效地防止了高校社团管理的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能够及时、准…
阅读更多...
t-rex2开放集目标检测

t-rex2开放集目标检测

论文链接&#xff1a;http://arxiv.org/abs/2403.14610v1 项目链接&#xff1a;https://github.com/IDEA-Research/T-Rex 这篇文章的工作是基于t-rex1的工作继续做的&#xff0c;核心亮点&#xff1a; 是支持图片/文本两种模态的prompt进行输入&#xff0c;甚至进一步利用两…
阅读更多...
CCF-CSP认证考试 202303-5 施肥 35/60/75/100分题解

CCF-CSP认证考试 202303-5 施肥 35/60/75/100分题解

更多 CSP 认证考试题目题解可以前往&#xff1a;CSP-CCF 认证考试真题题解 原题链接&#xff1a; 202303-5 施肥 时间限制&#xff1a; 2.0s 内存限制&#xff1a; 1.0GB 问题描述 春天到了&#xff0c;西西艾弗岛上的 n n n 块田地需要施肥了。 n n n 块田地编号为 1 , 2…
阅读更多...
基于Google云原生工程师的kubernetes最佳实践（二）

基于Google云原生工程师的kubernetes最佳实践（二）

目录 二、应用部署篇 为deployment打上丰富的label,以便selecting 使用sidecar容器部署agent、proxy等组件 使用init container处理依赖关系,而不要用sidecar 镜像tag使用版本号,不要用latest或空tag 为pod设置readiness和liveness探针 不要给所有服务都使用LoadBalance…
阅读更多...
【微服务】以模块化单体架构开发微服务应用

【微服务】以模块化单体架构开发微服务应用

目录 推荐超级课程： Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战我们知道，起初，单体应用有显著的优势：它们更容易开发和部署。从开发人员的角度来看，这种简单性是有益的。一切都是集中的，可以快速更新任何部分的业务逻辑并立即看到结果。这种开…
阅读更多...
竞赛 python opencv 深度学习 指纹识别算法实现

竞赛 python opencv 深度学习 指纹识别算法实现

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python opencv 深度学习 指纹识别算法实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;4分创新点&#xff1a;4分 该项目较为新颖…
阅读更多...
ETL数据倾斜与资源优化

ETL数据倾斜与资源优化

1.数据倾斜实例 数据倾斜在MapReduce编程模型中比较常见&#xff0c;由于key值分布不均&#xff0c;大量的相同key被存储分配到一个分区里&#xff0c;出现只有少量的机器在计算&#xff0c;其他机器等待的情况。主要分为JOIN数据倾斜和GROUP BY数据倾斜。 1.1GROUP BY数据倾…
阅读更多...
【短接笔记本或者台式机的CMOS针脚解决电脑开机无法启动BIOS无法进入问题】

【短接笔记本或者台式机的CMOS针脚解决电脑开机无法启动BIOS无法进入问题】

为什么要执行短接笔记本或者台式机的CMOS针脚操作&#xff1f; 问题&#xff1a;可以解决如下图所示&#xff0c;技嘉小雕主板开机时按delete键无法进入BIOS主板界面&#xff0c;长时间等待之后依然无法进入BIOS主板界面&#xff0c;则判定为主板问题。此时短接CMOS针脚可清空…
阅读更多...
nodejs+vue高校工作室管理系统python-flask-django-php

nodejs+vue高校工作室管理系统python-flask-django-php

系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对高校工作室管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”的…
阅读更多...
python(django(自动化))之流程接口展示功能前端开发

python(django(自动化))之流程接口展示功能前端开发

1、创建模板代码如下&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>测试平台</title> </head> <body role"document"> <nav class "navbar n…
阅读更多...
Redis - list 列表

Redis - list 列表

前言 列表类似于 Java 中的数组或者顺序表&#xff0c;在 Redis 中&#xff0c;可以对列表两端插⼊&#xff08;push&#xff09;和弹出&#xff08;pop&#xff09;&#xff0c;还可以获取指定范围的元素列表、 获取指定索引下标的元素等。列表是⼀种⽐较灵活的数据结构&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023