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

一般在我们使用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中的值还没尽兴处理,所以还是需要将方法写在请求成功的回调函数中,页面才会进行渲染

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue2中,可以使用echarts来绑定动态数据。首先,需要定义需要传递的数据及类型。可以使用ref来定义数据,例如const testText = ref('')。然后,在echarts的option中,可以通过data属性来传递数值。例如,在柱状图中,可以将动态数据绑定到series的data中,需要使用testText.value来获取ref定义的数据。类似地,其他类型的echarts图表也可以使用这种方式进行动态数据绑定。\[1\] 接下来,可以通过获取接口数据来设置echarts的option。可以使用axios来发送post请求获取数据。例如,在折线图中,可以使用axios.post来获取数据,并将数据赋值给相应的变量。然后,可以使用setOption方法来设置echarts的option,将动态数据绑定到相应的属性中。例如,在折线图的xAxis中,可以将动态数据绑定到data属性中。类似地,可以将动态数据绑定到其他属性中,如yAxis和series的data属性。\[2\] 同样地,在饼图中,也可以通过获取接口数据来设置echarts的option。可以使用axios.post来获取数据,并将数据赋值给相应的变量。然后,可以使用setOption方法来设置echarts的option,将动态数据绑定到相应的属性中。例如,在饼图的legend中,可以将动态数据绑定到data属性中。类似地,可以将动态数据绑定到series的data属性中。\[3\] 需要注意的是,为了保证echarts图表的响应式,可以在窗口大小改变时调用resize方法来重新渲染图表。可以通过监听resize事件来实现这一功能。\[2\]\[3\] #### 引用[.reference_title] - *1* [Vue3+echarts 动态数据传递](https://blog.csdn.net/weixin_46382462/article/details/129611899)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue中使用echarts实现动态数据绑定、获取后端接口数据](https://blog.csdn.net/weixin_44320032/article/details/125393860)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值