java map初始化 039_vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js...

本文介绍如何在Vue项目中使用ECharts加载并正确显示中国地图数据。通过解决使用GET请求加载地图JSON文件遇到的问题,包括错误地使用响应对象而非具体数据导致的地图无法正常渲染。最终提供了一个可行的解决方案。
摘要由CSDN通过智能技术生成

在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来绘制地图,结果报错

0d3bf5cc3c05a22676cba48301f293df.png

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

报错行打断点:regions: undefined

127db85226471ff88e6f847a525a39f8.png

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

f4c5016452b022a835c296424e818be2.png

这么多没用的数据,我们绘制地图只需要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

});

});

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

标签:map,vue,console,log,get,res,报错,绘制地图,echarts

来源: https://www.cnblogs.com/lyt0207/p/12058711.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值