echart图 月周日切换

来源:互联网 发布:淘宝激活店铺 编辑:程序博客网 时间:2024/06/02 06:50

本方法我先写了月和日的数据  先一起从后台查到list对象,然后在js里解析  画echarts

$(function() {
var dateArr = new Array();
var countArr = new Array();
var count = 0;
var createDate = "";
//月份统计
var monthArr = new Array();
var countArr2 = new Array();
var count2 = 0;
var month = "";
$.ajax({
url : 'tocountlist.do',
type : 'POST',
dataType : 'json',
success : function(result) {
if (result.code == 0) {


var dd = eval(result);
var list = result.countList;
for ( var i in list) {
count = list[i].count;
createDate = dateFormat(
new Date(list[i].date.time), "yyyy-MM-dd");
dateArr.push(createDate);
countArr.push(count);
}
var monthList = result.monthList;
for ( var i in monthList) {
count2 = monthList[i].count;
month = dateFormat(
new Date(monthList[i].date.time), "MM");
monthArr.push(month);
countArr2.push(count2);
}
var myChart = echarts.init(document
.getElementById('barPicture'));
var option = {
title : {
text : '日统计',
left : "center",
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '用户人流量' ],
top : 40
},
toolbox : {
show : true,
feature : {
myTool1 : {
show : true,
title : '自定义扩展方法1',
icon : 'image://http://echarts.baidu.com/images/favicon.png',
onclick : function() {
alert('myToolHandler1')
}
},
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},


calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : true,
name : "时间(年-月-日)",
data : dateArr
} ],
yAxis : [ {
type : 'value',
scale : true,
name : '人流量',
//boundaryGap: [0.2, 0.2]
} ],
series : [ {
name : '用户注册量',
type : 'line',
data : countArr,
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myChart.setOption(option, true);

} else {
alert("获取数据失败!");
return;
}
},
error : function() {
alert("提交失败!");
}
});
});

先穿上js代码 

原创粉丝点击