vue中echarts-中国地图，世界地图显示（echarts5.6版本本地导入)

地图去掉南海诸岛右下角的框显示（因为显示的不是现在的10段线）

资源里面主要是有个改好的中国地图json其他的无所谓，用现有的json也行，主要是为了解决10段线的问题

引入需要注意 import * as echarts from “./echarts”;

目录目录
注册地图

 <div class="chartContent" ref="chart"></div>import * as echarts from "./echarts";this.chart = echarts.init(this.$refs.chart);

设置option

import * as echarts from "./echarts";
function setMap(xAxis, legend, data, params) {return setMapWorld(xAxis, legend, data, params);
}
function setMapWorld() {let mapJson = require("./world.json");echarts.registerMap("world", mapJson);let nameMap = {Afghanistan: "阿富汗",Singapore: "新加坡",Angola: "安哥拉",Albania: "阿尔巴尼亚","United Arab Emirates": "阿联酋",Argentina: "阿根廷",Armenia: "亚美尼亚","French Southern and Antarctic Lands": "法属南半球和南极领地",Australia: "澳大利亚",Austria: "奥地利",Azerbaijan: "阿塞拜疆",Burundi: "布隆迪",Belgium: "比利时",Benin: "贝宁","Burkina Faso": "布基纳法索",Bangladesh: "孟加拉国",Bulgaria: "保加利亚","The Bahamas": "巴哈马","Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",Belarus: "白俄罗斯",Belize: "伯利兹",Bermuda: "百慕大",Bolivia: "玻利维亚",Brazil: "巴西",Brunei: "文莱",Bhutan: "不丹",Botswana: "博茨瓦纳","Central African Republic": "中非共和国",Canada: "加拿大",Switzerland: "瑞士",Chile: "智利",China: "中国","Ivory Coast": "象牙海岸",Cameroon: "喀麦隆","Democratic Republic of the Congo": "刚果民主共和国","Dem. Rep. Congo": "刚果民主共和国","Republic of the Congo": "刚果共和国",Colombia: "哥伦比亚","Costa Rica": "哥斯达黎加",Cuba: "古巴","Northern Cyprus": "北塞浦路斯",Cyprus: "塞浦路斯","Czech Republic": "捷克共和国",Germany: "德国",Djibouti: "吉布提",Denmark: "丹麦","Dominican Republic": "多明尼加共和国",Algeria: "阿尔及利亚",Ecuador: "厄瓜多尔",Egypt: "埃及",Eritrea: "厄立特里亚",Spain: "西班牙",Estonia: "爱沙尼亚",Ethiopia: "埃塞俄比亚",Finland: "芬兰",Fiji: "斐","Falkland Islands": "福克兰群岛",France: "法国",Gabon: "加蓬","United Kingdom": "英国",Georgia: "格鲁吉亚",Ghana: "加纳",Guinea: "几内亚",Gambia: "冈比亚","Guinea Bissau": "几内亚比绍",Greece: "希腊",Greenland: "格陵兰",Guatemala: "危地马拉","French Guiana": "法属圭亚那",Guyana: "圭亚那",Honduras: "洪都拉斯",Croatia: "克罗地亚",Haiti: "海地",Hungary: "匈牙利",Indonesia: "印度尼西亚",India: "印度",Ireland: "爱尔兰",Iran: "伊朗",Iraq: "伊拉克",Iceland: "冰岛",Israel: "以色列",Italy: "意大利",Jamaica: "牙买加",Jordan: "约旦",Japan: "日本",Kazakhstan: "哈萨克斯坦",Kenya: "肯尼亚",Kyrgyzstan: "吉尔吉斯斯坦",Cambodia: "柬埔寨",Kosovo: "科索沃",Kuwait: "科威特",Laos: "老挝",Lebanon: "黎巴嫩",Liberia: "利比里亚",Libya: "利比亚","Sri Lanka": "斯里兰卡",Lesotho: "莱索托",Lithuania: "立陶宛",Luxembourg: "卢森堡",Latvia: "拉脱维亚",Morocco: "摩洛哥",Moldova: "摩尔多瓦",Madagascar: "马达加斯加",Mexico: "墨西哥",Macedonia: "马其顿",Mali: "马里",Myanmar: "缅甸",Montenegro: "黑山",Mongolia: "蒙古",Mozambique: "莫桑比克",Mauritania: "毛里塔尼亚",Malawi: "马拉维",Malaysia: "马来西亚",Namibia: "纳米比亚","New Caledonia": "新喀里多尼亚",Niger: "尼日尔",Nigeria: "尼日利亚",Nicaragua: "尼加拉瓜",Netherlands: "荷兰",Norway: "挪威",Nepal: "尼泊尔","New Zealand": "新西兰",Oman: "阿曼",Pakistan: "巴基斯坦",Panama: "巴拿马",Peru: "秘鲁",Philippines: "菲律宾","Papua New Guinea": "巴布亚新几内亚",Poland: "波兰","Puerto Rico": "波多黎各","North Korea": "北朝鲜",Portugal: "葡萄牙",Paraguay: "巴拉圭",Qatar: "卡塔尔",Romania: "罗马尼亚",Russia: "俄罗斯",Rwanda: "卢旺达","Western Sahara": "西撒哈拉","Saudi Arabia": "沙特阿拉伯",Sudan: "苏丹","South Sudan": "南苏丹","S. Sudan": "南苏丹",Senegal: "塞内加尔","Solomon Islands": "所罗门群岛","Sierra Leone": "塞拉利昂","El Salvador": "萨尔瓦多",Somaliland: "索马里兰",Somalia: "索马里","Republic of Serbia": "塞尔维亚",Suriname: "苏里南",Slovakia: "斯洛伐克",Slovenia: "斯洛文尼亚",Sweden: "瑞典",Swaziland: "斯威士兰",Syria: "叙利亚",Chad: "乍得",Togo: "多哥",Thailand: "泰国",Tajikistan: "塔吉克斯坦",Turkmenistan: "土库曼斯坦","East Timor": "东帝汶","Trinidad and Tobago": "特里尼达和多巴哥",Tunisia: "突尼斯",Turkey: "土耳其","United Republic of Tanzania": "坦桑尼亚",Uganda: "乌干达",Ukraine: "乌克兰",Uruguay: "乌拉圭","United States": "美国",Uzbekistan: "乌兹别克斯坦",Venezuela: "委内瑞拉",Vietnam: "越南",Vanuatu: "瓦努阿图","West Bank": "西岸",Yemen: "也门","South Africa": "南非",Zambia: "赞比亚",Korea: "韩国",Tanzania: "坦桑尼亚",Zimbabwe: "津巴布韦",Congo: "刚果","Central African Rep.": "中非",Serbia: "塞尔维亚","Côte d'Ivoire": "科特迪瓦共和国","Bosnia and Herz.": "波黑","Czech Rep.": "捷克","W. Sahara": "西撒哈拉","Lao PDR": "老挝","Dem. Rep. Korea": "朝鲜","Falkland Is.": "福克兰群岛","Timor-Leste": "东帝汶","Solomon Is.": "所罗门群岛",Palestine: "巴勒斯坦","N. Cyprus": "北塞浦路斯",Aland: "奥兰群岛","Fr. S. Antarctic Lands": "法属南半球和南极陆地",Mauritius: "毛里求斯",Comoros: "科摩罗","Eq. Guinea": "赤道几内亚","Guinea-Bissau": "几内亚比绍","Dominican Rep.": "多米尼加","Saint Lucia": "圣卢西亚",Dominica: "多米尼克","Antigua and Barb.": "安提瓜和巴布达","U.S. Virgin Is.": "美国原始岛屿",Montserrat: "蒙塞拉特",Grenada: "格林纳达",Barbados: "巴巴多斯",Samoa: "萨摩亚",Bahamas: "巴哈马","Cayman Is.": "开曼群岛","Faeroe Is.": "法罗群岛","IsIe of Man": "马恩岛",Malta: "马耳他共和国",Jersey: "泽西","Cape Verde": "佛得角共和国","Turks and Caicos Is.": "特克斯和凯科斯群岛","St. Vin. and Gren.": "圣文森特和格林纳丁斯","S. Geo. and S. Sandw. Is.": "南乔治岛和南桑威群岛",};//地图数据值let _data = [{ name: "萨摩亚", value: 3427985 },{ name: "乌克兰", value: 59834567 },{ name: "越南", value: 53589 },{ name: "新西兰", value: 93456 },{ name: "墨西哥", value: 19856 },{ name: "美国", value: 9876576 },{ name: "巴拿马", value: 36789 },{ name: "澳大利亚", value: 945783 },{ name: "阿富汗", value: 734567 },{ name: "新加坡", value: 546923 },{ name: "安哥拉", value: 54345 },{ name: "阿尔巴尼亚", value: 75678 },{ name: "阿联酋", value: 98797 },{ name: "阿根廷", value: 127896 },{ name: "亚美尼亚", value: 367892 },{ name: "中国", value: 7876769 },{ name: "俄罗斯", value: 59834572 },{ name: "加拿大", value: 5983457 },];return {// 图表主标题title: {show: false,text: "世界地图", // 主标题文本，支持使用 \n 换行//top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比left: "center", // 值: 'left', 'center', 'right' 同上textStyle: {// 文本样式fontSize: 18,fontWeight: 600,color: "black",},},grid: {left: "2%",right: "2%",bottom: "6%",top: "6%",containLabel: true,},tooltip: {show: true,trigger: "item",formatter: function (params) {// //console.log(params,123)if (params.name) {return (params.name +" : " +(isNaN(params.value) ? 0 : parseInt(params.value)));}},},// 视觉映射组件visualMap: {type: "continuous", // continuous 类型为连续型  piecewise 类型为分段型show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在// 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。// [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』right: "0",// 文本样式textStyle: {fontSize: 14,color: "transparent",},realtime: false, // 拖拽时，是否实时更新calculable: true, // 是否显示拖拽用的手柄// 定义 在选中范围中 的视觉元素inRange: {color: ["#ebdecb", "#8aa87d", "#7d97a8"],},},series: [{name: "World",type: "map",mapType: "world",roam: true,zoom: 1.2,itemStyle: {// areaColor: '#ccc', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用borderWidth: 1, // 描边线宽 为 0 时无描边borderColor: "#9c978b", // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数borderType: "solid", // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'emphasis: {label: { show: true },areaColor: "#C4E7C0",borderWidth: 1,borderColor: "#4EAC41",},},label: {show: false, // 是否显示对应地名emphasis: {show: true,areaColor: "#C4E7C0",},},data: _data,nameMap: nameMap,},],};
}
function setMapChina() {// console.log(require("./china.json"));//因为现在是测试阶段 地图放在目录下面了 所以直接读，后面正式了就要放在静态路径下加载，用$.getJSON// $.getJSON("china.json", function (data) {//   console.log(data);//   // d = [];//   // for (var i = 0; i < data.features.length; i++) {//   //   d.push({//   //     name: data.features[i].properties.name,//   //   });//   // }//   // mapdata = d;//   // //注册地图//   // echarts.registerMap("china", data);//   // //绘制地图//   // renderMap("china", d);// });let mapJson = require("./china.json");echarts.registerMap("china", mapJson);return {backgroundColor: "#ccc",tooltip: {trigger: "item",formatter: "{b}",},visualMap: {seriesIndex: 0,min: 0,max: 2500,left: "left",top: "bottom",text: ["高", "低"], // 文本，默认为数值文本calculable: true,},grid: {height: 200,width: 8,right: 80,bottom: 10,},xAxis: {type: "category",data: [],splitNumber: 1,show: false,},yAxis: {position: "right",min: 0,max: 20,splitNumber: 20,inverse: true,axisLabel: {show: true,},axisLine: {show: false,},splitLine: {show: false,},axisTick: {show: false,},data: [],},series: [{name: "中国",type: "map",mapType: "china",selectedMode: "multiple",roam: true,left: 0,right: "15%",label: {normal: {show: true,},emphasis: {show: true,},},data: [{ name: "北京", value: randomData() },{ name: "天津", value: randomData() },{ name: "上海", value: randomData() },{ name: "重庆", value: randomData() },{ name: "河北", value: randomData() },{ name: "河南", value: randomData() },{ name: "云南", value: randomData() },{ name: "辽宁", value: randomData() },{ name: "黑龙江", value: randomData() },{ name: "湖南", value: randomData() },{ name: "安徽", value: randomData() },{ name: "山东", value: randomData() },{ name: "新疆", value: randomData() },{ name: "江苏", value: randomData() },{ name: "浙江", value: randomData() },{ name: "江西", value: randomData() },{ name: "湖北", value: randomData() },{ name: "广西", value: randomData() },{ name: "甘肃", value: randomData() },{ name: "山西", value: randomData() },{ name: "内蒙古", value: randomData() },{ name: "陕西", value: randomData() },{ name: "吉林", value: randomData() },{ name: "福建", value: randomData() },{ name: "贵州", value: randomData() },{ name: "广东", value: randomData() },{ name: "青海", value: randomData() },{ name: "西藏", value: randomData() },{ name: "四川", value: randomData() },{ name: "宁夏", value: randomData() },{ name: "海南", value: randomData() },{ name: "台湾", value: randomData() },{ name: "香港", value: randomData() },{ name: "澳门", value: randomData() },],},],};
}
function randomData() {return Math.round(Math.random() * 2500);
}

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

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

