Echarts中地图引用问题

发表于 | 分类于
Echarts中数据集的使用

前言

引用地图的时候报错：

Map china not exists. The GeoJSON of the map must be provided.

原因是新版本的Echarts已经移除了地图的JSON

解决方法

  • 使用旧版本（不推荐）
  • 引入注册地图的JSON

免费的地图数据

https://map.vanbyte.com/

使用旧版本

下载低版本的echarts@4.1

1
2
npm ls echarts  // 查看自己的echarts版本
npm install echarts@4.1.0 --save  //下载低版本echats包含china.js

然后在组件内直接引入china.js即可

1
import "echarts/map/js/china.js";

新版本引用并注册Map

方式1(推荐)

1、下载china.json文件 存放于自己的文件夹下

2、引用并使用 在初始化echarts实例前，调用echarts.registerMap方法， 在option的geo属性设置对应值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import chinaMap from "@/assets/echarts/china.json";
mounted() {
  echarts.registerMap("china", { geoJSON: chinaMap });
  if (!this.chart) {
    this.chart = echarts.init(this.$el)
  }

  let option = {
        geo:{
            map:'china',
        }
  }
  this.chart.setOption(option);
},

china.json

https://www.psvmc.cn/zjtools/z/echarts_common/china.json

方式2

1
import "@/assets/echarts/china.js";

china.js

https://www.psvmc.cn/zjtools/z/echarts_common/china.js

地图中心坐标

当在地图上显示散点的时候

对应中国地图来说本身JSON中有中心点坐标的可以这样获取

1
2
3
4
5
6
7
8
9
10
11
let geoCoordMap = {};
/*获取地图数据*/
let mapFeatures = echarts.getMap("china").geoJson.features;
//  console.log(mapFeatures)
mapFeatures.forEach(function (v) {
    // console.info(v);
    // 地区名称
    let name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

从网上找的坐标不太准，就使用地图中的数据把省的替换了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
detailCp() {
  let geoCoordMap = {};
  for (let i = 0; i < areaCp.length; i++) {
    let item = areaCp[i];
    let name = item["areaname"];
    name = name.replace("省", "");
    geoCoordMap[name] = [item["lng"], item["lat"]];
  }
  let mapFeatures = echarts.getMap("china").geoJson.features;
  //  console.log(mapFeatures)
  mapFeatures.forEach(function (v) {
    // console.info(v);
    // 地区名称
    let name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
  });
  localStorage.setItem("geoCoordMap", JSON.stringify(geoCoordMap));
},

事件

1
2
3
4
this.chart.off("click");
this.chart.on("click", (params) => {
	console.info("点击的项", params);
});