echarts这柱混搭图表，异步动态加载数据

 

HTML代码

var myChart=echarts.init(document.getElementById('main0'));
			   var  option={
			        tooltip:{
			            trigger: 'axis',
			             formatter: function(value) {//鼠标滑过时显示内容的格式化
			                var template = "";
			                template += value[0].axisValue+"<br/>";
			                template += '新增用户：';
			                template +=  value[0].data+ "<br/>";
			                if(value.length==2){
			                	template += '次日留存：';
				                template +=  + value[1].data+"%";
			                }
			                return template;
			            }
			        },
			        legend:{
			        	data:['新增用户','次日留存'],
			        },
			        xAxis: [{
			            type:'category',
			            data: [],//x轴坐标
			            axisPointer:{   //鼠标滑过，直线显示
			                type:'line'
			            },
			        }],
			        yAxis: [{
			            type:'value',
			            name:'新增用户',
			            /*axisLabel: {
			                formatter: '{value} ml'
			            }*/
			            
			        },{
			            type:'value',
			            name:'次日留存',
			            axisLabel: {
			                formatter: '{value} %'
			            }
			        }],
			        series: [{
			            name:'新增用户',
			            type:'bar',
			            barWidth : 8,
			            itemStyle:{
			            	normal:{
			            		color:'#3399ff',
			            	},
			            },
			            data:[],
			        },{
			            name:'次日留存',
			            type:'line',
			            yAxisIndex: 1,
			            lineStyle:{
			            	normal:{
			            		color:'#4B0082',
			            	},
			            },
			            data:[],
			        },
			        ]
			    };
			    myChart.setOption(option);

到这里模板就搭好了，下面是axjx请求绘制图表

$.ajax({
						       type : "post",
						       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
						       url : '<%=path %>/app/userDayReport/allPlatform',    //请求发送到TestServlet处
						       data : {starttime:starttime,endtime:endtime,selectId:selectId},
						       dataType : "json",        //返回数据形式为json
						       success : function(result) {
						           //请求成功时执行该函数内容，result即为服务器返回的json对象
						            //console.log(result);
						    	  data= result;
						                for(var i=0;i<result.length;i++){
						                   xxx.push(getMyDate(result[i].reportTime));    
						               }
						               for(var i=0;i<result.length;i++){
						            	   yyyz.push(result[i].newUserNum);    
						               }
						               for(var i=0;i<result.length;i++){
						            	   yyyy.push(Math.round((result[i].dayRetention/result[i].pv)*100));    
						               }
						               myChart.setOption({        //加载数据图表
						                   xAxis: {
						                       data: xxx,
						                   },
						                   yAxis: {
								                axisLabel:{
								                    formatter: function (value) {
														var texts = [];
														texts.push(value/1000 +"K");
														return texts;
														                    }
														                }
								                },
						                   series: [{
						                	   name:'新增用户',
						                	   type:'bar',
						                       data: yyyz,
						                   },{
						                	   name:'次日留存',
						                	   type:'line',
						                	   data:yyyy,
						                   }]
						               }); 
						               goPage(1);
						       }

						   });