之前发表了一篇博客,使用Echart加载静态数据图表。
http://jianzh5.iteye.com/blog/2094543
如何使用动态数据呢?
只需在前篇博文第三步过程中自定义一个函数:
function(ec) { //数据时间查询参数 var time = $('#MonthCombo').val(); //数据生成路径 var url = '${pageContext.request.contextPath}/back/statistics/getUserCharts.do'; //图表容器div var elem = "userCharts"; //自定义加载图表函数 echartsConfig.js EconfigAPI(url,time,elem); }
自定义函数 EconfigAPI
/** * 构建动态图表 * @param url 获取后台数据地址 * @param time 图表查询时间 * @param elem 加载容器 */ function EconfigAPI(url,time,elem){ $.ajaxSettings.async = false; //同步才能获取数据 $.post(url,{time:time},function(response) { totalListc = response.totalListc; totalListd = response.totalListd; newList = response.newList; timeList = response.timeList; }, "json"); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function(ec) { //--- 折柱 --- var myChart = ec.init(document.getElementById(elem)); myChart.setOption({ grid:{ x:40, y:35, x2:20, y2:40 }, tooltip : { trigger: 'axis' }, legend: { data:['流水访问量','流水访问量(去重)','新用户'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar','stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data:timeList } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'流水访问量', type:'bar', data:totalListc }, { name:'流水访问量(去重)', type:'bar', data:totalListd }, { name:'新用户', type:'line', data:newList } ] }); }); }
只要后台能生成相应数据并成功返回即可正常生成图表:
当前项目返回的数据格式如下(仅供参考:)
{"newList":[10,15,25,40,1,2,3],"timeList":["2014-07-01","2014-07-02","2014-07-03","2014-07-04","2014-07-15","2014-07-17","2014-07-21"],"totalListc":[25,40,100,110,5,5,203],"totalListd":[10,20,80,100,1,2,3]}
生成图表如下:
相关推荐
vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
微信小程序动态获取echrts数据以进行动态加载的目的,内包含所有的官方示例,但是仅改造了pie,其余的类型的图表的加载方式是一样的,可以自行进行修改,路径实在pages文件夹下面的pie文件夹下面,别找错了呦!
用Servlet实现的echarts展示两种不同形式图表的小demo,使用的开发工具是eclipse,数据库是mysql。文件中包含项目源码,对应的数据库,以及项目运行后实现的图表截图(含url)。项目本人亲测,可完美展示图表,若有...
通过下拉框异步刷新echart数据,原文地址http://blog.csdn.net/kebi007/article/details/52887570
提供了完整的echarts图表通过ajax的方式获取数据。做此记录,以供参考学习。里面有两种方式,大同小异。
本例中右侧的图表是基于Echarts将分布在全国各地的系统用户数量统计出来,以地图的形式展示出每个地域的用户数量,用户点击全国地图中的各个省区域时,能够打开各省地图,在各省地图上的地市区域上以不同的颜色着色...
echarts的基本应用到 动态数据的使用 从页面 2秒钟发送一个请求到servlet 然后从servlet返回一个json数据 然后在页面展示 包含折线 饼图 柱形
一个html小工具,随便一个浏览器就... 功能: 可以选择一个固定数据格式的excel文件,根据excel文件的数据,以平铺或堆叠的形式,生成对应的线图或柱状图或饼图。可保存图片到本地。 用到: xlsx.js、echarts.js
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 require.config({ paths: { echarts: 'echarts-2.2.7/doc/example/www/js' } }); 这个插件最主要就是用这些东西了 ...
本文通过实例代码给大家介绍了微信小程序中使用ECharts 异步加载数据实现图表功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
1.asp查询本地access数据库,获取应发工资、实发工资、扣除工资,ajax异步返回json格式数据 2.将返回json输入到echarts圆饼状显示,实现动态加载数据。
台湾echarts地图资源
调研安卓(Android)平台上,JavaScript开源库iCharts和eCharts表现和性能测试的代码,使用WebView加载
最近在使用echarts做报表需求,二次生成报表时...option:图表的配置项和数据 notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。(这里是导致二次渲染不成功的根本) lazyUpdate:可选,在设置完
这里仅是前端展示用,也可配合异步加载数据后重绘图表。 页面显示时钟、城市定位和天气。 除了常规图表,还引入geoJson和百度地图的两种平面地图模式、3D地球模式以及若干有意思的算命娱乐小图表。其中地图上有唐僧...
基于JQuery Echarts 大数据分析 代码集合,方便学习;结合jQuery熟练使用
ECharts官网(https://echarts.baidu.com)描述:ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前...ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
这里仅是前端展示用,也可配合异步加载数据后重绘图表。 5. 页面显示时钟、城市定位和天气。 6. 除了常规图表,还引入geoJson和百度地图的两种平面地图模式、3D地球模式以及若干有意思的算命娱乐小图表。其中地图上...
.NET C# + ECharts 初学笔记 后台加载统计图表数据 - 简单示例 文件单独拆分弄出来的 需要自行部署到VS里