Datav简介：

组件库基于Vue ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用。
文档链接：Datav-Vue 大屏数据展示组件库
代码下载：datav大屏数据展示

效果展示：

详细步骤：

搭建vue-cli脚手架

这里我直接基于vue-admin-template模板开发，vue-admin-template下载地址:vue-admin-template
你也可以手动创建，具体步骤如下：

使用npm安装vue

 npm i -g @vue/cli

创建Vue项目

vue create datav-project

安装Datav

搭建好项目之后安装Datav

npm install @jiaminghi/data-view

全局注册组件

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

主要项目目录如下：

index.vue为主页面，其它为各个组件的页面

全屏展示

全屏展示数据需要使用全屏容器

<dv-full-screen-container>/dv-full-screen-container>

我们将需要展示的内容放在里面即可

Datav有多种类型组件可供使用，具体可参考文档使用：

边框
带有不同边框的容器
装饰
用来点缀页面效果，增加视觉效果
图表
图表组件基于Charts封装，轻量，易用
其他
飞线图/水位图/轮播表/…

编写各个组件

顾名思义，其组件名就是对应屏幕上的位置
然后在index.vue主页面中引入各个组件并编写样式

使用开源Datav——结合vue实现大屏数据展示案例相关推荐

vue疫情大屏数据展示+数据导出+地图图片下载
不废话,先上效果图审美有限下午5点开工去掉吃饭时间我的审美也只能让我做到这一步哈哈有需要可以去github下载 github上代码是不加注释的看注释在这个文章 github地址 https ...
基于VUE+Echarts大屏数据展示150套 (集合)
大屏数据展示，5.5寸大屏幕手机更受消费者喜爱
智能手机从出现到热销,再到主导人们的生活,并没有花费太长时间.功能越来越多,屏幕越来越大,人们曾经一度认为手机的尺寸可能无限变大,乃至于取代电脑.但是,人们对手机便携性的需求毕竟还是相当高的,所以手机 ...
大数据 / 大屏数据展示模板
大数据 / 大屏数据展示模板:https://gitee.com/hnustbd/DaShuJuZhiDaPingZhanShi/tree/master/
echarts——实现大屏数据展示——基础积累（超详细）
echarts--实现大屏数据展示--柱状图+堆叠柱状图+table表格等功能的使用最近在做大屏数据展示,样式真的超级好看.但是细节处理也是比较麻烦的. 最终效果图如下: 下面对我遇到的几个知识点进 ...
拼接大屏数据展示_大屏数据可视化设计注意事项
大屏数据可视化是以大屏为主要展示载体的数据可视化设计.大屏的特点,使得在用户观感上留下独特的印象,同时,大屏所具备储存更大的信息量,对于大屏企业来说重点主要在于将信息全面的显示在屏幕上,关注于画质的清 ...
拼接大屏数据展示_可视化大屏的UI设计是根据哪几个方面来进行？
随着大数据产业的发展,越来越多的公司开始意识到数据资源的管理和运用,特别是一些中.大型企业,在日常中会经常用到可视化大屏,这个时候就需要UI设计师能呈现出相应的视觉效果.下面,就给大家介绍一下可视化大 ...
vue 大屏数据展示组件
http://datav.jiaminghi.com/guide/ 事例:
拼接大屏数据展示_AOC×泰凡科技丨用拼接屏，实现大数据可视化展示
摘要:创新驱动未来,引领智慧发展随着互联网+及信息产业的发展,大数据是继云计算.物联网之后信息技术领域又一颠覆性变革.大数据已逐渐覆盖各行业领域,不断推动行业发展进程.作为一家专注于大数据运营的科技 ...

使用开源Datav——结合vue实现大屏数据展示案例