V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zzlit
V2EX  ›  程序员

vue 中使用 echarts 的 map 的问题

  •  
  •   zzlit · 2019-08-26 14:48:19 +08:00 · 5131 次点击
    这是一个创建于 1676 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    请求各位大佬指点~

    第 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
    imherer
        1
    imherer  
       2019-08-26 14:52:20 +08:00
    不要用 cdn 引入,yongnpm 然后 import 试试
    我也在 vue 里用 echarts,不过没用过 map,都是一些图表,使用正常
    zzlit
        2
    zzlit  
    OP
       2019-08-26 14:57:46 +08:00
    @imherer 之前用 `npm` 也是一样的报错,所以才改为 `cdn` 的。。。
    wu67
        3
    wu67  
       2019-08-26 16:41:49 +08:00
    你是不是 cdn 引入又没设置 webpack 的 externals 呀...
    zzlit
        4
    zzlit  
    OP
       2019-08-26 16:50:35 +08:00
    @wu67 不是,一个低级错误,,应该是注册地图用到的数据应该是 res.data 而不是 res
    wu67
        5
    wu67  
       2019-08-26 17:00:42 +08:00
    @zzlit 另外提醒一下, 如果是公司的项目, 尽量用公司购买的 cdn 服务, 用第三方的如果挂了就要挨骂了, 我就曾经用过 bootcss 和七牛, 那酸爽...
    zzlit
        6
    zzlit  
    OP
       2019-08-26 18:05:05 +08:00
    @wu67 已经挨了。。bootcss 挂过几次了~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1198 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:13 · PVG 02:13 · LAX 11:13 · JFK 14:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.