相关文章

数据结构(三) 排序/并查集/图

数据结构(三) 排序/并查集/图

目录 1. 排序 2.并查集 3.图 1.排序: 1.1 概念: 排序就是将数据按照某种规则进行排列, 具有某种顺序. 分为内排序和外排序. 内排序就是: 将数据放在内存中的排序; 外排序是: 数据太多无法在内存中排序的. 1.2 插入排序: 插入排序包含: 直接插入排序和希尔排序. (1) 直接插入…
阅读更多...
算法随笔_13: 有效三角形的个数

算法随笔_13: 有效三角形的个数

上一篇:算法随笔_12:最短无序子数组-CSDN博客 题目描述如下: 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 1: 输入: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使用第一个 2) 2,3,4 (使用第二个 2) 2,2,3 算法…
阅读更多...
CSS 网络安全字体

CSS 网络安全字体

适用于 HTML 和 CSS 的最佳 Web 安全字体 下面列出了适用于 HTM L和 CSS 的最佳 Web 安全字体&#xff1a; Arial (sans-serif)Verdana (sans-serif)Helvetica (sans-serif)Tahoma (sans-serif)Trebuchet MS (sans-serif)Times New Roman (serif)Georgia (serif)Garamond (se…
阅读更多...
大模型学习笔记 - 第一期 - Milvus向量数据库

