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


Posted in Javascript onAugust 21, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
详解vue表单——小白速看
Apr 08 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
vue实现公共方法抽离
Jul 31 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 #Javascript
js绘制一条直线并旋转45度
Aug 21 #Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 #Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 #Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 #Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 #Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 #Javascript
You might like
PHP 遍历文件实现代码
2011/05/04 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JS求平均值的小例子
2013/11/29 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
js实现简单计算器
2015/11/22 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python decimal模块使用方法详解
2020/06/08 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
财务会计专业应届毕业生求职信
2013/10/18 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
闭幕式主持词
2014/04/02 职场文书
运动会通讯稿100字
2015/07/20 职场文书
汽车车尾标语大全
2015/08/11 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers