vue中使用echarts的map的问题

Question

使用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)
  })
}

报错，项目中没有这个文件，就只是请求了一个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

请求大佬指点～

Answer 1

不用get请求了，直接import进来

import 'echarts/map/js/china' // 这个是js引用
import chinaJson from 'echarts/map/json/china.json' // 这个是json引用
// 路径按你自己的来

drawMap () {
    // 注册地图
    this.$echarts.registerMap('china', chinaJson) // 如果是js引入就不需要这一行了
    // 绘制地图
    this.chart = this.$echarts.init(document.getElementById('map'))
    this.chart.setOption({
      geo: {
        map: 'china'
      }
    })
}

Answer 2

你把this 在drawMap这个函数中保存一下this为that在下边的this都改完that看看

Answer 3

我也是vue项目，今天遇到了同样的问题，我用的是get请求，其实出现问题的原因不是get请求或者是本地import的区别，而是而是要用请求到的数据res.data来绘制地图，而不是整个res，这样写就是对的this.$echarts.registerMap("china", res.data)，尽量还是用get请求来获取数据，不然部署到线上会有问题的