版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tan9374/article/details/78093908
1.先看看我们要的一个效果：在点击显示30天和显示2天，数据可以切换，并且另外还要加一个时间区域查询出来；接下来我贴一下具体的操作：
2.以上边的为例，根据回来的数据结构进行解析：
//拿2天的数据
var data2yespv=[];
var data2todpv=[];
var data2yesuv=[];
var data2toduv=[];$.ajax({
type: "GET",
url: "json/getTwoDayWebView.json",
dataType:'json',
data: "",
success: function(data){
for (key in data.yesterDay.uv){data2yesuv.push(data.yesterDay.uv[key])};
for (key in data.yesterDay.pv){data2yespv.push(data.yesterDay.pv[key])};
for (key in data.toDay.uv){data2toduv.push(data.toDay.uv[key])};
for (key in data.toDay.pv){data2todpv.push(data.toDay.pv[key])};
clickData2();
}
});echartsWarppv.setOption(option,true);function clickData2(){
// 基于准备好的dom，初始化echarts实例
var echartsWarppv = echarts.init(document.getElementById('echartsWarppv'));
option = {
title: {
text: '最近2天pv图',
textStyle:{
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: fontsize12,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['昨日pv','今日pv']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','21:00','22:00','23:00']
},
yAxis: {
type: 'value'
},
series: [
{
name:'昨日pv',
type:'line',
smooth:true,
stack: '总量',
data:data2yespv
},
{
name:'今日pv',
type:'line',
smooth:true,
stack: '总量',
data:data2todpv
}
]
};
echartsWarppv.setOption(option,true);
//-----------------------------------------------------------------
var echartsWarpuv = echarts.init(document.getElementById('echartsWarpuv'));
option = {
title: {
text: '最近2天uv图',
textStyle:{
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: fontsize12,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['昨日uv','今日uv']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','21:00','22:00','23:00']
},
yAxis: {
type: 'value'
},
series: [
{
name:'昨日uv',
type:'line',
smooth:true,
stack: '总量',
data:data2yesuv
},
{
name:'今日uv',
type:'line',
smooth:true,
stack: '总量',
data:data2toduv
}
]
};
echartsWarpuv.setOption(option,true);
}其实你会发现，除了option变化之外，其他的没有发生变化，这里其实可以封装一下的。。。
function clickData30(){
// 基于准备好的dom，初始化echarts实例
var echartsWarppv = echarts.init(document.getElementById('echartsWarppv'));
var option = {
title: {
text: '最近30天pv图',
textStyle:{
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: fontsize12,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['pv']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data30key
},
yAxis: {
type: 'value'
},
series: [
{
name:'pv',
type:'line',
smooth:true,
stack: '总量',
data:data30valuepv
}
]
};
echartsWarppv.setOption(option, true);
//-----------------------------------------------------------------
var echartsWarpuv = echarts.init(document.getElementById('echartsWarpuv'));
option = {
title: {
text: '最近30天uv图',
textStyle:{
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: fontsize12,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['uv']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data30key
},
yAxis: {
type: 'value'
},
series: [
{
name:'uv',
type:'line',
smooth:true,
stack: '总量',
data:data30valueuv
}
]
};
// 使用刚指定的配置项和数据显示图表。
echartsWarpuv.setOption(option,true);
}
需要进行的代码操作：
function timeArea(){
var timestart=$('#datepicker').val().replace(/-/g, "");//转换时间格式
var timeend=$('#datepicker2').val().replace(/-/g, "");
if(timestart&&timeend){
var dataAreapv=[];
var dataAreauv=[];
var dataAreakey=[];
var start,end;
for(var i=0;i<data30key.length;i++){
data30key[i]==timestart?start=i:"";
data30key[i]==timeend?end=i:"";
}
dataAreakey=data30key.slice(start,end+1);
dataAreapv=data30valuepv.slice(start,end+1);
dataAreauv=data30valueuv.slice(start,end+1);
// 基于准备好的dom，初始化echarts实例
var echartsWarppv = echarts.init(document.getElementById('echartsWarppv'));
var option = {
title: {
text: timestart+'到'+timeend+'pv图',
textStyle:{
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: fontsize12,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['pv']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataAreakey
},
yAxis: {
type: 'value'
},
series: [
{
name:'pv',
type:'line',
smooth:true,
stack: '总量',
data:dataAreapv
}
]
};
echartsWarppv.setOption(option, true);
//-----------------------------------------------------------------
var echartsWarpuv = echarts.init(document.getElementById('echartsWarpuv'));
option = {
title: {
text: timestart+'到'+timeend+'uv图',
textStyle:{
color: 'blue',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: '微软雅黑',
fontSize: fontsize12,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['uv']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataAreakey
},
yAxis: {
type: 'value'
},
series: [
{
name:'uv',
type:'line',
smooth:true,
stack: '总量',
data:dataAreauv
}
]
};
// 使用刚指定的配置项和数据显示图表。
echartsWarpuv.setOption(option,true);
}
}//时间插件
$('#datepicker').datepicker({
maxDate: "+0D",
dateFormat:"yy-mm-dd"
});
$('#datepicker2').datepicker({
maxDate: "+0D",
dateFormat:"yy-mm-dd"
});