vue实现折线图可按时间查询

2023-07-18 10:37:04 311

本文实例为大家分享了vue实现可按时间查询的折线图的具体代码，供大家参考，具体内容如下

1.vue前端

//查询条件

2.对应script代码

//引入基本模板
constecharts=require('echarts/lib/echarts')
//引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')

//引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

exportdefault{
data(){
return{
listQuery:{
page:0,
limit:20,
toptime:null,
xAxis:null
},
XList:[],
XListName:'',
YList:[],
YListName:'',
xAxisList:[
{id:1,value:'年'},{id:2,value:'月'},{id:3,value:'周'}
],
temp:{
id:undefined,
}
}
},
methods:{
handleFilter1(){
constlistQueryData=Object.assign({},this.listQuery)
if(listQueryData.toptime!==null){
listQueryData.toptime=JSON.stringify(this.listQuery.toptime)
}elseif(listQueryData.toptime===null){
constend=newDate()
conststart=newDate()
start.setTime(start.getTime()-3600*1000*24*7)//默认按周查询
this.listQuery.toptime=[start,end]
listQueryData.toptime=JSON.stringify([start,end])
}
switch(listQueryData.xAxis){
case1:{
constend=newDate()
conststart=newDate()
start.setTime(start.getTime()-3600*1000*24*365)//按年查询
this.listQuery.toptime=[start,end]
listQueryData.toptime=JSON.stringify([start,end])
break
}
case2:{
constend=newDate()
conststart=newDate()
start.setTime(start.getTime()-3600*1000*24*30)//按月查询
this.listQuery.toptime=[start,end]
listQueryData.toptime=JSON.stringify([start,end])
break
}
case3:{
constend=newDate()
conststart=newDate()
start.setTime(start.getTime()-3600*1000*24*7)//按周查询
this.listQuery.toptime=[start,end]
listQueryData.toptime=JSON.stringify([start,end])
break
}
}
getShareTripCount(listQueryData).then(response=>{
this.XList=response.data.data.XList
this.YList=response.data.data.YList
this.YListName=response.data.data.YListName
this.XListName=response.data.data.XListName
this.drawLine()
})
},
//重点
drawLine(){
constmyChart3=echarts.init(document.getElementById('myChart3'))
myChart3.showLoading()//数据加载完之前先显示一段简单的loading动画
myChart3.hideLoading()//隐藏加载动画
//绘制折线图
constoption={
title:{
text:'分享行程数据统计',
subtext:''
},
//tooltip:{
//trigger:'axis'
//},
legend:{
data:['总分享次数','通过分享注册用户数','今日分享次数','今日通过注册分享数']
},
//toolbox:{
//show:true,
//feature:{
//mark:{show:true},
//dataView:{show:true,readOnly:false},
//magicType:{show:true,type:['line','bar']},
//restore:{show:true},
//saveAsImage:{show:true}
//}
//},
calculable:true,
xAxis:{
name:this.XListName,
type:'category',
data:this.XList
},
yAxis:{
name:this.YListName,
type:'value'
},
series:[
{
name:'总分享次数',
type:'line',
data:this.YList.sharenumList
//markPoint:{
//data:[
//{type:'max',name:'最大值'},
//{type:'min',name:'最小值'}
//]
//}
//markLine:{
//data:[
//{type:'average',name:'平均值'}
//]
//}
},
{
name:'通过分享注册用户数',
type:'line',
data:this.YList.shareUserRegisterList
//markPoint:{
//data:[
//{type:'max',name:'最大值'},
//{type:'min',name:'最小值'}
//]
//}
//markLine:{
//data:[
//{type:'average',name:'平均值'}
//]
//}
},
{
name:'今日分享次数',
type:'line',
data:this.YList.shareNumByDayList
//markPoint:{
//data:[
//{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
//]
//}
//markLine:{
//data:[
//{type:'average',name:'平均值'}
//]
//}
},
{
name:'今日通过注册分享数',
type:'line',
data:this.YList.shareUserRegisterByDayList
//markPoint:{
//data:[
//{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
//]
//}
//markLine:{
//data:[
//{type:'average',name:'平均值'}
//]
//}
}
]
}
myChart3.setOption(option)
}
}
}

3.对应后端controller代码

