vue实现折线图 可按时间查询

本文实例为大家分享了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]
 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<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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。