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

原文地址：https://blog.csdn.net/Shi_haoliu/article/details/145262714

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！