首页 前端知识 解决动态绑定echarts的data数据,页面无法进行渲染展示的问题

解决动态绑定echarts的data数据,页面无法进行渲染展示的问题

2024-01-26 10:01:30 前端知识 前端哥 6 896 我要收藏

一般在我们使用echarts去绘制图标的时候,里面的data值一般都是去进行动态绑定的,比如在vue中去发送axios或者ajax请求,在请求成功的回调函数中对echarts的data数据进行动态绑定,但是有时会出现页面无法渲染的情况。以下提供了解决方案

1.在渲染页面时,data中的数据还未进行更新,也就是option的data值还为空,因为data中没有值,所以页面无法去进行渲染。

首先,在methods中定义一个展示echarts图示的方法,在这个方法中,series中的data值是直接绑定的vue实例中的wea_tem,而wea_tem是通过处理接口的回调函数中的数据去赋值的

代码示例:

展示echarts的方法:

vue实例中的数据:

 发送ajax请求的方法:

 定义完showecharts()这个方法后,会有一个问题,就是把这个方法放在哪里,如果我们把调用接口的方法和展示echarts图示的方法都放在mounted或者created中,就会产生问题,如图:

 因为发送ajax请求时异步请求,也就是说,浏览器会在第一个方法还未完全执行完之后,就先去执行下一个方法,而ajax返回数据的时间相对来讲会慢一点,所以当执行展示echarts的方法时,data数据还没进行处理,里面的data还没有数据,所以页面肯定无法进行渲染,也就是不显示ehcarts

解决办法:将展示echarts图示的方法写到请求成功的回调函数中,等数据处理完再去执行方法

按照这样去实现,页面成功渲染

 效果:(折线图)

 

2.拓展

但是在开发时候,遇到了问题,我把展示echarts的方法放到了和回调函数同级的地方,没有放在回调函数的里面

 这时就碰到问题了,在定义data数据的上方打印以下处理完的data,浏览器是可以打印出东西的,而且也是真实的数据,但是页面还是不进行渲染

 在浏览器打印出来data的值为空,但是可以展开,展开后的值就是需要绑定的值,但是这里的值并不是真实返回的值,是在指向浏览器为返回值开辟的堆内存的地址(也就是指针),data中的值还没尽兴处理,所以还是需要将方法写在请求成功的回调函数中,页面才会进行渲染

转载请注明出处或者链接地址:https://www.qianduange.cn//article/461.html
标签
echarts
评论
发布的文章

CSS3新增样式

2024-02-05 11:02:24

jQuery的介绍

2024-02-05 11:02:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!