Echarts中地图引用问题

码客说

发布于 2023-10-19 14:38:37

1.4K0

发布于 2023-10-19 14:38:37

文章被收录于专栏：码客

前言

引用地图的时候报错：

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

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

解决方法

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

使用旧版本

下载低版本的echarts@4.1

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

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

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

新版本引用并注册Map

方式1(推荐)

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

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

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