什么是数据可视化大屏?数据可视化大屏的零代码实现过程

什么是数据可视化大屏?

数据可视化大屏是一种可视化展示、可交流、可交互的技术,它将大量复杂的数据以图形、图表、地图等直观的形式展示在大屏幕上。它通常被应用于企业的监控中心、会议室、展厅等场所,用于实时展示企业的关键业务指标、运营数据、市场趋势等信息。和传统静态报表相比,数据大屏在视觉上具有冲击力、信息密度高、能实时更新数据等优势。

数据可视化大屏的实现过程

靠写代码的方式去完成可视化大屏是充满技术挑战的,今天我们用现成的数据可视化工具,JVS-智能BI,拖拖拽拽,不需要写代码,最快半个小时就可以搭建一套精美的可视化大屏。

1、创建大屏

进入大屏设计器进行基础设置:

  • 尺寸设置:JVS-智能BI提供标准尺寸选项,也支持自定义宽度和高度像素值
  • 背景设置:可选择纯色或渐变背景,使用系统内置颜色或自定义色彩
  • 主题设置:选择系统提供的配色主题或创建自定义主题,统一整体风格

2、新建组件

我们可以通过拖拽的方式将各种组件添加到画布中。这些组件包括柱状图、折线图、饼图等图表组件,标题、说明文字等文字组件,以及一些具有特色的 3D 组件。

素材:大屏内的许多修饰组件都是在素材库的,除了可以使用已经提供的修饰组件外。还可以上传素材,使用自己的素材进行装饰。

3、组件设置

选中组件后,右侧配置面板会显示对应的设置选项,包括:

  • 样式配置:系统提供预设样式可自由选择,在自定义样式里,可以自己搭配颜色、透明度、字体、组件大小等等视觉属性

  • 数据配置:支持数据集配置或模拟数据配置两种方式

  • 交互配置:交互功能是对图表的行为控制,比如触发单击双击等动作时,图表对应做出的反应。

常见的交互包括:

  • 鼠标悬停:当用户将鼠标悬停在图表上时,显示详细的数据信息
  • 点击操作:支持用户点击图表中的元素,进行下钻、筛选等操作
  • 触摸屏支持:确保在触摸屏设备上操作简单易用,响应迅速

4、数据的实时更新

需要实时更新的场景,可以设置数据自动刷新频率,确保大屏始终展示最新数据。

5、可视化大屏效果预览

可以下载大屏到本地

通过以上步骤,就可以通过JVS-BI快速搭建出一个功能强大、交互性强的可视化大屏,满足企业在数据分析和展示方面的多样化需求。

全部评论

相关推荐

11-27 22:23
已编辑
百度_前端(实习员工)
【11.21 百度一面】:1:自我介绍2:小程序项目介绍(面试官比较感兴趣这个)3:实习项目简单问了一下4:可视化5:大文件上传整体的思路、断点续传具体怎么实现?6:讲一下transform怎么使用的(提到小程序里面的一个应用)7:react常见hook8:父组件A里面有一个子组件B,子组件B使用useMemo()缓存值,如果A重新渲染,会导致B中useMemo重新计算嘛?        (回答:分情况,要是缓存的值中有父组件传递的props就还是要)9:无限滚动加载和图片懒加载10:拦截器主要做了些什么工作?11:数组常用方法?12:你做了可视化大屏展示,现在有多个大屏,怎么适配各种尺寸呢?(答了媒体查询,为每一个尺寸范围适配不同的比例大小)追问:如果提前不知道大屏的宽度呢答:可以使用flex响应式布局,比如flex 1 自动填充剩下的内容区域13:说一下事件冒泡是什么,怎么阻止冒泡(用e.stopPropagation())14:手搓 轮播图(太久没有写react了,面试官一直耐心指导,最后还是没搓出来,说了一下实现原理)15:反问业务、技术栈、实习生培养方案一面的面试官真的超级好,就我面试以来(七牛云、金蝶、懂车帝)是最好的一个了。一点一点指导,面试用的“如流”这个软件,中间断联了两次(一次网络断开,一次电脑没电直接关机,人傻了直接),结果面试官一点都没生气,还是很耐心的讲面完,10分钟不到,发消息,约二面...【11.24 百度二面】1:自我介绍2:Promise哪些常用方法3:大文件上传4:手写Promise.all (有一点点小缺憾)5:懒加载怎么实现的 (IntersationObserver)6:react的懒加载怎么实现(同上 + React.lazy结合Suspense)7:react常用hook8:useCallback和useMemo说一下9:手撕一个react自定义hook:getPrevieusValue(value) 传入一个值(state),获取他上一次的状态值(用的是map+数组存)面试官:其实可以用ref,因为你现在这个实现的话,依照的是状态,万一不小心改变了状态可能导致页面重新渲染8:3s后页面上显示啥?为啥?const app = () => {const [count, setCount] = useState(0)const [countTime, setCountTime] = useState(0)useEffect(() => {let timer = setTimeout(() => {setCountTime(count)}, 3000)setCount(5);() => clearTimeout(timer)}, [])return (<div>count:{{ count }}countTime:{{ countTime }}</div>)}(答了:分别是5和0,因为react状态是一个快照,他每计算次依照的是当前这一刻的状态(还好之前看过官方文档))9:上一个问题,那我想让都显示5怎么办?(提到用函数式更新、flushAsync、Ref持久化绑定)面试官:也可以在useEffect依赖里面加 count10:redux使用过嘛? 了解过基于redux开发的第三方工具嘛?(不了解)11:为啥使用redux不用useContext呢?12:说一下小程序的分包机制和分包预加载13:手写:数组转成树结构(没写出来[我算法太弱了[苦涩]],说了思路,用递归)const a = [{id: 1, parent: null, name: 'Big'},{id: 2, parent: 3, name: 'hello'},{id: 3, parent: 1, name: 'aloha'},{id: 4, parent: 1, name : 'yes'}];const b = {id: 1,name: 'big',children: [{id: 3,name: 'aloha',children: [{id: 2,name: 'hello',children: null,},],},{id: 4,name: 'yes',children: null,},],};面试官说你思路没问题,然后就给我讲了一遍非递归的实现思路如流这个软件,不知道是不是不适配我的电脑还是啥,面试的时候一直掉线(掉了四五次),开始我还以为我的网有问题,不过好在面试官没有生气,而且手撕题还给我耐心纠错和指导,也是很好的一个面试官【11.27】hr电话正上体育课,刚测完1000m,累成憨憨了,摊在地上结果忽然收到hr的电话,oc,下午1点多快到2点的时候,收到正式offer邮件......【插话】本来二面结束(周一),感觉没戏了,周二到周四整个人都是一个将die的状态,浑身不舒服,也没胃口,觉也睡不好,期间还面了懂车帝、深圳锐明技术,懂车帝面成粑粑了、锐明面的很好,但是这俩截至目前都没有下文面试,运气真的很重要,要是遇到一个恶心人的面试官,神来了也得挂。唯一 一点幸运的是,我做过小程序,刚好和他们组技术栈和业务匹配,同时干小程序的人本身也不多,所以被面试官看上了吧,要是投的其他业务组,一面都得挂
发面经攒人品
点赞 评论 收藏
分享
评论
点赞
1
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务