Vue implements line charts and can be queried by time

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

// Introduce basic templatesconst echarts = require('echarts/lib/echarts')
// Introduce histogram componentrequire('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')

// Introduce prompt box and title componentrequire('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: 'moon' }, { id: 3, value: 'week' }
 ],
 temp: {
 id: undefined,
 }
 }
 },
 methods: {
 handleFilter1() {
 const listQueryData = ({}, )
 if ( !== null) {
  = ()
 } else if ( === null) {
 const end = new Date()
 const start = new Date()
 (() - 3600 * 1000 * 24 * 7)//Default query by week  = [start, end]
  = ([start, end])
 }
 switch () {
 case 1: {
 const end = new Date()
 const start = new Date()
 (() - 3600 * 1000 * 24 * 365)//Inquiry by year  = [start, end]
  = ([start, end])
 break
 }
 case 2: {
 const end = new Date()
 const start = new Date()
 (() - 3600 * 1000 * 24 * 30)//Inquiry by month  = [start, end]
  = ([start, end])
 break
 }
 case 3: {
 const end = new Date()
 const start = new Date()
 (() - 3600 * 1000 * 24 * 7)//Check by week  = [start, end]
  = ([start, end])
 break
 }
 }
 getShareTripCount(listQueryData).then(response => {
  = 
  = 
  = 
  = 
 ()
 })
},
//FocusdrawLine() {
 const myChart3 = (('myChart3'))
 () // Show a simple loading animation before data is loaded () // Hide loading animation // Draw a line chart const option = {
 title: {
 text: 'Share itinerary statistics',
 subtext: ''
 },
 // tooltip: {
 // trigger: 'axis'
 // },
 legend: {
 data: ['Total number of shares', 'By sharing the number of registered users', 'Today', '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: ,
 type: 'category',
 data: 
 },
 yAxis: {
 name: ,
 type: 'value'
 },
 series: [
 {
 name: 'Total number of shares',
 type: 'line',
 data: 
 // markPoint: {
 // data: [
 // { type: 'max', name: 'max' }, // { type: 'min', name: 'min' } // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: 'average' } // ]
 // }
 },
 {
 name: 'By sharing the number of registered users',
 type: 'line',
 data: 
 // markPoint: {
 // data: [
 // { type: 'max', name: 'max' }, // { type: 'min', name: 'min' } // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: 'average' } // ]
 // }
 },
 {
 name: 'Today',
 type: 'line',
 data: 
 // markPoint: {
 // data: [
 // { name: 'The lowest week', value: -2, xAxis: 1, yAxis: -1.5 } // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: 'average' } // ]
 // }
 },
 {
 name: 'Today',
 type: 'line',
 data: 
 // markPoint: {
 // data: [
 // { name: 'The lowest week', value: -2, xAxis: 1, yAxis: -1.5 } // ]
 // }
 // markLine: {
 // data: [
 // { type: 'average', name: 'average' } // ]
 // }
 }
 ]
 }
 (option)
}
 }
}

@RequestMapping(value = "/getShareTripCount", method = )
 @ResponseBody
 public JSONResult getShareTripCount(HttpServletRequest request) {
 try {
  String topTime = ("toptime");
  String xAxis = ("xAxis");
  Map map = new HashMap();
  if(!(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) {
  ();
  return new JSONResult(null, 101, "Server acquisition failed", false);
 }
 }

private Map getShareTripCountByTime(String topTime) throws ParseException {
 Map map=new HashMap();
  so = new (, "id");
 Sort sort = new Sort(so);
 if (!(topTime)) {
 topTime = ("Z", " UTC");
 Gson gson = new Gson();
 List<String> timeList = (topTime, new TypeToken<List<String>>() {
 }.getType());
 SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm: Z");
 Date endTime = ((1));
 Date beginTime = ((0));
 List<ShareCount> shareCountList = ((("createTime").gte(beginTime).lte(endTime)).with(sort), );
 Calendar c = ();
 (beginTime);
 int month = ();
 int year = ();
 int day = ();
 int dayMax = (beginTime, endTime);
 List<String> dayList = new ArrayList<>();
 int monthMaxDay = (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) {
  (());
  int months = () + 1;
  int years = ();
  int days = ();
  if (year == years && yue == months && di == days) {
   sharenum = sharenum + ();
   shareUserRegister = shareUserRegister + ();
   shareNumByDay=shareNumByDay+ ();
   shareUserRegisterByDay=shareUserRegisterByDay+();
  }
  }
  sharenums=(sharenum);
  shareUserRegisters=(shareUserRegister);
  shareNumByDays=(shareNumByDay);
  shareUserRegisterByDays=(shareUserRegisterByDay);
  (sub);
  (sharenums);
  (shareUserRegisters);
  (shareNumByDays);
  (shareUserRegisterByDays);
 }
 Map maps=new HashMap();
 ("sharenumList", sharenumList);
 ("shareUserRegisterList", shareUserRegisterList);
 ("shareNumByDayList", shareNumByDayList);
 ("shareUserRegisterByDayList", shareUserRegisterByDayList);

 ("type", "month");
 ("YList", maps);
 ("YListName", "Second-rate");
 ("XListName", "date");
 ("XList", dayList);
 }
 return map;
}