大模型学习笔记 - 第一期 - Milvus向量数据库

大模型学习笔记 - 向量数据库 目录 大模型学习笔记 - 向量数据库传统文字检索(无嵌入)面临的困境1. 用户和商户表述差异2. 不同语种的表述差异3. 不同背景下的音译表述差异 向量检索向量化服务 参考 传统文字检索(无嵌入)面临的困境 1. 用户和商户表述差异 ​ 如果商户维护了…
阅读更多...
详细图文解读Transformer模型：《Attention is All You Need》完整版

详细图文解读Transformer模型：《Attention is All You Need》完整版

目录 前言1、Transformer模型《Attention is All You Need》总结2、Transformer整体结构2.1、工作流程 3、Transformer的输入4、Self-Attention&#xff08;自注意力机制&#xff09;4.1、Self-Attention 结构4.2、Q, K, V计算4.3、Self-Attention 的输出4.4、Multi-Head Atten…
阅读更多...
Hadoop•用Web UI查看Hadoop状态词频统计

Hadoop•用Web UI查看Hadoop状态词频统计

听说这里是目录哦 通过Web UI查看Hadoop运行状态&#x1f407;一、关闭防火墙二、在物理计算机添加集群的IP映射三、启动集群四、进入HDFS的Web UI 词频统计&#x1f9a9;1、准备文本数据2、在HDFS创建目录3、上传文件4、查看文件是否上传成功5、运行MapReduce程序6、查看MapRe…
阅读更多...
Ubuntu、Windows系统网络设置(ping通内外网)

