vue 中使用 echarts 的 map 的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1908 天前的主题，其中的信息可能已经有所发展或是发生改变。

map 是使用json方式注册的，在html的页面中使用正常，但是使用vue搭建的使用就报错了。

// .html 这是可以出来地图的
var chart = echarts.init(document.getElementById("map"))

$.getJSON(/*json 地址*/, function (data) {
  //注册地图
  echarts.registerMap("china", data);
  //绘制地图
  chart.setOption({
    geo: {
      map: 'china'
    }
  })
})

// .vue 这种报错了
drawMap () {
  this.$ajax.get(/*json 地址*/).then(res => {
    // 注册地图
    this.$echarts.registerMap('china', res)
    // 绘制地图
    this.chart = this.$echarts.init(document.getElementById('map'))
    this.chart.setOption({
      geo: {
        map: 'china'
      }
    })
  }).catch(err => {
    console.log(err)
  })
}

报错：

TypeError: Cannot read property 'push' of undefined
    at fixNanhai (nanhai.js:56)
    at Object.load (geoJSONLoader.js:76)
    at geoSourceManager.js:47
    at Array.forEach (<anonymous>)
    at each$1 (util.js:293)
    at Object.load (geoSourceManager.js:46)
    at Object.getFilledRegions (geoCreator.js:228)
    at ExtendedClass.optionUpdated (GeoModel.js:49)
    at ExtendedClass.<anonymous> (Global.js:240)
    at Array.forEach (<anonymous>)

但是我项目中没有nanhai.js这个文件，就只是请求了一个 json 而已，之前看到好像说 echarts4 内置了地图文件，难道这是内置的报错了吗？vue和html都是使用cdn引入的echarts

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>

json文件使用的都是echarts 的 github 下的 china.json

请求各位大佬指点～

第 1 条附言 · 2019-08-26 15:47:19 +08:00

有位大佬解答：
不用 get 请求了，直接 import 进来
```
import chinaJson from 'echarts/map/json/china.json'

// 注册时候直接使用 chinaJson 就可以了
this.$echarts.registerMap('china', chinaJson)

```

的确能解决这个问题，但是这为什么直接请求的就会报错。。而且这种如果放在本地的话更新也是一个问题，纳闷。。。

第 2 条附言 · 2019-08-26 16:49:58 +08:00

一棒子敲死自己算了，，，我想着线上请求的 json，请求完直接拿来用了，其实注册地图用的数据需要用到 res.data....

6 条回复 • 2019-08-26 18:05:05 +08:00