基于VUE的v型图曲线显示功能

1. 应用背景

在路灯管理处做物联网项目时，需要统计8米的功率曲线(时间-功率)。需求是能够生成每日报告(24点，间隔1小时，实时)、每月报告(30点，间隔1天，每天凌晨1点获取数据)和年度报告(每月，每月1日凌晨1点数据间隔9天)

2. 分析数据生产者生成

第一次采集服务会定期采集电表的电能数据，模拟历史表会使用存储过程将实时数据写入his_aic表中。

3. 取出数据消费者

30天aic数据大概有4万条记录，日报表可以直接从历史数据表中取日报表，调度任务，每1小时保存一次整点数据(如果没有整点，排序后取收盘点数据)，一天24条，一年8760条记录。月表，计时

任务：每天凌晨1点取数据，按时间保存，每月记录30个项目的年表，安排任务。1号、10号、19号、28号日程任务(每月取4个数据，按时间记录，一年记录48项)由Coravel定时器完成。详情请参考Coravel定时器相关博客

4. 前端显示

前端曲线基于v形图。

使用echarts生成图表时，往往需要进行繁琐的数据类型转换和修改复杂的配置项。v型图的出现就是为了解决这个痛点。基于Vue2.0和echart包的v-charts图表组件只需提供一个对正面和背面都友好的配置项，就可以轻松生成通用图表。

4.1 安装V-charts插件

NPM I v-charts echart-S

如果已经安装了echarts，可以直接安装v形图

NPM I-v图-S

4.2 引入veline曲线插件

从“v形图/库/线”导入VeLine

4.3 曲线标签 ve-line

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

模板div ve-line : data=' chart data ' : settings=' chart settings '/ve-line/div/模板

4.3.2方法2:帕格编制

帕格在4.3.2.1的安装

首先安装节点环境

安装支持泥巴依赖：npm安装泥巴-加载器泥巴-过滤器-d安装支持玉依赖：NPM安装玉-加载器-D

帕格在4.3.2.2的使用

模板lang=' pug ' div ve-line(: data=' chart data '， settings=' chart settings ')/模板

注意：pug空格的数量应与上下文相对应

4.4前端写入调试仿真数据

导出默认值{ data(){ return { chartdata : { columns 3360[' Date '，' power 1 '，' power 2 '，' power 3 '，' power 4 '，' power 5 '，' power 6 '，' power 7 '，' power 8']，row :[{ ' Date ' : ' 10月1日'，' Electric Energy 1 ' : 0 0 0 0，' Electric Energy 2 ' : 1，' Electric Energy 3 ' : 0.5，' Electric Energy 5 ' :电能8': 2.6 }，{ '日期' : ' 10月3日'，'电能1': 1.6，'电能2': 2.6，'电能3' 3360 4.5，'电能4': 1.9，'电能5' 3360。电能8': 3.2 }，{ ' Date ' :月4日'，' Electric energy 1': 2.3，' Electric energy 2': 5.2，' Electric energy 3' 3360 5.4，' Electric energy 4': 2.7，' Electric energy 5 ' Electric energy 8 ' : 3.5 }，Date ' 3: ' 10月5 '，' electric energy 1 ' : 3.8，' Electric energy 2 ' 3: 日期' : ' 10月6日'，'电能1': 5.3，'电能2': 6.8，'电能3' 3360 8.4，'电能4': 5.6，'电能5 '电能8' : 7.3}]}，图表设置： { yaxinsname 3360[' kWh ']}，}}组件3360 {veline}}使用数据属性表示的数据这些设置包含特定的图表配置。这里，电能的单位是由雅西的名字设定的

4.5注册组件

4.4中增加了注册组件的代码。

组件： { VeLine }

5 总体效果

这里只显示月报表中的7天。同样的原因，您可以设置按钮依次显示每日报告数据。