在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题。如下是get请求方法:

this.$http.get(zhongguo).then(res => {
console.log(res);
this.$echarts.registerMap("china", res); //注册地图
console.log("223442");
var myChart = this.$echarts.extendsMap("mapChart", { //绘制地图
bgColor: "", // 画布背景色
mapName: "china", // 地图名
text: "by:wxw",
goDown: true, // 是否下钻
// 下钻回调
callback: function(name, option, instance) {
console.log(name, option, instance);
},
// 数据展示
data: areaProjects
});
});

在请求到数据后我直接用res来绘制地图,结果报错

我就纳闷,根本没有这个文件啊,但其实这个js文件就在我们安装的echarts包里面

报错行打断点:regions: undefined

我看到有人说别用get请求方法,直接import就不会报错,嗯?为什么会这样?我打印了一下res

这么多没用的数据,我们绘制地图只需要res.data,而不能是整个res,修改后就可以了展示地图了

this.$http.get(zhongguo).then(res => {
console.log(res);
this.$echarts.registerMap("china", res.data); //注册地图
console.log("223442");
var myChart = this.$echarts.extendsMap("mapChart", { //绘制地图
bgColor: "", // 画布背景色
mapName: "china", // 地图名
text: "by:wxw",
goDown: true, // 是否下钻
// 下钻回调
callback: function(name, option, instance) {
console.log(name, option, instance);
},
// 数据展示
data: areaProjects
});
});

就这个问题折腾了我两天时间,今天早上忽然开窍,真想给自己一个大嘴巴子

vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js的更多相关文章

  1. Vue 项目中的ESlint语法报错问题

    在项目中的""和;经常会报错,真的很纠结,今天看到一个解决方法,可以不用卸载删除 在项目根目录中,新建一个.prettierrc文件,来移除分号,和替换为单引号. { " ...

  2. vue.config.js报错cannot set property "preserveWhitespace" of undefined

    vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ...

  3. 小程序 for循环 报错 Cannot read property 'total' of undefined

    for循环一直报错  Cannot read property 'total' of undefined,但total在起初是有定义的,后来找到了问题,是i<=的问题,改为<不报错了. i ...

  4. datatables 多一列报错Cannot read property 'sWidth' of undefined(…)/少一列报错Cannot read property 'style' of undefined(…)

    datatables 多一列报错Cannot read property 'sWidth' of undefined(…)/少一列报错Cannot read property 'style' of u ...

  5. Vue 项目: npm run dev 报错 webpack-dev-server

    从码云上下载vue项目,运行npm run dev 时报错: > webpack-dev-server --inline --progress --config build/webpack.de ...

  6. 使用vue-preview报错Cannot read property 'open' of undefined

    最近在做一个vue项目中时,需要使用vue-preview插件制作缩略图,首先在终端使用npm i vue-preview -S指令安装了vue-preview插件,然后在main.js中,导入并引用 ...

  7. vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...

    http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...

  8. vue-cli创建的项目中引入第三方库报错'caller', 'calle', and 'arguments' properties may not be...

    本文链接:https://blog.csdn.net/Sophie_U/article/details/76223978 问题: 在vue的main.js中引入mui.min.js时,报错. 如上,单 ...

  9. ASP.NET CORE MVC 2.0 项目中引用第三方DLL报错的解决办法 - InvalidOperationException: Cannot find compilation library location for package

    目前在学习ASP.NET CORE MVC中,今天看到微软在ASP.NET CORE MVC 2.0中又恢复了允许开发人员引用第三方DLL程序集的功能,感到甚是高兴!于是我急忙写了个Demo想试试,我 ...

随机推荐

  1. python学习笔记:(六)str(字符串)常用方法

    注意点: 1.字符串是不可变的: 2.%格式化操作符:左侧放置字符串,右侧放置希望被格式化的值. 对于单个字符的编码,Python提供了ord()函数获取字符的整数表示,chr()函数把编码转换为对应 ...

  2. 2018.03.26 Python-Pandas 字符串常用方法

    import numpy as np import pandas as pd 1 #字符串常用方法 - strip s = pd.Series([' jack ','jill',' jease ',' ...

  3. 【Spring】的【bean】管理(XML配置文件)【Bean实例化的三种方式】

    Bean实例化的三种方式 说明:通过配置文件创建对象就称为Bean实例化. 第一种:使用类的无参构造创建(重点) 实体类 package com.tyzr.ioc; public class User ...

  4. date picker with jquery

    <html> <input id="from_time" name="from_time"type="text" valu ...

  5. 【Airtest】由于Airtest中long_click无法实现长按,教你如何在Airtest中实现长按的方法

    Airtest中我们想要实现长按操作,poco中有一个方法long_click,但是实际使用了一下,发现并没有卵用,仍然是单击操作,如下图 那我们要如何进行长按操作呢?其实可以利用swipe实现,以长 ...

  6. java创建多线程实现并行计算任务处理

    1.直接上代码一看明白: package multithreadingTest; class fblib extends Thread{ public static Integer fb(Intege ...

  7. Redis进阶:Redis的主从复制机制

    Redis进阶:Redis的主从复制机制 主从复制机制介绍 单机版的Redis存在性能瓶颈,Redis通过提高主从复制实现读写分离,提高了了Redis的可用性,另一方便也能实现数据在多个Redis直接 ...

  8. SpringBoot 单元测试junit test

    pom引用 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http: ...

  9. [转帖]青岛uber偷拍设备

    爱彼迎民宿路由器暗藏摄像头:官方回应已移除房源 https://www.cnbeta.com/articles/tech/844233.htm 罚款 就是搞笑啊.. 不过现在偷拍设备真多... 5月5 ...

  10. 将从model中获得的数据传到js函数中

    刚遇到了一种情况,从controller中获得的model是一个集合,需要将这个集合循环放到标签中,并且需要为这些标签添加点击事件,每个值传入对应的点击事件函数中,由于model中的值是通过${ite ...