Vue 引入Echarts后，绘制地图无法显示报Cannot read property 'geoJson' of null"

Vue项目中引入ECharts，绘制地图报错解决方案

在vue项目中，各位伙伴按照官方文档引入ECharts后，发现使用很多拼图、折线图demo都没有任何问题，但是在绘制地图的时候，完全按照官方demo都会报错：Cannot read property 'geoJson' of null"，如下错误提示：

vue.esm.js?ff17:610 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'geoJson' of null"

found in…………

vue.esm.js?ff17:1841 TypeError: Cannot read property 'geoJson' of null …………

很多人都有疑问明明完全按照官方demo来的，为什么就要报错呢？

其实是因为没有地图所需的json数据导致的，解决方案如下：（附上.vue中

最核心的地方就是要引入地图的json文件，具体json数据在我们vue项目目录/node_modules/[email protected]@eharts/map/json目录下，我们可以按需引入或者全部引入，我这里需要绘制中国地图，所以自引入了china.js。

import china from 'echarts/map/json/china.json'

……

this.$echarts.registerMap('china',china);

---

顺便附上vue项目的main.js代码：

import Vue from 'vue'
import App from './App'
……
// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts;

附上效果图：

手编不易，转载参考请注明来源。

若帮助到大家还请点赞、若有疑问欢迎留言