使用DataV创建可视化大屏

数据可视化

数据可视化:是指将相对复杂的数据通过可视的,交互的方式进行展示,从而形象、直观的表达数据蕴含的信息和规律。

数据可是话的目的:

1展示:用数据展示企业特色,企业形象传播,峰会论坛站台,嘉宾访客接待。

2驱动:用数据驱动业务发展,查看业务实况,业务监控预警,驱动内部响应。

3洞察:用数据洞察预测未来,多维数据呈现,辅助数据洞察。

可视化大屏种类

展示类,分析类,监控类。

展示类大屏:用于领导、嘉宾接待或业务交流类活动。偏重于展示业务信息结构以及业务亮点。重点需要梳理业务相关信息架构,平铺布局,配合视觉元素,串联讲解准备脚本。

分析类大屏:展示数据关联及分析结果,为多人员讨论决策提供帮助,通过页面展示细粒度较数据,通过交互实现数据串联,展示关联性最高且为关键的内容,多用于讨论决策,对整体行业有一定的任职,理解数据之间的相互关系。

监控类大屏:为公司内部人员或相关运维人员提供监控信息,展示业务整体概况,达到对业务的试试监控及调度的目的,除概况外还需要展示分析结果,并给出优化方案。比较依赖行业经验,在信息设计时会以业务方为主导。

DATAV介绍即基本操作

DATAV是一款阿里云的数据可视化在线工具,通过拖曳式的操作,使用数据连接、可视化组件库、行业设计模板库、多终端适配与发布运维等功能,让非专业人员也可快速将数据的价值通过是视觉进行传达。

特点:

1.多种精美模板:可直接使用多种场景下的专业可视化模板。

2.多种图标组件:多种图标自由搭配,传统图表、地图、拓扑图等。

3.多种数据源接入:支持RDS、ADS、静态文本、本地文件CSV、在线API等,且支持动态请求,可实现各类大数据实时计算、监控的需求,充分发挥大数据计算的能力。

4.播控、多屏适配与发布:针对PC大屏端的各种分辨率适配与拉伸,播放控制等。创建的可视化应用可以发布共享,没有购买DATAV的产品用户也可以访问到应用,企业版可以设置访问密码。

5.本地化运行部署

6.支持二次开发,支持js

数据可视化要考虑的问题

1.解决什么问题

2.要表达什么

3.是否了解业务

4.是否可以实现

5.什么场景下使用

6.目标用户是谁?

7.他们需要什么?

8.有什么偏好?

9.那些数据可以用,类别关系

10.那些表现方式如何布局

大屏制作流程

1.搜集信息点:了解需求方的目的,以及突出展示的内容

2.了解物理屏:大屏的类型、分辨率、尺寸、比例、环境。

3.处理信息点:整理信息板块,包括核心、重要、详细等部分。

4.信息点可视化:指标类信息点和地理类信息点,选择合适的方式

5.数据预研:了解数据信息、规模、特征、联系

6.绘制原型稿:确定叙事逻辑,选定布局方式,组织可视化组件。

7.绘制视觉稿

Abela’s Folly 四个视觉设计路径:比较【基于时间、基于分类】、分布【直方图、正态分布、散点、曲面】、构成【随时间变化:少数周期、多周期,静态:饼图、瀑布】、联系【散点、气泡】

STORYTELLING数据+视觉叙事

设计原则:

1.大小适配、主次分明:突出层次结构,用3-6个小标题来表示。用边框把同类数据放在一起,优先的放上方。

2.宏微兼顾,动静结合:KPI都要有细节来解释。

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
对于使用Vue来实现DataV可视化大屏,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Vue CLI,如果没有安装,可以通过以下命令进行安装: ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目,可以使用以下命令: ``` vue create datav-visualization ``` 3. 进入到项目目录中: ``` cd datav-visualization ``` 4. 安装DataV可视化库,可以使用以下命令: ``` npm install @jiaminghi/data-view ``` 5. 在项目中引入DataV可视化组件。你可以在`main.js`文件中添加以下代码: ```javascript import Vue from 'vue'; import App from './App.vue'; import DataV from '@jiaminghi/data-view'; Vue.use(DataV); new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 6. 创建一个新的组件用于展示DataV可视化大屏。你可以在`src/components`目录下创建一个新的组件文件,例如`DataVScreen.vue`,然后在该文件中编写DataV可视化大屏的代码。 7. 在需要展示DataV可视化大屏的地方使用该组件。例如,在`App.vue`文件中添加以下代码: ```vue <template> <div id="app"> <DataVScreen /> </div> </template> <script> import DataVScreen from './components/DataVScreen.vue'; export default { name: 'App', components: { DataVScreen, }, }; </script> ``` 8. 运行项目,可以使用以下命令启动开发服务器: ``` npm run serve ``` 这样,你就可以使用Vue来实现DataV可视化大屏了。当然,具体的可视化效果和功能需要根据你的需求进行定制和开发。希望对你有所帮助!如果有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

银行上班的法学程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值