DataV构建大屏(全屏)数据展示页面

简介: DataV构建大屏(全屏)数据展示页面

官方文档地址:DataV

1.安装组件库

npm install @jiaminghi/data-view

2.使用

全局引入

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

按需引入

按需引入仅支持基于ES moduletree shaking,按需引入示例如下:

import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

3.实现

(1)全屏容器

全屏容器可以根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。浏览器全屏后,全屏容器将充满屏幕。

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

注意:使用前请注意将bodymargin设为0,否则会引起计算误差,全屏后不能完全充满屏幕。

(2)边框

官方文档中给出了边框的使用以及使用效果。

所有边框均支持自定义颜色及背景色,方法如下

<dv-border-box-1 :color="['#0DFFF1','#0E466C']" backgroundColor="blue">dv-border-box-1</dv-border-box-1>

(3)loading加载

<dv-loading>Loading...</dv-loading>


(4)装饰

SVG元素绘制,增强视觉效果,官方文档中有使用效果

所有装饰均支持自定义颜色,方法如下

<dv-decoration-1 :color="['red', 'green']" />

(5)图表

图表组件基于Charts封装,只需要将对应图表option数据传入组件即可。

<dv-charts :option="option" />

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
打赏
0
0
0
0
10
分享
相关文章
低空经济新基建!DataV Atlas 如何用大模型玩转空间数据?
阿里云DataV Atlas推出搭载通义千问最新2.5 Max大模型「时空SQL智能小助手」,通过自然语言生成专业SQL,简化空间数据分析流程,助力智慧农田、城市低空交通及应急调度等领域,推动精准决策和智能化管理。零门槛体验空间智能分析革命,开启“会思考的天空网络”新时代。
209 4
低空经济新基建!DataV Atlas 如何用大模型玩转空间数据?
数据团队必读:智能数据分析文档(DataV Note)五种高效工作模式
数据项目复杂,涉及代码、数据、运行环境等多部分。随着AI发展,数据科学团队面临挑战。协作式数据文档(如阿里云DataV Note)成为提升效率的关键工具。它支持跨角色协同、异构数据处理、多语言分析及高效沟通,帮助创建知识库,实现可重现的数据科学过程,并通过一键分享报告促进数据驱动决策。未来,大模型AI将进一步增强其功能,如智能绘图、总结探索、NLP2SQL/Python和AutoReport,为数据分析带来更多可能。
113 21
从模型托管到交互开发:DataV 如何简化三维 Web 应用构建?
从模型托管到交互开发:DataV 如何简化三维 Web 应用构建?
地图不只是导航:DataV Atlas 揭示地理数据的深层价值
地图不只是导航:DataV Atlas 揭示地理数据的深层价值
地图不只是导航:DataV Atlas 揭示地理数据的深层价值
随着互联网场景的快速衍生,打车、外卖、智能驾驶等领域的空间数据爆发式增长,海量数据分析成为日常需求。然而,传统地图服务面临性能、安全和成本挑战。为此,我们推出「DataV Atlas 地理数据服务」,提供高效、安全、易用的地理数据解决方案。通过简单的 SQL 查询即可生成专业地理服务,支持多源数据整合、实时更新与分析,确保数据安全,并深度集成 DataV Board 数据看板,实现一键上屏和交互式分析。适用于大屏展示、城市规划等多种场景,助力企业轻松挖掘空间数据价值。
239 6
DataV AI助手小技巧-如何制作PPT数据地图
“数据地图”是PPT汇报地区业务数据的最佳形式之一;以往制作数据地图需要用户有一定的编程和数据处理基础,制作门槛较高;随着DataV整合通义千问大模型能力之后,不懂编程和设计的用户也可以借助AI助手“零代码”制作数据地图,真正实现了人人可用的地图数据可视化。 进入大模型AI时代,人人可以变成职场跨界多面手!
11429 2
DataV AI助手小技巧-如何制作PPT数据地图
见证数据的视觉奇迹——DataV Atlas
阿里云DataV的DataV-Atlas是一款专注于地理数据可视化的工具,提供时空数据分析和地图发布功能,适合快速创建地图并分享。与ArcGIS Server相比,DataV.GeoAtlas更侧重于数据可视化和云服务集成,适合非专业用户,而ArcGIS Server是全面的GIS服务平台,适合复杂分析和定制化应用。用户可通过阿里云免费试用DataV-Atlas,体验包括数据上传、地图制作和分析在内的功能。
见证数据的视觉奇迹——DataV Atlas
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
用 DataV 展示 Prometheus 数据
本文介绍了如何将 Prometheus 数据接入 DataV 进行可视化展示。如果使用的是阿里云可观测监控中的 Prometheus 实例,或者自建的 Prometheus 开放了公网可访问的 HTTP API,那么可直接通过 API 将数据接入 DataV 展示。
485 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等