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);
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu系统更改IP,保姆级教程

原理概述 本篇文章所用工具&#xff1a; Xshell&#xff1a;点击下载 VMware Workstation Pro&#xff1a;点击下载 密钥需要自行搜索所下载的VMware对应版本密钥。 IP 地址 IP 地址&#xff08;Internet Protocol Address&#xff09;是分配给每个连接到计算机网络的设备的…

IO进程----进程

进程 什么是进程 进程和程序的区别 概念&#xff1a; 程序&#xff1a;编译好的可执行文件 存放在磁盘上的指令和数据的有序集合&#xff08;文件&#xff09; 程序是静态的&#xff0c;没有任何执行的概念 进程&#xff1a;一个独立的可调度的任务 执行一个程序分配资…

使用插件SlideVerify实现滑块验证

作者gitee地址&#xff1a;https://gitee.com/monoplasty/vue-monoplasty-slide-verify 使用步骤&#xff1a; 1、安装插件 npm install --save vue-monoplasty-slide-verify 2、在main.js中进行配置 import SlideVerify from vue-monoplasty-slide-verify; Vue.use(SlideV…

初探——【Linux】程序的翻译与动静态链接

我们所写的C/C程序计算机是看不懂的&#xff0c;它只认识0101这样的机器码。所以我们就需要借助编译器对这些源代码进行翻译&#xff0c;使之成为计算机能够执行的二进制指令。这个过程通常分为几个关键步骤&#xff1a;预处理、编译、汇编和链接。 一.预处理&#xff08;Prep…

亲测有效!如何快速实现 PostgreSQL 数据迁移到 时序数据库TDengine

小T导读&#xff1a;本篇文章是“2024&#xff0c;我想和 TDengine 谈谈”征文活动的优秀投稿之一&#xff0c;作者从数据库运维的角度出发&#xff0c;分享了利用 TDengine Cloud 提供的迁移工具&#xff0c;从 PostgreSQL 数据库到 TDengine 进行数据迁移的完整实践过程。文章…

matlab实现数据极坐标显示

%% % 读取文件数据 filename E:\ProjectWorkspace\866\866data\665hangji.txt;%代码 距离 方位相对正北 时间 地址 横滚角度 TRK importdata(filename); filename1 E:\ProjectWorkspace\866\866data\665dianji.txt;%代码 距离 方位相对正北 时间 地址 横滚角度 PLOT …

Jenkins 启动

废话 这一阵子感觉空虚&#xff0c;心里空捞捞的&#xff0c;总想找点事情做&#xff0c;即使这是一件微小的事情&#xff0c;空余时间除了骑车、打球&#xff0c;偶尔朋友聚会 … 还能干什么呢&#xff1f; 当独自一人时&#xff0c;究竟可以做点什么&#xff0c;填补这空虚…

人工智能之深度学习_[4]-神经网络入门

文章目录 神经网络基础1 神经网络1.1 神经网络概念1.1.1 什么是神经网络1.1.2 如何构建神经网络1.1.3 神经网络内部状态值和激活值 1.2 激活函数1.2.1 网络非线性因素理解1.2.2 常见激活函数1.2.2.1 Sigmoid 激活函数1.2.2.2 Tanh 激活函数1.2.2.3 ReLU 激活函数1.2.2.4 SoftMa…

卸载和安装Git小乌龟、git基本命令

卸载 Git 打开控制面板&#xff1a; 按 Win R 打开运行对话框&#xff0c;输入 control 并按回车键。或直接在功能搜索里搜索“控制面板”。在控制面板中&#xff0c;选择“程序”或“程序和功能”。 查找并卸载 Git&#xff1a; 在程序列表中找到“Git”或“Git for Windows…

群论学习笔记

什么是对称&#xff1f; 对称是一个保持对象结构不变的变换&#xff0c;对称是一个过程&#xff0c;而不是一个具体的事物&#xff0c;伽罗瓦的对称是对方程根的置换&#xff0c;而一个置换就是对一系列事物的重排方式&#xff0c;严格的说&#xff0c;它也并不是这个重排本身…

C语言自定义类型:结构体

结构体简介&#xff1a; c语言里int 、float、double、等等类型来表示一个对象&#xff0c;但有时也有未能表达的对象&#xff0c;比如表示一个人的类型&#xff0c;这个类型里有人的身高、体重、年龄等等&#xff0c;这就需要很多个类型来拼凑&#xff0c;这就很不方便。于是…

【整体介绍】

ODO&#xff1a;汽车总行驶里程 Chime: 例如安全带没系的报警声音 多屏交互就是中控屏的信息会同步到主驾驶的仪表盘上 面试问题&#xff1a;蓝牙电话协议HFP 音乐协议A2DP 三方通话测试的逻辑

线性规划:机器学习中的优化利器

一、线性规划的基本概念 线性规划&#xff08;Linear Programming, LP&#xff09;是运筹学中数学规划的一个重要分支&#xff0c;用于在一组线性不等式的约束条件下&#xff0c;找到线性目标函数的最大值或最小值。其问题可以表述为&#xff1a; 在一组线性约束条件 s.t.&am…

SurgiTrack:外科手术视频中的细粒度多类别多工具跟踪|文献速递-视觉大模型医疗图像应用|文献速递-视觉大模型医疗图像应用

Title 题目 SurgiTrack: Fine-grained multi-class multi-tool tracking in surgical videos SurgiTrack&#xff1a;外科手术视频中的细粒度多类别多工具跟踪 01 文献速递介绍 手术器械跟踪在计算机辅助手术系统中发挥着至关重要的作用&#xff0c;可为一系列应用提供有价…

亚博microros小车-原生ubuntu支持系列:1 键盘控制

背景&#xff1a;电脑配置不太行&#xff0c;我在ubuntu再运行vmware&#xff0c;里面运行亚博官方的虚拟机镜像ubuntu&#xff0c;系统很卡。基本上8G内存给打满了。还是想把亚博官方的代码迁移出来&#xff0c;之前售后就说除了官方镜像虚拟机&#xff0c;需要自己摸索迁移。…

总结5..

#include<stdio.h> struct nb {//结构体列队 int x, y;//x为横坐标&#xff0c;y为纵坐标 int s, f;//s为步数&#xff0c;//f为方向 }link[850100]; int n, m, x, y, p, q, f; int hard 1, tail 1; int a[52][52], b[52][52], book[52][52][91]; int main() { …

鸿蒙系统 将工程HarmonyOS变成OpenHarmony

DevEco Studio软件创建工程后需要修改两个地方&#xff1a; 修改第二个build-profile.json5文件 将原先内容&#xff1a; {"app": {"signingConfigs": [],"products": [{"name": "default","signingConfig": &q…

什么样的问题适合用递归

递归是一种通过函数调用自身来解决问题的方法。递归适用于那些可以被分解为相似子问题的问题&#xff0c;即原问题可以通过解决一个或多个更小规模的同类问题来解决。递归通常需要满足以下两个条件&#xff1a; 递归基&#xff08;Base Case&#xff09;&#xff1a;问题的最简…

C# 网络协议第三方库Protobuf的使用

为什么要使用二进制数据 通常我们写一个简单的网络通讯软件可能使用的最多的是字符串类型&#xff0c;比较简单&#xff0c;例如发送格式为(head)19|Msg:Heart|100,x,y,z…&#xff0c;在接收端会解析收到的socket数据。 这样通常是完全可行的&#xff0c;但是随着数据量变大&…

认识BOM

BOM 弹出层 可视窗口尺寸 屏幕宽高 浏览器内核和其操作系统的版本 剪贴板 是否允许使用cookie 语言 是否在线