vue實現折線圖 可按時間查詢

本文實例為大家分享了vue實現可按時間查詢的折線圖的具體代碼，供大家參考，具體內容如下

1.vue前端

//查詢條件<template><el-date-picker v-model='listQuery.toptime' :picker-options='pickerOptions' type='daterange' clearable range-separator='至' start-placeholder='開始日期' end-placeholder='結束日期'/> <el-select v-model='listQuery.xAxis' placeholder='統計粒度' clearable > <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 : /> </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;}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。