vue 中使用 echarts 的 map 的问题

2019-08-26 14:48:19 +08:00
 zzlit

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 内置了地图文件,难道这是内置的报错了吗?vuehtml都是使用cdn引入的echarts

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

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

请求各位大佬指点~

5221 次点击
所在节点    程序员
6 条回复
imherer
2019-08-26 14:52:20 +08:00
不要用 cdn 引入,yongnpm 然后 import 试试
我也在 vue 里用 echarts,不过没用过 map,都是一些图表,使用正常
zzlit
2019-08-26 14:57:46 +08:00
@imherer 之前用 `npm` 也是一样的报错,所以才改为 `cdn` 的。。。
wu67
2019-08-26 16:41:49 +08:00
你是不是 cdn 引入又没设置 webpack 的 externals 呀...
zzlit
2019-08-26 16:50:35 +08:00
@wu67 不是,一个低级错误,,应该是注册地图用到的数据应该是 res.data 而不是 res
wu67
2019-08-26 17:00:42 +08:00
@zzlit 另外提醒一下, 如果是公司的项目, 尽量用公司购买的 cdn 服务, 用第三方的如果挂了就要挨骂了, 我就曾经用过 bootcss 和七牛, 那酸爽...
zzlit
2019-08-26 18:05:05 +08:00
@wu67 已经挨了。。bootcss 挂过几次了~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/595203

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX