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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值