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中<script>的核心代码）

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

    export default {
        name: "echarts_map",
        data() {
            return {}
        },
        methods: {
          drawMap(){
            let myChart=this.$echarts.init(document.getElementById('main'));
            this.$echarts.registerMap('china',china);

            var data = [……];

            var geoCoordMap = {……};
            var toolTipData = [……];

            /*获取地图数据*/
            myChart.showLoading();
            var mapFeatures = this.$echarts.getMap('china').geoJson.features;
            myChart.hideLoading();
            mapFeatures.forEach(function(v) {
              // 地区名称
              var name = v.properties.name;
              // 地区经纬度
              geoCoordMap[name] = v.properties.cp;

            });

           ……

            let option = {……};
            myChart.setOption(option);
          }
        },
        mounted() {
          this.drawMap();
        },

    }
</script>

最核心的地方就是要引入地图的json文件，具体json数据在我们vue项目目录/node_modules/_echarts@4.2.0-rs.2@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;

附上效果图：

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

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