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 浮动广告实现代码
Dec 25 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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编写大型网站问题集
2007/03/06 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
js 通用订单代码
2013/12/23 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
恶意软件的定义
2014/11/12 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
历史系自荐信范文
2013/12/24 职场文书
大型公益活动策划方案
2014/08/20 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS