前言
引用地图的时候报错:
Map china not exists. The GeoJSON of the map must be provided.
原因是新版本的Echarts已经移除了地图的JSON
解决方法
- 使用旧版本(不推荐)
- 引入注册地图的JSON
免费的地图数据
使用旧版本
下载低版本的echarts@4.1
1 | npm ls echarts // 查看自己的echarts版本 |
然后在组件内直接引入china.js即可
1 | import "echarts/map/js/china.js"; |
新版本引用并注册Map
方式1(推荐)
1、下载china.json
文件 存放于自己的文件夹下
2、引用并使用 在初始化echarts实例前,调用echarts.registerMap
方法, 在option的geo属性设置对应值
1 | import chinaMap from "@/assets/echarts/china.json"; |
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 | let geoCoordMap = {}; |
从网上找的坐标不太准,就使用地图中的数据把省的替换了
1 | detailCp() { |
事件
1 | this.chart.off("click"); |