基于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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
webpack手动配置React开发环境的步骤
Jul 02 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
vue的$http的get请求要加上params操作
Nov 12 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解析url的三个示例
2014/01/20 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
javascript基本类型详解
2014/11/28 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
深入讲解Python编程中的字符串
2015/10/14 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python框架django基础指南
2016/09/08 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python 字段拆分详解
2019/12/17 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python开发前景如何
2020/06/11 Python
python递归函数用法详解
2020/10/26 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
党员学习十八大感想
2014/01/17 职场文书
新学期开学标语
2014/06/30 职场文书
安全生产工作汇报
2014/10/28 职场文书
心术观后感
2015/06/11 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers