Echarts中地图引用问题

前言

引用地图的时候报错：

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

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

解决方法

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

使用旧版本

下载低版本的echarts@4.1

代码语言：javascript复制

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

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

代码语言：javascript复制

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

新版本引用并注册Map

方式1(推荐)

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

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

代码语言：javascript复制

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

代码语言：javascript复制

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

china.js

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

json echarts import map 地图

0 人点赞