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);
}
});