echarts ajax 动态获取数据

发布时间:2017-3-31 23:09:38编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"echarts ajax 动态获取数据",主要涉及到echarts ajax 动态获取数据方面的内容,对于echarts ajax 动态获取数据感兴趣的同学可以参考一下。

keys  和  values 都是动态数据   注意如果数据是{value:335, name:'直接访问'}这种格式 需要使用eval('(' + strtojson + ')')  转一下
//加载图表 start
	$(function(){
		   $.ajax({
	            //提交数据的类型 POST GET
	            type:"POST",
	            //提交的网址
	            //url:"http://localhost:8080/lightmanger/filemanager/fileDownload/fileDownloadPie",
	            url:"<%=request.getContextPath()%>/filemanager/fileDownload/fileDownloadPie",
	            //提交的数据
	            data:{},
	            //返回数据的格式
	            datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
	            //在请求之前调用的函数
	            beforeSend:function(){$("#msg").html("lodding");},
	            //成功返回之后调用的函数             
	            success:function(result){
	            	result = $.parseJSON(result);
	                var keys=[];    //类别数组(实际用来盛放X轴坐标值)
	                var values=[];    //销量数组(实际用来盛放Y坐标值
	                var keysArray= new Array(); 
	                keysArray=result.key.split("#"); //字符分割 
	                for (var i=0;i<keysArray.length ;i++ ) {
	            	  keys.push(keysArray[i]); 
	                }
	  			    var valuesArray= new Array(); 
	  				valuesArray=result.value.split("#"); //字符分割 
	  				for (var i=0;i<valuesArray.length ;i++ ) {
	  				 values.push(eval('(' + valuesArray[i] + ')')); 
	              	}
	                var myChart = echarts.init(document.getElementById('mainPie'));
	     		    option = {
		     		    title : {
		     		        text: '自升级用户访下载量',
		     		        subtext: 'apk下载量',
		     		        x:'center'
		     		    },
		     		    tooltip : {
		     		        trigger: 'item',
		     		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		     		    },
		     		    legend: {
		     		        orient: 'vertical',
		     		        left: 'left',
		     		        //data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
		     		        data:keys
		     		    },
		     		    series : [
		     		        {
		     		            name: '下载次数',
		     		            type: 'pie',
		     		            radius : '55%',
		     		            center: ['50%', '60%'],
		     		           data:values,
		     		                 /*  [ 
		     		                   {value:335, name:'直接访问'},
                 					 {value:310, name:'邮件营销'},
                					  {value:234, name:'联盟广告'},
                  				         {value:135, name:'视频广告'},
                  					{value:1548, name:'搜索引擎'}		     		                  ], */
		     		           itemStyle: {
		     		                emphasis: {
		     		                    shadowBlur: 10,
		     		                    shadowOffsetX: 0,
		     		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		     				                }
		     				            }
		     				        }
		     				    ]
		     				};
	     		        myChart.setOption(option);
	            }   ,
	            //调用执行后调用的函数
	            complete: function(XMLHttpRequest, textStatus){
	               //alert(XMLHttpRequest.responseText);
	               //alert(textStatus);
	            },
	            //调用出错执行的函数
	            error: function(){
	                //请求出错处理
	            }         
	         });
	});
	//加载图表 end



上一篇:LaTeX新人教程,30分钟从完全陌生到基本入门
下一篇:golang chan 使用例子

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款