基于VUE的v-charts的曲线显示功能


Posted in Javascript onOctober 01, 2019

1. 应用背景

在做一个某路灯管理处的物联网项目时,需要统计8个电表的电能曲线(时间-电能),需求就是能生成日报(24个点,间隔1小时,实时),月报(30个点,间隔1天,取每天的凌晨1点数据),年报(每个月,1号凌晨1点数据开始间隔9天,每个月取3个点,总共36个点)。

2. 分析数据生产者生成

首先采集服务每隔一段时间会去采集电表的电能数据,模拟历史表会利用存储过程将实时数据写入his_aic表里。

3. 取出数据消费者

30天 aic数据4万条记录左右 日报,月报可以直接在历史数据表中取
日表,定时任务,每隔1小时存入整点数据(如果没有整点,排序之后取接近点数据),一天24个数据,一年8760条记录。
月表,定时

任务,每天凌晨1点取数据,按时间存入,一个月30条记录
年表,定时任务,1号,10号,19号,28号(每个月取4个数据,按时间记录,一年48条记录)
定时任务利用Coravel定时器完成,具体可参见Coravel定时器相关博客

4. 前端显示

前端曲线基于v-chart。

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。

4.1 安装V-charts插件

npm i v-charts echarts -S

如果已经安装了echarts,则直接安装v-charts即可

npm i v-charts -S

4.2 引入veline曲线插件

import VeLine from 'v-charts/lib/line'

4.3 曲线标签 ve-line

4.3.1 方法一:直接使用html标签

<template>
 <div>
  <ve-line :data="chartData" :settings="chartSettings"></ve-line>
 </div>
</template>

4.3.2 方法二:pug编译

4.3.2.1 pug的安装

先安装node环境

安装支持pug依赖:npm install pug pug-loader pug-filters -D
安装支持jade依赖:npm install jade jade-loader -D

4.3.2.2 pug的使用

<template lang="pug">
     div
      ve-line(:data='chartData', :settings='chartSettings')
</template>

注意:使用pug空格数量要与上下文对应

4.4 前端写入调试模拟数据

export default {
 data(){  
  return {
   chartData: {
    columns: ['日期','电能1','电能2','电能3','电能4','电能5','电能6','电能7','电能8'],
    rows: [
     { '日期': '10月1日', '电能1': 0, '电能2': 1, '电能3': 0.5, '电能4': 0.63,'电能5': 0.8, '电能6': 2, '电能7': 2.1, '电能8': 1.7 },
     { '日期': '10月2日', '电能1': 1, '电能2': 2, '电能3': 4, '电能4': 0.9,'电能5': 1.1, '电能6': 2.1, '电能7': 4.3, '电能8': 2.6 },
     { '日期': '10月3日', '电能1': 1.6, '电能2': 2.6, '电能3': 4.5, '电能4': 1.9,'电能5': 2.3, '电能6': 3.5, '电能7': 5.3, '电能8': 3.2 },
     { '日期': '10月4日', '电能1': 2.3, '电能2': 5.2, '电能3': 5.4, '电能4': 2.7,'电能5': 3.2, '电能6': 4.3, '电能7': 6.8, '电能8': 3.5 },
     { '日期': '10月5日', '电能1': 3.8, '电能2': 6.2, '电能3': 6.4, '电能4': 4.5,'电能5': 4.5, '电能6': 6.5, '电能7': 7.1, '电能8': 5.5 },
     { '日期': '10月6日', '电能1': 5.3, '电能2': 6.8, '电能3': 8.4, '电能4': 5.6,'电能5': 6.3, '电能6': 7.8, '电能7': 7.5, '电能8': 7.3 }
    ]
   },
   chartSettings: {
     yAxisName: ['kWh']
   },
  }
 }
 components: { VeLine }
}

使用 data 属性表示图表的数据,使用 settings 用作图表的显示状态配置,settings 中所包含的是具体的图表配置,这里通过yAxisName设置电能单位为kWh

4.5 注册组件

4.4中已经加入了注册组件的代码。

components: { VeLine  }

5 总体效果

基于VUE的v-charts的曲线显示功能

这里只展示了月报里的7天,可以设置按钮同样道理依次展示日报年报数据。

Javascript 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
json数据处理及数据绑定
Jan 25 Javascript
JavaScript实现区块链
Mar 14 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 #Javascript
javascript实现摄像头拍照预览
Sep 30 #Javascript
java和js实现的洗牌小程序
Sep 30 #Javascript
JS使用H5实现图片预览功能
Sep 30 #Javascript
在vue中使用jsx语法的使用方法
Sep 30 #Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 #Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 #Javascript
You might like
新版PHP将向Java靠拢
2006/10/09 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
php实现短信发送代码
2015/07/05 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
销售员个人求职的自我评价
2014/02/10 职场文书
法制宣传月活动总结
2014/04/29 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android