Ubuntu、Windows系统网络设置(ping通内外网)

一、 虚拟机VMware和Ubuntu系统的网络配置说明 1、虚拟机的网络适配器的模式有三种&#xff1a; 桥接模式NAT模式主机模式 2、虚拟机VMware的网卡配置(如何进行配置界面(虚拟机->设置)) 注意&#xff1a; 1、以上桥接模式(ubuntu有独立IP)、NAT模式(没有独立IP)都可以联…
阅读更多...
将IDLE里面python环境pyqt5配置的vscode

将IDLE里面python环境pyqt5配置的vscode

首先安装pyqt5全套&#xff1a;pip install pyqt5-tools 打开Vscode&#xff1a; 安装第三方扩展&#xff1a;PYQT Integration 成功配置designer.exe的路径【个人安装pyqt5的执行路径】&#xff0c;便可直接打开UI文件&#xff0c;进行编辑。 配置pyuic,如果下图填写方法使用…
阅读更多...
C# OpenCV机器视觉:特征匹配 “灵魂伴侣”

C# OpenCV机器视觉:特征匹配 “灵魂伴侣”

在一个阳光仿佛被施了魔法&#xff0c;欢快得直蹦跶的早晨&#xff0c;阿强像个即将踏上神秘寻宝之旅的探险家&#xff0c;一屁股墩在实验室那张堆满各种奇奇怪怪小玩意儿的桌前。桌上&#xff0c;零件、线路、半成品设备乱成一团&#xff0c;唯有他那宝贝电脑屏幕散发着清冷又…
阅读更多...
简述mysql 主从复制原理及其工作过程，配置一主两从并验证

简述mysql 主从复制原理及其工作过程，配置一主两从并验证

