vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js
在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的更多相关文章
- Vue 项目中的ESlint语法报错问题
在项目中的""和;经常会报错,真的很纠结,今天看到一个解决方法,可以不用卸载删除 在项目根目录中,新建一个.prettierrc文件,来移除分号,和替换为单引号. { " ...
- vue.config.js报错cannot set property "preserveWhitespace" of undefined
vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ...
- 小程序 for循环 报错 Cannot read property 'total' of undefined
for循环一直报错 Cannot read property 'total' of undefined,但total在起初是有定义的,后来找到了问题,是i<=的问题,改为<不报错了. i ...
- 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 ...
- Vue 项目: npm run dev 报错 webpack-dev-server
从码云上下载vue项目,运行npm run dev 时报错: > webpack-dev-server --inline --progress --config build/webpack.de ...
- 使用vue-preview报错Cannot read property 'open' of undefined
最近在做一个vue项目中时,需要使用vue-preview插件制作缩略图,首先在终端使用npm i vue-preview -S指令安装了vue-preview插件,然后在main.js中,导入并引用 ...
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...
- 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时,报错. 如上,单 ...
- 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想试试,我 ...
随机推荐
- CentOS7 yum报 Cannot retrieve metalink for repository: epel/x86_64. Please verify its path解决方法
打开/etc/yum.repos.d/epel.repo,将 [epel] name=Extra Packages for Enterprise Linux 6 – $basearch baseurl ...
- 2019暑假第三周(HDFS和HBase)
Hadoop的核心是HDFS和MapReduce. 1.分布式文件系统HDFS理论方面的认知学习. 2.HDFS编程实践. 3.分布式数据库HBase.
- Vue模版编译
一 模版文件 <div> <header> <h1>I'm a template!</h1> </header> <p v-if=&q ...
- Android - Unable to add window android.view.ViewRootImpl$W@6518342 -- permission denied for window type 2133
因为跟博主碰到了一样的问题,所以记录一下分析原理 原文链接:https://www.jianshu.com/p/b0364074288a 首先,先介绍下背景环境,第一,是Android7.0,其次,要 ...
- mysql常用知识点之limit
limit函数的应用.limit后面跟整数,如limit 5,表示在结果集中取前5条:limit后跟整数区间,如limit 2,5,表示在结果集中 从第3条开始,取5条数据,第一个整数表示结果集的顺序 ...
- docker--docker仓库
8 docker仓库 Docker仓库(Repository)类似与代码仓库,是Docker集中存放镜像文件的地方. 8.1 docker hub 1.打开https://hub.docker.com ...
- SQL Server中的扩展事件学习系列
SQL Server 扩展事件(Extented Events)从入门到进阶(1)——从SQL Trace到Extented Events SQL Server 扩展事件(Extented Event ...
- PhoneGap学习网址
官网:http://app-framework-software.intel.com/ 下载地址:http://download.csdn.net/download/haozq2012/7635951
- Linux yum 命令篇
yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动下载RPM包 ...
- Boostrap4 li列表橫向
Boostrap3 li元素橫向: <ul class="nav navbar-nav list-inline"> <li class="list-in ...