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.5)'
		     				                }
		     				            }
		     				        }
		     				    ]
		     				};
	     		        myChart.setOption(option);
	            },//调用执行后调用函数
	            complete: function(XMLHttpRequest,textStatus){
	               //alert(XMLHttpRequest.responseText);
	               //alert(textStatus);
	            },//调用出错执行的函数
	            error: function(){
	                //请求出错处理
	            }         
	         });
	});
	//加载图表 end
原文链接:https://www.f2er.com/ajax/161319.html

猜你在找的Ajax相关文章