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

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 总体效果

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

赞 (0)

相关推荐

  • vue-cli项目中使用echarts图表实例

    vue-cli项目中使用echarts图表实例

    我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D3 它

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • vue结合Echarts实现点击高亮效果的示例

    本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy

  • 详解vue文件中使用echarts.js的两种方式

    最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式 准备工作 1.安装echarts依赖 控制台输入:npm install echarts --save 2.全局引入 main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts

  • 使用Vue开发动态刷新Echarts组件的教程详解

    需求背景:dashboard作为目前企业中后台产品的"门面",如何更加实时.高效.炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题.今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件. 准备工作 项目结构搭建 因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建. npm install -g vue-cli vue init webpack vue-charts cd

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue中使用echarts制作圆环图的实例代码

    vue使用echarts制作圆环图,代码如下所示: <div id="main"></div> <script type="text/ecmascript-6"> export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionD

  • Vue 中使用vue2-highcharts实现曲线数据展示的方法

    1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l

  • js基于div丝滑实现贝塞尔曲线

    js基于div丝滑实现贝塞尔曲线

    目录 引言 分析 实现 布局 如何计算y的偏移量 Math.sin() 和 Math.cos() 正弦曲线 余弦曲线 计算更多信息 完善剩余 完成跑马灯制作 贝塞尔曲线 简单封装一下方法 完整示例 style SCript 引言 今天遇到朋友发来的一个ui图,询问我如何实现下图这样的效果[vue项目],(听说是类似LED灯的展示效果),于是便有了今天的小demo,要实现一个类似下图的动效,上面的灯会一直重复滚动,但是这个并不是什么难点,主要在于如何实现这种平滑的曲线,日常我们的开发的div在我们

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • 基于Vue实例对象的数据选项

    基于Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象.Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化 [注意]不应该对data属性使用箭头函数 <div id="app"> {{ message }} </div> <script&

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • 基于vue中解决v-for使用报红并出现警告的问题

    代码报红对于追求优美代码的强迫症患者来说看着很不舒服,报红如下: 控制台中也会有: (Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for

  • 基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程. 首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么. 首先是token. 没有登陆的用户是获取不到token的,而登陆后的角色我们会将token存到local或者seesionStor

  • 基于Vue插入视频的2种方法小结

    基于Vue插入视频的2种方法小结

    屏幕快照 2019-04-01 下午8.06.02.png 方法一:iframe插入视频链接 1.1 ##### 当前播放的视频 <div class="video-wrap" style="width:80%;float:left;oveflow:hidden;"> <iframe :src="this.activeVideo.youtobeURL" frameborder='0' allow='autoplay;encryp

  • 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

    基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

    基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app'> <template v-if='condition.length'> <div> <span>已选中:<span> <span v-for='(item,index) in condition' class='active'>{{item

  • 基于Vue实现电商SKU组合算法问题

    前段时间,公司要做"添加商品"业务模块,这也算是电商业务里面的一个难点了. 令我印象最深的不是什么"组合商品"."关联商品"."关联单品",而是商品SKU的组合问题. 这个问题特别有意思,当时虽然大体上组合成功,总是有些小bug解决不了,然后手上又有别的任务就没仔细研究它. 后来过了一个月,空闲下来专门研究了下,终于把问题解决,有必要记录下这次体验. 先看下在业务中的效果(tips: 如看不清可放大浏览器) 这个相对来说比较麻

随机推荐