Ajax mysql echarts_Echarts图表如何实现ajax实现动态数据加载

本文通过一个实例展示了如何使用Echarts结合Ajax从后台获取动态数据并展示在图表上,详细介绍了设置图表、处理数据及更新选项的过程,适合需要实现实时数据更新的图表应用场景。
摘要由CSDN通过智能技术生成

现在已经深夜12点了,拖着疲惫身体还是写完这篇简书吧,今天用了Echarts实现动态加载数据,干货还是要分享给大家的

自己确实有点low了,破东西搞了一个小时,之前也一直在用这个,但是都是给的死数据,这次哥们后台需要图标统计,数据都是实时更新的,叫小搞了一下

首先把echarts的插件引入,根据官方文档都有现成的demo,话不多说,直接进入主题

刚开始天真的以为,只要把数据从ajax中获取出来,组成数组就可以放进去了,就比如下面这么傻的写

6454503fbb79

事实证明,我想的太简单了,并没有什么卵用

真正的正确写法是在ajax获取正确的数据后,在success的方法里,直接setOption,把需要加入全局数据加入进去,当然,在获取数据前,把需要加入活的数据的属性赋值为空,下面是完整代码,粘贴上去睡觉觉了,晚安!

var myChart = echarts.init(document.getElementById('main'));

// 显示标题,图例和空的坐标轴

myChart.setOption({

title: {

text: '施工队工时统计'

},

tooltip: {

trigger: 'axis'

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值