本文实例为大家分享了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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7