本文例項為大家分享了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])
   break
  }
  case 3: {
   const end = new Date()
   const start = new Date()
   start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)//按周查詢
   this.listQuery.toptime = [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: '通過分享註冊使用者數',data: this.YList.shareUserRegisterList
    // markPoint: {
    //  data: [
    //   { type: 'max',{
    name: '今日分享次數',data: this.YList.shareNumByDayList
    // markPoint: {
    //  data: [
    //   { name: '周最低',value: -2,xAxis: 1,yAxis: -1.5 }
    //  ]
    // }
    // markLine: {
    //  data: [
    //   { type: 'average',{
    name: '今日通過註冊分享數',data: this.YList.shareUserRegisterByDayList
    // markPoint: {
    //  data: [
    //   { name: '周最低',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,"成功",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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。