vue折线图 vue实现折线图 可按时间查询
是卿卿 人气:0想了解vue实现折线图 可按时间查询的相关内容吗，是卿卿在本文为您仔细讲解vue折线图的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue,折线图,时间查询，下面大家一起来学习吧。
1.vue前端
//查询条件
<template>
<el-date-picker
v-model="listQuery.toptime"
:picker-options="pickerOptions"
style="width: 380px"
type="daterange"
clearable
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"/>
<el-select
v-model="listQuery.xAxis"
placeholder="统计粒度"
clearable
style="width: 150px"
>
<el-option
v-for="(item, index) in xAxisList"
:key="index"
:label="item.value"
:value="item.id"
/>
</el-select>
//折线图
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>折线图</span>
</div>
<div id="myChart3" :style="{width: '1400px', height: '600px'}"/>
</el-card>
</template>
2.对应script代码
// 引入基本模板
const echarts = 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')
export default {
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() {
const listQueryData = Object.assign({}, this.listQuery)
if (listQueryData.toptime !== null) {
listQueryData.toptime = JSON.stringify(this.listQuery.toptime)
} else if (listQueryData.toptime === null) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)//默认按周查询
this.listQuery.toptime = [start, end]
listQueryData.toptime = JSON.stringify([start, end])
}
switch (listQueryData.xAxis) {
case 1: {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)//按年查询
this.listQuery.toptime = [start, end]
listQueryData.toptime = JSON.stringify([start, end])
break
}
case 2: {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)//按月查询
this.listQuery.toptime = [start, end]
listQueryData.toptime = JSON.stringify([start, end])
break
}
case 3: {
const end = new Date()
const start = new Date()
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() {
const myChart3 = echarts.init(document.getElementById('myChart3'))
myChart3.showLoading() // 数据加载完之前先显示一段简单的loading动画
myChart3.hideLoading() // 隐藏加载动画
// 绘制折线图
const option = {
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
public JSONResult getShareTripCount(HttpServletRequest request) {
try {
String topTime = request.getParameter("toptime");
String xAxis = request.getParameter("xAxis");
Map map = new HashMap();
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);
}
return new JSONResult(map, 0, "成功", true);
} catch (Exception e) {
e.printStackTrace();
return new JSONResult(null, 101, "服务器获取失败", false);
}
}
private Map getShareTripCountByTime(String topTime) throws ParseException {
Map map=new HashMap();
Sort.Order so = new Sort.Order(Sort.Direction.DESC, "id");
Sort sort = new Sort(so);
if (!StringUtils.isEmpty(topTime)) {
topTime = topTime.replace("Z", " UTC");
Gson gson = new Gson();
List<String> timeList = gson.fromJson(topTime, new TypeToken<List<String>>() {
}.getType());
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS Z");
Date endTime = format.parse(timeList.get(1));
Date beginTime = format.parse(timeList.get(0));
List<ShareCount> shareCountList = mongoTemplate.find(Query.query(Criteria.where("createTime").gte(beginTime).lte(endTime)).with(sort), ShareCount.class);
Calendar c = Calendar.getInstance();
c.setTime(beginTime);
int month = c.get(Calendar.MONTH);
int year = c.get(Calendar.YEAR);
int day = c.get(Calendar.DATE);
int dayMax = DateUtil.daysBetween(beginTime, endTime);
List<String> dayList = new ArrayList<>();
int monthMaxDay = DateUtil.getDaysByYearMonth(year, month);
List<String> sharenumList = new ArrayList<>();
List<String> shareUserRegisterList = new ArrayList<>();
List<String> shareNumByDayList = new ArrayList<>();
List<String> shareUserRegisterByDayList = new ArrayList<>();
int j = 1;
for (int i = 1; i <= dayMax; i++) {
String sub = "";
int yue;
int di;
if (monthMaxDay >= i + day) {
di = day + i;
yue = month + 1;
sub = yue + "-" + di;
} else {
yue = month + 2;
di = j;
sub = yue + "-" + di;
j++;
}
int sharenum = 0;
String sharenums ="";
int shareUserRegister = 0;
String shareUserRegisters ="";
int shareNumByDay = 0;
String shareNumByDays ="";
int shareUserRegisterByDay = 0;
String shareUserRegisterByDays ="";
for (ShareCount shareCount : shareCountList) {
c.setTime(shareCount.getCreateTime());
int months = c.get(Calendar.MONTH) + 1;
int years = c.get(Calendar.YEAR);
int days = 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);
}
Map maps=new HashMap();
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);
}
return map;
}
加载全部内容