vue实现折线图可按时间查询本⽂实例为⼤家分享了vue实现可按时间查询的折线图的具体代码，供⼤家参考，具体内容如下1.vue前端
//查询条件
<template>
<el-date-picker
v-model="ptime"
:picker-options="pickerOptions"
type="daterange"
clearable
range-separator="⾄"
start-placeholder="开始⽇期"
end-placeholder="结束⽇期"/>
<el-select
v-model="listQuery.xAxis"
placeholder="统计粒度"
clearable
>
<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" :/>
</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 (ptime !== null) {
} else if (ptime === null) {
const end = new Date()
const start = new Date()
start.Time() - 3600 * 1000 * 24 * 7)//默认按周查询
ptime = [start, end]
}
switch (listQueryData.xAxis) {
case 1: {
const end = new Date()
const start = new Date()
start.Time() - 3600 * 1000 * 24 * 365)//按年查询
ptime = [start, end]
break
}
case 2: {
const end = new Date()
const start = new Date()
start.Time() - 3600 * 1000 * 24 * 30)//按⽉查询
ptime = [start, end]
break
}
case 3: {
const end = new Date()
const start = new Date()
start.Time() - 3600 * 1000 * 24 * 7)//按周查询
ptime = [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.ElementById('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: {
setoption// 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 = Parameter("toptime");
String xAxis = Parameter("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 = place("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.(1));
Date beginTime = format.(0));
List<ShareCount> shareCountList = mongoTemplate.find(Query.query(Criteria.where("createTime").gte(beginTime).lte(endTime)).with(sort), ShareCount.class); Calendar c = Instance();
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 = DaysByYearMonth(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.CreateTime());
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 + ShareNum();
shareUserRegister = shareUserRegister + ShareUserRegister();
shareNumByDay=shareNumByDay+ ShareNumByDay();
shareUserRegisterByDay=ShareUserRegisterByDay(); }
}
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;
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论