您当前的位置:首页 > 电脑百科 > 数据库 > 百科

数据大屏可视化工具篇—DataV

时间:2020-08-13 11:48:07  来源:  作者:
数据大屏可视化工具篇—DataV

datav

前面猪猪侠已经分享了很多数据大屏可视化的精美模板,都是小编浪里淘沙一点一点收集起来的,感兴趣的小伙伴们可以进入猪猪侠主页直接获取大屏可视化模板,完全免费的哦。

古人有云,授人以鱼不如授人以渔,基于这方面的考虑,所以猪猪侠这次给大家带来了数据大屏可视化的一套工具DataV。

首先来介绍一下,DataV是干什么的?

  1. DataV是一个基于Vue的数据可视化组件库(有vue版本和react版本,今天主要介绍vue版本)
  2. 提供用于提升页面动态视觉效果svg边框和装饰
  3. 提供常用的图标(loading加载,边框,装饰,图表,动态环图,胶囊柱图,水位图,进度池,飞线图,锥形柱图,数字翻牌器,轮播表等等)

如何使用

创建vue项目

组件库依赖vue,要想使用它,首先要创建一个vue项目

// 1.安装vue-cli
// npm i -g @vue/cli 或者 yarn global add @vue/cli

// 2.创建Vue项目
// vue create datav-project

安装

// cd datav-project
// npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view

使用

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

按需引用

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

详细的文档可以参展官网文档

组件介绍

loading加载

数据尚未加载完成时,可以显示Loading效果,增强用户体验。

<dv-loading>Loading...</dv-loading>
数据大屏可视化工具篇—DataV

loading图,原图有动态效果


边框

边框均由SVG元素绘制,体积轻量不失真,它们的使用极为方便

<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>
数据大屏可视化工具篇—DataV

dv-border-Box-1,原图有动态效果


胶囊柱图

<dv-capsule-chart :config="config" style="width:300px;height:200px" />
数据大屏可视化工具篇—DataV

胶囊柱图


水位图

<dv-water-level-pond :config="config" style="width:150px;height:200px" />
数据大屏可视化工具篇—DataV

水位图,原图有动态效果


进度池

<dv-percent-pond :config="config" style="width:200px;height:100px;" />
数据大屏可视化工具篇—DataV

进度池


飞线池

设置一个中心点,若干飞线点,即可得到动态飞线图,组件提供的dev模式可以帮你快速配置飞线点位置。

<dv-flyline-chart :config="config" style="width:100%;height:100%;" />
数据大屏可视化工具篇—DataV

飞线图,原图有动态效果


锥形柱图

锥形柱图是特殊的柱状图,它将根据数值大小,降序排列锥形柱,适合排名类数据展示。

<dv-conical-column-chart :config="config" style="width:400px;height:200px;" />
数据大屏可视化工具篇—DataV

锥形柱图


轮播表

轮播表可以单条轮播也可以整页轮播,支持点击事件,展示数据使用v-html渲染,因此你可以传递html字符串,定制个性化元素。

<dv-scroll-board :config="config" style="width:500px;height:220px" />
数据大屏可视化工具篇—DataV

轮播表,原图有滚动效果


最后还是要给大家发福利,哈哈哈,三套基于datav的大屏可视化模板。

数据大屏可视化工具篇—DataV

施工养护综合数据


数据大屏可视化工具篇—DataV

机电设备电子档案


数据大屏可视化工具篇—DataV

机电运维管理



Tags:数据大屏可视化   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
今天给小伙伴们分享一个高质量Avue大屏可视化模板AvueData。 avue-data 基于 vue+element-ui 二次封装的大屏可视化平台。提供2000多个模板库,屏幕自适应,支持自定义地图选择...【详细内容】
2020-08-31  Tags: 数据大屏可视化  点击:(4448)  评论:(0)  加入收藏
datav前面猪猪侠已经分享了很多数据大屏可视化的精美模板,都是小编浪里淘沙一点一点收集起来的,感兴趣的小伙伴们可以进入猪猪侠主页直接获取大屏可视化模板,完全免费的哦。古...【详细内容】
2020-08-13  Tags: 数据大屏可视化  点击:(5528)  评论:(0)  加入收藏
▌简易百科推荐
1增1.1【插入单行】insert [into] <表名> (列名) values (列值)例:insert into Strdents (姓名,性别,出生日期) values (&#39;开心朋朋&#39;,&#39;男&#39;,&#39;1980/6/15&#3...【详细内容】
2021-12-27  快乐火车9d3    Tags:SQL   点击:(1)  评论:(0)  加入收藏
最近发现还有不少做开发的小伙伴,在写存储过程的时候,在参考已有的不同的写法时,往往很迷茫, 不知道各种写法孰优孰劣,该选用哪种写法,以及各种写法的优缺点,本文以一个简单的查询...【详细内容】
2021-12-23  linux上的码农    Tags:sql   点击:(9)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的HasorDB 是一个全功能数据库访问工具,提供对象映射、丰...【详细内容】
2021-12-22  GitHub精选    Tags:HasorDB   点击:(5)  评论:(0)  加入收藏
作者丨Rafal Grzegorczyk译者丨陈骏策划丨孙淑娟【51CTO.com原创稿件】您是否还在手动对数据库执行各种脚本?您是否还在浪费时间去验证数据库脚本的正确性?您是否还需要将...【详细内容】
2021-12-22    51CTO  Tags:Liquibase   点击:(3)  评论:(0)  加入收藏
场景描述:由于生产环境的表比较复杂,字段很多。这里我们做下简化,只为说明今天要聊的问题。有两张表 tab1,tab2: tab1 数据如下: tab2 数据如下: 然后给你看下,我用来统计 name=&#3...【详细内容】
2021-12-20  Bald    Tags:SQL   点击:(5)  评论:(0)  加入收藏
前言知识无底,学海无涯,知识点虽然简单,但是比较多,所以将MySQL的基础写出来,方便自己以后查找,还有就是分享给大家。一、SQL简述1.SQL的概述Structure Query Language(结构化查...【详细内容】
2021-12-16  谣言止于独立思考    Tags:SQL基础   点击:(13)  评论:(0)  加入收藏
前言作为一名测试工程师,工作中在对测试结果进行数据比对的时候,或多或少要和数据库打交道的,要和数据库打交道,那么一些常用的 SQL 查询语法必须要掌握。最近有部分做测试小伙...【详细内容】
2021-12-14  柠檬班软件测试    Tags:SQL   点击:(15)  评论:(0)  加入收藏
话说C是面向内存的编程语言。数据要能存得进去,取得出来,且要考虑效率。不管是顺序存储还是链式存储,其寻址方式总是很重要。顺序存储是连续存储。同质结构的数组通过其索引表...【详细内容】
2021-12-08  小智雅汇    Tags:数据存储   点击:(17)  评论:(0)  加入收藏
概述DBConvert Studio 是一款强大的跨数据库迁移和同步软件,可在不同数据库格式之间转换数据库结构和数据。它将成熟、稳定、久经考验的 DBConvert 和 DBSync 核心与改进的现...【详细内容】
2021-11-17  雪竹聊运维    Tags:数据库   点击:(26)  评论:(0)  加入收藏
一、前言 大家好,我是小诚,《从0到1-全面深刻理解MySQL系列》已经来到第四章,这一章节的主要从一条SQL执行的开始,由浅入深的解析SQL语句由客户端到服务器的完整执行流程,最...【详细内容】
2021-11-09  woaker    Tags:SQL   点击:(35)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条