ECharts3 实现 AJAX异步加载数据库数据

ECharts3的文档里其实对异步加载说的很明白，但是示例都是生成的随机数据，大多数应用是直接读数据库数据然后动态加载到ECharts图表里的，简单的思路就是把需要显示的数据库数据封装成json格式，然后异步获取json数据，解析显示在图表里。

生成json数据不多说了，js重要部分如下：

    var startTime1=$("#start").html();var endTime1=$("#end").html();url="data/toEcharts.asp?t1="+startTime1+"&t2="+endTime1;//上述部分根据需要灵活设置makecharts(url);//setInterval("makecharts(url)",10000);//定时加载数据可以使用setInterval("makecharts(url1)",10000);var makecharts = function(url){var myChart = echarts.init(document.getElementById('main'));var timeInterval=$("#disp").html();$.get(url).done(function (data) {data=data.replace(/\s+/g,"");if (data.substr(0,1)=="0") {$('#main').html("今日无流通记录！");return;};//var ldata={分配地址: ["新区自科一"], 流通量: [2]}//json数据格式var ldata=$.parseJSON(data);myChart.setOption({toolbox: {show: true,feature: { dataView: {show: true},magicType:{show:true,type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true},}},title: {text: '书库借阅量统计',x: 'left',subtext: timeInterval,},grid:{top: 80,bottom:80,},tooltip: {},legend: {textStyle:{color:'#000',fontFamily:'宋体',},data:['流通量'],},xAxis: {axisLabel:{textStyle:{color:'#000',fontFamily:'宋体'}, },data: ldata.分配地址},yAxis: {axisLabel:{textStyle:{color:'#000',fontFamily:'宋体'}, },},series: [{name: '流通量',type: 'bar',label: {normal: {show: true,position: 'top'}},data: ldata.流通量}]});});};

ECharts3 实现 AJAX异步加载数据库数据相关推荐

使用ztree异步加载数据库数据形成树形菜单
-搞了好久好久,在此记录一下这个这个胜利的时刻!!!!作为一个合格的程序员,任重而道远啊- 项目环境:thinkphp5+mysql+ztree 项目目标:从MySQL数据库获取小区用户位置信息.用户 ...
java jsp 页面下拉框 ajax异步加载数库数据
全面详细的新手下拉框数据显示.web项目中难免用到下拉框异步加载数据的情况.这里分享一个.使用的是jquery的ajax异步加载后台数据.后台使用java语言. 1,先看效果,下拉框如下: 2.获取值 ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
python提取ajax异步加载数据_python爬取豆瓣电影分类排行榜引出的异步加载（AJAX）问题...
1.背景之前的文章中已经介绍过猫眼TOP100的电影信息爬取案例,网页每页有10条电影信息,通过翻页发现URL变化规律构造循环爬取10页100条全部电影信息.但是豆瓣电影分类排行榜的网页情况就所不同 ...
Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）
原理:AJAX动态加载数据库中图片信息给游览器,利用2个叠词div动态修改内部图片透明度做出淡进淡出效果.(IE6无效) 难点:json数组操作. HTML:就是几个图片容器.加载大图的div pos ...
WinForm使用多线程异步加载界面数据
WinForm使用多线程异步加载界面数据处于学习阶段,做个记录,如有写错,请多多指教. private void FrmQC111_Load(object sender, EventArgs e) ...
Android ListView异步加载数据库图片
需求:从数据库中得到图片的byte数据,编码成png图片,显示到ListView上这里最大一个问题就是ListView滑动卡的问题,要解决卡,就需要用到异步加载数据库的图片: 原创博客,转载注明出处 ...
Angular16 Angular整合zTree、异步加载节点数据
1 前提准备 1.1 新建一个angular4项目参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往三少使用的版本:点击前往 1.3 参考博客点击前往01 ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...

ECharts3 实现 AJAX异步加载数据库数据

ECharts3 实现 AJAX异步加载数据库数据相关推荐

最新文章

热门文章

ECharts3 实现 AJAX异步加载 数据库数据

ECharts3 实现 AJAX异步加载 数据库数据相关推荐

最新文章

热门文章

ECharts3 实现 AJAX异步加载数据库数据

ECharts3 实现 AJAX异步加载数据库数据相关推荐