第一种基于binlog的主从同步 首先对主库进行配置&#xff1a; [rootopenEuler-1 ~]# vim /etc/my.cnf 启动服务 [rootopenEuler-1 ~]# systemctl enable --now mysqld 主库的配置 从库的配置 第一个从库 [rootopenEuler-1 ~]# vim /etc/my.cnf [rootopenEuler-1 ~]# sys…
阅读更多...
Spring自定义BeanPostProcessor实现bean的代理Java动态代理知识

Spring自定义BeanPostProcessor实现bean的代理Java动态代理知识

上文&#xff1a;https://blog.csdn.net/qq_26437925/article/details/145241149 中大致了解了spring aop的代理的实现&#xff0c;其实就是有个BeanPostProcessor代理了bean对象。顺便复习下java代理相关知识 目录 自定义BeanPostProcessor实现aopJava动态代理知识动态代理的几…
阅读更多...
医院挂号就诊系统设计与实现(代码+数据库+LW)

医院挂号就诊系统设计与实现(代码+数据库+LW)

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装医院挂号就诊系统软件来发挥其高效地信息处理的作用&#…
阅读更多...
【GORM】初探gorm模型，字段标签与go案例

【GORM】初探gorm模型，字段标签与go案例

GORM是什么&#xff1f; GORM 是一个Go 语言 ORM&#xff08;对象关系映射&#xff09;库&#xff0c;它让我们可以使用结构体来操作数据库&#xff0c;而无需编写SQL 语句 GORM 模型与字段标签详解 在 GORM 中&#xff0c;模型是数据库表的抽象表示&#xff0c;字段标签&am…
阅读更多...
R 语言科研绘图第 20 期 --- 箱线图-配对

R 语言科研绘图第 20 期 --- 箱线图-配对

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…
阅读更多...
【物联网】ARM核介绍

【物联网】ARM核介绍

文章目录 一、芯片产业链1. CPU核(1)ARM(2)MIPS(3)PowerPc(4)Intel(5)RISC-V 2. SOC芯片(1)主流厂家(2)产品解决方案 3. 产品 二、ARM核发展1. 不同架构的特点分析(1)VFP(2)Jazelle(3)Thumb(4)TrustZone(5)SIMD(6)NEON 三、ARM核(ARMv7)工作模式1. 权限级别(privilege level)2.…
阅读更多...
uniApp开通uniPush1.0个推，SpringBoot集成uniPush1.0个推

uniApp开通uniPush1.0个推，SpringBoot集成uniPush1.0个推

uniApp开通unipush1.0个推&#xff0c;SpringBoot程序集成 一、APP开通unipush1.0个推(商户App源码仅支持1.0个推) 1.app模块配置开通推送 2.应用开通推送 3.开通后点击消息推送菜单会看到如下页面 完成以上步骤后 此时android 仅支持在线推送。 4.配置各厂商离线推送 暂未…
阅读更多...
JS宏进阶: 工厂函数与构造函数

JS宏进阶: 工厂函数与构造函数

一、构造函数 在JavaScript中&#xff0c;构造函数是一种用于创建和初始化对象的特殊函数。构造函数的名字通常以大写字母开头&#xff0c;以区分于普通函数。通过new关键字调用构造函数&#xff0c;可以创建一个新的实例对象&#xff0c;并自动执行构造函数内部的代码来初始化…
阅读更多...
03_UI自适应

03_UI自适应

因为Canvas大小是始终和屏幕一致的 所以设置Canvas的屏幕大小 通常设置为1920 * 1080 又因为屏幕的图像及按钮如果想适配各种显示屏需要锁定长或者宽&#xff0c; 之后利用钉子将其他图像利用创建空节点定在左右或者上下两侧 比如unity编辑器通常是锁定宽的&#xff0c;那我…
阅读更多...
网络安全——常用语及linux系统

网络安全——常用语及linux系统

一、网络安全概念及法规 网络安全&#xff1a;网络空间安全 cyber security 信息系统&#xff1a;由计算机硬件、网络和通信设备、计算机软件、信息资源、信息用户和规章制度组成的已处理信息流为目的的人机一体化系统 信息系统安全三要素&#xff08;CIA&#xff09; 保密…
阅读更多...
算法日记6.StarryCoding P52：我们都需要0（异或）

算法日记6.StarryCoding P52：我们都需要0（异或）

一、题目 二、题解&#xff1a; 1、对于这道题&#xff0c;题意为让我们寻找一个数x使得 b[i]a[i]^x&#xff0c; 并且b[1]^b[2]^b[3]^ b[4]^b[5]....0 2、我们把b[i]给拆开&#xff0c;可以得到 3、又因为^满足结合律&#xff0c;因此&#xff0c;可以把括号给拆开 4、接着…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023