在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. 系统分析与设计HW4

    个人作业 用例建模 a. 阅读 Asg_RH 文档,绘制用例图. b. 选择你熟悉的定旅馆在线服务系统(或移动 APP),如绘制用例图.并满足以下要求: 对比 Asg_RH 用例图,请用色彩标注出创新 ...

  2. Delphi下利用WinIo模拟鼠标键盘详解 有参考价值

    https://blog.csdn.net/fgrass_163/article/details/6365296 Delphi下利用WinIo模拟鼠标键盘详解 2011年04月26日 21:03:00 ...

  3. 以非root身份安装Python的Module或者Package以及pip安装指定路径

    因为要远程访问公司的服务器,没有sudo的权限,所以在安装python的一些包的时候就不能安去默认路径了(比如以/usr/local/lib/为prefix的路径). 一般来讲用easy_instal ...

  4. Cocos2d-X网络编程(3) Cocos2d中的网络通信协议——WebSocket协议

    WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信.实现浏览器与服务器的即时通讯.即服务器也能主动向客户端发消息. WebSocket代理类和方法: co ...

  5. C++——堆、栈与内存管理

    简介 Stack,是存在于某作用域(scope) 的一块内存空间(memory space).例如当你调用函数,函数本身即会形成一个stack 用來放置它所接收的参数,以及返回地址.在函数本体(fun ...

  6. 怎样用adb抓取log?

    在Android客户端的测试过程中,有时候我们会遇到闪退等异常情况.这时我们可以通过adb抓取log,从而给开发提供更多信息. 一.下载ADB.exe     在网上搜索“adb工具包”就可以找到很多 ...

  7. CSRF Failed: CSRF token missing or incorrect

    Django设置本身没有关闭CSRF Django设置已经关闭CSRF,可能是由于两个项目都使用同一个端口,调试的时候就会出现Cookie里面csrftoken重用的问题,清理Cookie就好

  8. Python 里面如何生成随机数?

    在 Python 中用于生成随机数的模块是 random,在使用前需要 import. 如下例子可以酌情列举: random.random():生成一个 0-1 之间的随机浮点数: random.un ...

  9. Restful风格API中用put还是post做新增操作有什么区别?

    Restful风格API中用put还是post做新增操作有什么区别? 转 头条面试归来,有些话想和Java开发者说!>>> 这个是华为面试官问我的问题,回来我找了很多资料,想验证这个 ...

  10. onehot编码解释

    什么是One-Hot编码? One-Hot编码,又称为一位有效编码,主要是采用N位状态寄存器来对N个状态进行编码,每个状态都由他独立的寄存器位,并且在任意时候只有一位有效. One-Hot编码是分类变 ...