首页 >> js开发 >> jsvue实现折线图 可按时间查询js大全
jsvue实现折线图 可按时间查询js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例为大家分享了vue实现可按时间查询的折线图的具体代码，供大家参考，具体内容如下1.vue前端
//查询条件
v-model="listQuery.toptime"
:picker-options="pickerOptions"
style="width: 380px"
type="daterange"
clearable
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"/>
v-model="listQuery.xAxis"
placeholder="统计粒度"
clearable
style="width: 150px"
>
v-for="(item, index) in xAxisList"
:key="index"
:label="item.value"
:value="item.id"
/>
//折线图
折线图
//查询条件
v-model="listQuery.toptime"
:picker-options="pickerOptions"
style="width: 380px"
type="daterange"
clearable
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"/>
v-model="listQuery.xAxis"
placeholder="统计粒度"
clearable
style="width: 150px"
>
v-for="(item, index) in xAxisList"
:key="index"
:label="item.value"
:value="item.id"
/>
//折线图
折线图
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)
}
}
}
// 引入基本模板
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 timeList = gson.fromJson(topTime, new TypeToken>() {
}.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 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 dayList = new ArrayList<>();
int monthMaxDay = DateUtil.getDaysByYearMonth(year, month);
List sharenumList = new ArrayList<>();
List shareUserRegisterList = new ArrayList<>();
List shareNumByDayList = new ArrayList<>();
List 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;
}
@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 timeList = gson.fromJson(topTime, new TypeToken>() {
}.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 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 dayList = new ArrayList<>();
int monthMaxDay = DateUtil.getDaysByYearMonth(year, month);
List sharenumList = new ArrayList<>();
List shareUserRegisterList = new ArrayList<>();
List shareNumByDayList = new ArrayList<>();
List 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;
}以上就是本文的全部内容，希望对大家的学习有所帮助。
//查询条件
:picker-options="pickerOptions"
style="width: 380px"
type="daterange"
clearable
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"/>
placeholder="统计粒度"
clearable
style="width: 150px"
>
:key="index"
:label="item.value"
:value="item.id"
/>
//折线图
折线图
//查询条件
:picker-options="pickerOptions"
style="width: 380px"
type="daterange"
clearable
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"/>
placeholder="统计粒度"
clearable
style="width: 150px"
>
:key="index"
:label="item.value"
:value="item.id"
/>
//折线图
折线图
// 引入基本模板
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)
}
}
}
// 引入基本模板
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
}.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
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
int monthMaxDay = DateUtil.getDaysByYearMonth(year, month);
List
List
List
List
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;
}
@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
}.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
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
int monthMaxDay = DateUtil.getDaysByYearMonth(year, month);
List
List
List
List
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;
}以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章:
- jsnuxt 路由、过渡特效、中间件的实现代码js大全
- js微信小程序基于ColorUI构建皮皮虾短视频去水印组件js大全
- jsnuxt引入组件和公共样式的操作js大全
- jsVant 中的Toast设置全局的延迟时间操作js大全
- js如何实现小程序与小程序之间的跳转js大全
- jsArray.filter中如何正确使用Asyncjs大全
- jsnuxt 服务器渲染动态设置 title和seo关键字的操作js大全
- js解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题js大全
- jsvant组件中 dialog的确认按钮的回调事件操作js大全
- jsNuxt 项目性能优化调研分析js大全
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
