基于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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
javascript radio 联动效果
Mar 04 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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
linux下 C语言对 php 扩展
2008/12/14 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
使用JS动态显示文本
2017/09/09 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python类的继承和多态代码详解
2017/12/27 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
python利用platform模块获取系统信息
2020/10/09 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
港湾网络笔试题
2014/04/19 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
程序员岗位职责
2013/11/11 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
采购员岗位职责范本
2015/04/07 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
Python socket如何解析HTTP请求内容
2022/02/12 Python