@RequestMapping(value="/getShareTripCount",method=RequestMethod.POST)
@ResponseBody
publicJSONResultgetShareTripCount(HttpServletRequestrequest){
try{
StringtopTime=request.getParameter("toptime");
StringxAxis=request.getParameter("xAxis");
Mapmap=newHashMap();
if(!StringUtils.isEmpty(xAxis)){
switch(xAxis){
case"1":{
break;
}
case"2":{
map=getShareTripCountByTime(topTime);
break;
}
case"3":{
map=getShareTripCountByTime(topTime);
break;
}
default:{
map=getShareTripCountByTime(topTime);
break;
}
}
}else{
map=getShareTripCountByTime(topTime);
}
returnnewJSONResult(map,0,"成功",true);
}catch(Exceptione){
e.printStackTrace();
returnnewJSONResult(null,101,"服务器获取失败",false);
}
}

privateMapgetShareTripCountByTime(StringtopTime)throwsParseException{
Mapmap=newHashMap();
Sort.Orderso=newSort.Order(Sort.Direction.DESC,"id");
Sortsort=newSort(so);
if(!StringUtils.isEmpty(topTime)){
topTime=topTime.replace("Z","UTC");
Gsongson=newGson();
ListtimeList=gson.fromJson(topTime,newTypeToken>(){
}.getType());
SimpleDateFormatformat=newSimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSZ");
DateendTime=format.parse(timeList.get(1));
DatebeginTime=format.parse(timeList.get(0));
ListshareCountList=mongoTemplate.find(Query.query(Criteria.where("createTime").gte(beginTime).lte(endTime)).with(sort),ShareCount.class);
Calendarc=Calendar.getInstance();
c.setTime(beginTime);
intmonth=c.get(Calendar.MONTH);
intyear=c.get(Calendar.YEAR);
intday=c.get(Calendar.DATE);
intdayMax=DateUtil.daysBetween(beginTime,endTime);
ListdayList=newArrayList<>();
intmonthMaxDay=DateUtil.getDaysByYearMonth(year,month);
ListsharenumList=newArrayList<>();
ListshareUserRegisterList=newArrayList<>();
ListshareNumByDayList=newArrayList<>();
ListshareUserRegisterByDayList=newArrayList<>();
intj=1;
for(inti=1;i<=dayMax;i++){
Stringsub="";
intyue;
intdi;
if(monthMaxDay>=i+day){
di=day+i;
yue=month+1;
sub=yue+"-"+di;
}else{
yue=month+2;
di=j;
sub=yue+"-"+di;
j++;
}
intsharenum=0;
Stringsharenums="";
intshareUserRegister=0;
StringshareUserRegisters="";
intshareNumByDay=0;
StringshareNumByDays="";
intshareUserRegisterByDay=0;
StringshareUserRegisterByDays="";
for(ShareCountshareCount:shareCountList){
c.setTime(shareCount.getCreateTime());
intmonths=c.get(Calendar.MONTH)+1;
intyears=c.get(Calendar.YEAR);
intdays=c.get(Calendar.DATE);
if(year==years&&yue==months&&di==days){
sharenum=sharenum+shareCount.getShareNum();
shareUserRegister=shareUserRegister+shareCount.getShareUserRegister();
shareNumByDay=shareNumByDay+shareCount.getShareNumByDay();
shareUserRegisterByDay=shareUserRegisterByDay+shareCount.getShareUserRegisterByDay();
}
}
sharenums=String.valueOf(sharenum);
shareUserRegisters=String.valueOf(shareUserRegister);
shareNumByDays=String.valueOf(shareNumByDay);
shareUserRegisterByDays=String.valueOf(shareUserRegisterByDay);
dayList.add(sub);
sharenumList.add(sharenums);
shareUserRegisterList.add(shareUserRegisters);
shareNumByDayList.add(shareNumByDays);
shareUserRegisterByDayList.add(shareUserRegisterByDays);
}
Mapmaps=newHashMap();
maps.put("sharenumList",sharenumList);
maps.put("shareUserRegisterList",shareUserRegisterList);
maps.put("shareNumByDayList",shareNumByDayList);
maps.put("shareUserRegisterByDayList",shareUserRegisterByDayList);

map.put("type","month");
map.put("YList",maps);
map.put("YListName","次");
map.put("XListName","日期");
map.put("XList",dayList);
}
returnmap;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue实现折线图 可按时间查询

热门推荐

随机推荐

vue实现折线图可按时间查询