vue line chart can be queried by time

This article example for everyone to share vue can be queried by time line chart specific code, for your reference, the specific content is as follows

1. vue front end

// Query criteria 
<template>
<el-date-picker
 v-model="listQuery.toptime"
 :picker-options="pickerOptions"
 style="width: 380px"
 type="daterange"
 clearable
 range-separator=" To "
 start-placeholder=" Start date "
 end-placeholder=" End date "/>
 <el-select
 v-model="listQuery.xAxis"
 placeholder=" Statistical granularity "
 clearable
 style="width: 150px"
 >
 <el-option
 v-for="(item, index) in xAxisList"
 :key="index"
 :label="item.value"
 :value="item.id"
 />
 </el-select>
// Line chart 
 <el-card class="box-card">
 <div slot="header" class="clearfix">
  <span> Line chart </span>
 </div>
 <div id="myChart3" :style="{width: '1400px', height: '600px'}"/>
 </el-card>
</template>

2. Corresponding script code

//  Introducing basic templates 
const echarts = require('echarts/lib/echarts')
//  Introducing histogram component 
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')

//  Introduces a prompt box and title Component 
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: ' Year ' }, { id: 2, value: ' Month ' }, { id: 3, value: ' Week ' }
 ],
 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)// Default weekly query 
 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)// Year-by-year inquiry 
 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)// Monthly enquiries 
 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)// Query by week 
 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()
 })
},
// Focus 
drawLine() {
 const myChart3 = echarts.init(document.getElementById('myChart3'))
 myChart3.showLoading() //  Display the data before it is loaded 1 Segment simple loading Animation 
 myChart3.hideLoading() //  Hide Load Animation 
 //  Draw a line chart 
 const option = {
 title: {
 text: ' Share travel data statistics ',
 subtext: ''
 },
 // tooltip: {
 // trigger: 'axis'
 // },
 legend: {
 data: [' Total share times ', ' By sharing the number of registered users ', ' Sharing times today ', ' Number of shares passed registration today ']
 },
 // 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: ' Total share times ',
 type: 'line',
 data: this.YList.sharenumList
 // markPoint: {
 // data: [
 // { type: 'max', name: ' Maximum value ' },
 // { type: 'min', name: ' Minimum value ' }
 // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: ' Average ' }
 // ]
 // }
 },
 {
 name: ' By sharing the number of registered users ',
 type: 'line',
 data: this.YList.shareUserRegisterList
 // markPoint: {
 // data: [
 // { type: 'max', name: ' Maximum value ' },
 // { type: 'min', name: ' Minimum value ' }
 // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: ' Average ' }
 // ]
 // }
 },
 {
 name: ' Sharing times today ',
 type: 'line',
 data: this.YList.shareNumByDayList
 // markPoint: {
 // data: [
 // { name: ' Weekly minimum ', value: -2, xAxis: 1, yAxis: -1.5 }
 // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: ' Average ' }
 // ]
 // }
 },
 {
 name: ' Number of shares passed registration today ',
 type: 'line',
 data: this.YList.shareUserRegisterByDayList
 // markPoint: {
 // data: [
 // { name: ' Weekly minimum ', value: -2, xAxis: 1, yAxis: -1.5 }
 // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: ' Average ' }
 // ]
 // }
 }
 ]
 }
 myChart3.setOption(option)
}
 }
}

3. Corresponding back-end controller code

@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, " Success ", true);
 } catch (Exception e) {
  e.printStackTrace();
  return new JSONResult(null, 101, " Server fetch failed ", 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", " Times ");
 map.put("XListName", " Date ");
 map.put("XList", dayList);
 }
 return map;
}