echarts模拟从数据库异步加载数据

前言

前面的几篇小例子中，echarts数据都是写死在js中的，但是在实际echarts中，数据都是从数据库中动态获取过来。所以这里来简单演示一下echarts怎么通过ajax异步获取数据库中的数据在页面上进行动态展示。下面只是功能代码展示，具体的js包导入，以及springmvc等等这里不详细介绍！

具体代码演示

页面代码展示

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.setOption({title: {text: '合肥市各区人口数统计',left:'left'},legend:{data:['人口数']},xAxis:{data:[]},yAxis:{},series : [{name:'人口数',type:'bar',data:[]}]});myChart.showLoading({text: '数据正在加载中...'  }); //这里设置定时器模拟数据延时加载setTimeout(function(){$.ajax({  url:"<%=basePath%>echartsAsynController/getDatas",  dataType:"json",  success:function(jsonData){   myChart.setOption({  xAxis: {  data: jsonData.xAxisCategory  },  series: [{  // 根据名字对应到相应的系列  name: '人口数',  data: jsonData.datas  }]  });  // 设置加载等待隐藏  myChart.hideLoading();  }  }); },2000);</script>
</body>

上面页面上，我们先初始化echarts图标配置。然后将需要动态获取的xAxis上的数据和series上的数据先置空。后面在用ajax异步获取数据，然后再添加到echarts配置上去。上面简单利用js的延迟执行来模拟大量数据加载的空白，如果数据加载很慢留下空的图标在页面上，会造成很不好的用户体验。所以这里使用showLoading来显示一个数据加载中。

下面是echarts图标的数据包装类

/**- @ClassName: EchartsBean- @Description: TODO(图标数据包装类)- @author 爱琴孩
*/
public class EchartsBean {//表中的x轴类别private List<String> xAxisCategory;//表中的数据private List<Integer> datas;public EchartsBean(){}public EchartsBean(List<String> xAxisCategory,List<Integer> datas){this.xAxisCategory=xAxisCategory;this.datas=datas;}public List<String> getxAxisCategory() {return xAxisCategory;}public void setxAxisCategory(List<String> xAxisCategory) {this.xAxisCategory = xAxisCategory;}public List<Integer> getDatas() {return datas;}public void setDatas(List<Integer> datas) {this.datas = datas;}
}

下面是具体的逻辑控制层代码

@Controller
@RequestMapping("/echartsAsynController")
public class EchartsAsynController {/** * @Description: TODO(跳转页面) * @return* @author 爱琴孩  * @version V1.0*/@RequestMapping("/showTable")public String showTable(){System.out.println("跳转到对应的页面");return "/core/echarts/asynData";}/*** * @Description: TODO(模拟从数据库获取数据) * @return* @author 爱琴孩  * @version V1.0*/@ResponseBody@RequestMapping("/getDatas")public EchartsBean getDatas(){EchartsBean echartsBean =new EchartsBean();List<String> xAxisCategory =Arrays.asList("高新区","蜀山区","瑶海区","包河区","经开区","政务区","滨湖新区","新站区");List<Integer> datas = Arrays.asList(300,600,230,239,100,800,300,500);echartsBean.setDatas(datas);echartsBean.setxAxisCategory(xAxisCategory);return echartsBean; }
}

具体页面效果如下

最终展示效果如下

总结

上面只是简单模拟echarts从数据库动态获取数据。后面会和大家继续深入echarts的小细节！

echarts模拟从数据库异步加载数据相关推荐

Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感
文章目录一.简介二.增加loading加载动效 2.1 实现原理 2.2 实现步骤 2.3 实现效果图三.完整源代码及解析一.简介 Echarts 图表在异步请求数据时,如果加载时间较长,一个 ...
学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...
ECharts 异步加载数据及loading 动画
异步加载 echarts 示例中的数据是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入.ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要 ...
新手教程：不写JS，在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的加速原理除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
easyUI tree 异步加载数据
easyUI 的 Tree组件在大部分时候都要从数据库读取数据,本文基于Java语言来实现easyUI tree的异步加载. 先看一下实现的效果: 整个过程采用的是简单三层架构,无论采用哪种模式,只要 ...
ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...

echarts模拟从数据库异步加载数据

前言

具体代码演示

总结

echarts模拟从数据库异步加载数据相关推荐

最新文章

热门文章