之前发表了一篇博客,使用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]}
生成图表如下:
相关推荐
总的来说,ECharts的动态加载`series`中的`data`功能强大且灵活,能够帮助开发者构建出具有动态数据展示的高效图表。通过编写适当的JavaScript函数生成数据,并结合`setOption`方法,你可以轻松实现数据的动态加载和...
// 更新图表数据 myChart.hideLoading(); // 隐藏加载动画 myChart.setOption({ xAxis: { data: names }, series: [{ data: nums }] }); }, error: function (xhr, status, error) { console.error(...
Echarts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,如柱状图、折线图、饼图等,用于在网页上展示数据。在C#环境中,我们可以利用Echarts与后端服务器进行交互,动态地从数据库或其他数据源获取...
在本实例中,我们主要探讨如何使用ECharts这个流行的JavaScript数据可视化库来动态加载多组曲线数据,并在时间轴上进行展示。ECharts是一个由百度开发的开源图表库,支持丰富的图表类型,如柱状图、折线图、饼图等,...
在Java开发中,我们经常需要将后端数据与ECharts图表进行对接,实现动态加载数据的功能。本篇文章将深入探讨如何使用Java实现ECharts动态加载数据的示例。 ### 一、ECharts动态加载机制 ECharts的动态加载数据主要...
// 更新图表数据 myChart.setOption({ xAxis: { data: this.xData }, series: [ { name: '销量', type: 'bar', data: this.seriesData } ] }); }); } } ``` 如果筛选条件改变,只需在筛选方法中更新...
在本文中,我们将深入探讨如何使用 ECharts 从后台数据库获取数据,并加载多组曲线,以便在 Web 应用程序中展示动态、交互的数据。 首先,要实现这个功能,我们需要以下几部分: 1. **数据接口**:你需要创建一个...
在动态获取数据的场景下,ECharts 可以与后端数据库进行交互,获取实时或按需的数据,然后根据这些数据更新图表内容。以下是关于如何实现这个过程的详细说明: 1. **数据库查询**: 在服务器端,你可以使用各种...
ECharts加载地图需要依赖于特定的地图JSON文件,这些文件包含了地理信息和坐标系统。地图文件通常分为两类:世界地图和中国区域地图。在ECharts中,你可以通过`map`属性指定地图类型,例如`'world'`或`'china'`。 ...
微信小程序动态获取echrts数据以进行动态加载的目的,内包含所有的官方示例,但是仅改造了pie,其余的类型的图表的加载方式是一样的,可以自行进行修改,路径实在pages文件夹下面的pie文件夹下面,别找错了呦!
ECharts 是一个由百度开发的开源 JavaScript 图表库,它提供了丰富的可视化图表类型,如柱状图、折线图、饼图、散点图等,适用于网页数据可视化的各种需求。在 Android 开发中,我们可以借助 ECharts 的 Webview ...
ECharts能够加载各种类型的地图数据,如中国地图、世界地图等,这些地图数据可以以JSON格式异步加载。异步加载数据意味着不需要刷新整个页面,就能更新数据,提高用户体验。 在本教程中,我们使用PHP作为服务器端...
通过监听某个事件(如用户输入、时间变化等),发起数据的异步请求,然后根据返回的数据动态构建折线图。文章通过一个气象数据的实例来说明如何实现动态加载多条折线图。 具体到代码实现,我们首先定义一个用于发起...
在本文中,我们将深入探讨如何在用户选择下拉框选项时动态加载ECharts图表的数据。ECharts是一款由百度开发的开源JavaScript数据可视化库,它提供了丰富的图表类型,强大的交互功能,以及灵活的数据接入方式,使得在...
【ASP.Net实现SQL动态绑定Echarts图表Demo完整源码】是一个示例项目,它演示了如何在ASP.Net环境中结合Echarts图表库、C#、SQL和JSON技术来动态展示数据库中的数据。该项目的核心目标是利用后端服务器处理程序获取...
在大数据或者实时数据更新的场景下,动态加载数据是ECharts的一个重要特性,能够帮助用户在不刷新整个页面的情况下,更新图表中的数据,提升用户体验。 动态加载数据的核心在于如何有效地利用ECharts的`setOption`...
在ASP.NET框架下,我们可以通过C#或VB.NET代码在后台动态生成ECharts所需的数据,然后通过Ajax或者Web API等方式传递到前端,展示在ECharts图表上。 1. **ASP.NET基础** ASP.NET是微软推出的用于构建Web应用程序的...
ECharts则是百度开发的一个开源的JavaScript数据可视化库,它提供了丰富的图表类型,如折线图、柱状图、饼图和仪表盘,支持动态数据加载,非常适合用于数据分析和展示。 标题和描述中提到的"JQ JS javascript ...
异步加载数据可以提高页面加载速度,特别是处理大量数据时,也可以实现动态更新图表,让图表实时反映后台数据的变化。 总结来说,ECharts的基础折线图是通过定义配置项和数据来创建的,而异步加载数据则可以通过...
Vue 在使用 ECharts 时的异步更新和数据加载详解 Vue.js 是一款流行的前端框架,而 ECharts 则是一款功能强大的数据可视化库。当我们将 ECharts集成到 Vue 项目中时,需要处理的异步更新和数据加载问题。本文将详细...