echarts ajax 动态获取数据

末蓝、 2022-09-30 00:59 183阅读 0赞

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