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 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
React实现动效弹窗组件
Jun 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
一个ubbcode的函数,速度很快.
2006/10/09 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
javascript 数组的方法集合
2008/06/05 Javascript
JQuery 常用方法基础教程
2009/02/06 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
微信小程序python用户认证的实现
2019/07/29 Python
基于python plotly交互式图表大全
2019/12/07 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
在python image 中实现安装中文字体
2020/05/16 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
物理学专业求职信
2014/07/04 职场文书
地雷战观后感
2015/06/09 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技