1. 程式人生 > >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