`
单一色调
  • 浏览: 86087 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Echarts动态加载图表数据

阅读更多

之前发表了一篇博客,使用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]}

 

生成图表如下:


 

 

 

 

 

 

  • 大小: 34.1 KB
分享到:
评论
3 楼 单一色调 2014-10-21  
weihaixia 写道
博主,请问
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); 

这个写在什么地方,是在<script></script>里吗?我这报错,并且也不明白怎么body页面怎么调用,看到请回邮件vich_wei@sina.com,谢谢



不好意思,之前有事一直没看论坛。
已经发了,不知道对你还有没有用。。
2 楼 weihaixia 2014-10-14  
博主,请问
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); 

这个写在什么地方,是在<script></script>里吗?我这报错,并且也不明白怎么body页面怎么调用,看到请回邮件vich_wei@sina.com,谢谢
1 楼 Yeqisu 2014-09-17  
博主有没有具体的demo例子,求发一份,yeqisu@163.com

相关推荐

    echarts动态加载series中的data

    总的来说,ECharts的动态加载`series`中的`data`功能强大且灵活,能够帮助开发者构建出具有动态数据展示的高效图表。通过编写适当的JavaScript函数生成数据,并结合`setOption`方法,你可以轻松实现数据的动态加载和...

    Echarts通过Ajax实现动态数据加载

    // 更新图表数据 myChart.hideLoading(); // 隐藏加载动画 myChart.setOption({ xAxis: { data: names }, series: [{ data: nums }] }); }, error: function (xhr, status, error) { console.error(...

    Echarts动态获取数据(C#)

    Echarts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,如柱状图、折线图、饼图等,用于在网页上展示数据。在C#环境中,我们可以利用Echarts与后端服务器进行交互,动态地从数据库或其他数据源获取...

    echarts动态加载多组曲线实例.zip

    在本实例中,我们主要探讨如何使用ECharts这个流行的JavaScript数据可视化库来动态加载多组曲线数据,并在时间轴上进行展示。ECharts是一个由百度开发的开源图表库,支持丰富的图表类型,如柱状图、折线图、饼图等,...

    echarts动态加载 java demo

    在Java开发中,我们经常需要将后端数据与ECharts图表进行对接,实现动态加载数据的功能。本篇文章将深入探讨如何使用Java实现ECharts动态加载数据的示例。 ### 一、ECharts动态加载机制 ECharts的动态加载数据主要...

    vue+echarts实现动态绘制图表及异步加载数据的方法

    // 更新图表数据 myChart.setOption({ xAxis: { data: this.xData }, series: [ { name: '销量', type: 'bar', data: this.seriesData } ] }); }); } } ``` 如果筛选条件改变,只需在筛选方法中更新...

    echarts从后台数据库获取数据并加载多组曲线

    在本文中,我们将深入探讨如何使用 ECharts 从后台数据库获取数据,并加载多组曲线,以便在 Web 应用程序中展示动态、交互的数据。 首先,要实现这个功能,我们需要以下几部分: 1. **数据接口**:你需要创建一个...

    echarts 动态获取数据

    在动态获取数据的场景下,ECharts 可以与后端数据库进行交互,获取实时或按需的数据,然后根据这些数据更新图表内容。以下是关于如何实现这个过程的详细说明: 1. **数据库查询**: 在服务器端,你可以使用各种...

    echarts地图加载demo

    ECharts加载地图需要依赖于特定的地图JSON文件,这些文件包含了地理信息和坐标系统。地图文件通常分为两类:世界地图和中国区域地图。在ECharts中,你可以通过`map`属性指定地图类型,例如`'world'`或`'china'`。 ...

    微信小程序动态获取echrts数据以进行动态加载的目的

    微信小程序动态获取echrts数据以进行动态加载的目的,内包含所有的官方示例,但是仅改造了pie,其余的类型的图表的加载方式是一样的,可以自行进行修改,路径实在pages文件夹下面的pie文件夹下面,别找错了呦!

    使用echarts绘制android图表

    ECharts 是一个由百度开发的开源 JavaScript 图表库,它提供了丰富的可视化图表类型,如柱状图、折线图、饼图、散点图等,适用于网页数据可视化的各种需求。在 Android 开发中,我们可以借助 ECharts 的 Webview ...

    如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts能够加载各种类型的地图数据,如中国地图、世界地图等,这些地图数据可以以JSON格式异步加载。异步加载数据意味着不需要刷新整个页面,就能更新数据,提高用户体验。 在本教程中,我们使用PHP作为服务器端...

    Echarts动态加载多条折线图的实现代码

    通过监听某个事件(如用户输入、时间变化等),发起数据的异步请求,然后根据返回的数据动态构建折线图。文章通过一个气象数据的实例来说明如何实现动态加载多条折线图。 具体到代码实现,我们首先定义一个用于发起...

    下拉框选择事件动态加载echart数据

    在本文中,我们将深入探讨如何在用户选择下拉框选项时动态加载ECharts图表的数据。ECharts是一款由百度开发的开源JavaScript数据可视化库,它提供了丰富的图表类型,强大的交互功能,以及灵活的数据接入方式,使得在...

    ASP.Net实现SQL动态绑定Echarts图表Demo完整源码

    【ASP.Net实现SQL动态绑定Echarts图表Demo完整源码】是一个示例项目,它演示了如何在ASP.Net环境中结合Echarts图表库、C#、SQL和JSON技术来动态展示数据库中的数据。该项目的核心目标是利用后端服务器处理程序获取...

    Echart动态加载数据

    在大数据或者实时数据更新的场景下,动态加载数据是ECharts的一个重要特性,能够帮助用户在不刷新整个页面的情况下,更新图表中的数据,提升用户体验。 动态加载数据的核心在于如何有效地利用ECharts的`setOption`...

    asp.net_echarts后台动态获取数据.rar

    在ASP.NET框架下,我们可以通过C#或VB.NET代码在后台动态生成ECharts所需的数据,然后通过Ajax或者Web API等方式传递到前端,展示在ECharts图表上。 1. **ASP.NET基础** ASP.NET是微软推出的用于构建Web应用程序的...

    JQ JS javascript echarts 多图表 多曲线 多柱状图 多饼图 多仪表盘 加载 多图表加载

    ECharts则是百度开发的一个开源的JavaScript数据可视化库,它提供了丰富的图表类型,如折线图、柱状图、饼图和仪表盘,支持动态数据加载,非常适合用于数据分析和展示。 标题和描述中提到的"JQ JS javascript ...

    Echarts:基础折线图(含异步加载数据)

    异步加载数据可以提高页面加载速度,特别是处理大量数据时,也可以实现动态更新图表,让图表实时反映后台数据的变化。 总结来说,ECharts的基础折线图是通过定义配置项和数据来创建的,而异步加载数据则可以通过...

    vue在使用ECharts时的异步更新和数据加载详解

    Vue 在使用 ECharts 时的异步更新和数据加载详解 Vue.js 是一款流行的前端框架,而 ECharts 则是一款功能强大的数据可视化库。当我们将 ECharts集成到 Vue 项目中时,需要处理的异步更新和数据加载问题。本文将详细...

Global site tag (gtag.js) - Google Analytics