同事用10分钟给公司做了一套数据大屏,实力选手非他莫属!

数据可视化大屏是什么?

数据可视化大屏是一种将大量数据以图形、图表、地图等直观形式展示在大屏幕上。它通常被应用于企业的监控中心、会议室、展厅等场所,用于实时展示企业的关键业务指标、运营数据、市场趋势等信息。

今天给大家分享用JVS-智能BI如何制作炫酷的数据大屏,建议收藏。

此处省去数据上传和数据加工的步骤......

数字大屏设计

设计布局——大屏设计器

根据业务需求,设计出符合企业风格的数据大屏布局。这包括选择合适的图表类型、颜色搭配、字体大小等。

①:便捷的操作按钮,包括 重复、撤销重复、拖动画布、清除、删除、锁定预览等操作按钮

②:组件配置面板,点击“展开”按钮,将弹出配置界面

③:属性配置面板,点击“展开”按钮,将弹出面板配置界面

④:状态切换栏,其中包括“母版”、“页面平铺”、“新增页面”操作

⑤:页面设计画布区域

⑥:页面操作配置,包括“明亮/暗光”切换,“预览”、“发布为模板”和保存按钮

明亮模式

暗光模式

提供多种图表、地图、控件、形状图形、素材库等可视化组件,满足企业不同的数据展示需求

支持实时数据接入和更新,确保数据大屏展示的始终是最新数据。

交互式设计,用户可以通过简单的拖拽和配置,快速搭建出符合自己需求的数据大屏。

画布

大屏配置的界面是可以包含多个页面的,类似于PPT的母版,多个“画布”之间是可以通过模板进行控制相同的内容,每个页面是可以有多个组件组成,每个组件是按照图层重叠的方式进行构建。

数字大屏使用场景

商业展示

  • 企业形象宣传:通过高清大屏展示企业文化、产品特色及优势,提升品牌形象。
  • 产品推广:动态展示产品功能、使用场景及客户评价,吸引顾客注意力,提高销售转化率。
  • 会议活动:在大型会议、展览或活动中,作为信息展示和互动的中心平台,增强现场氛围。

展览展示

  • 博物馆、科技馆:用于历史文物、科技成就的数字化重现,提升观众的参观体验。
  • 艺术馆:展示艺术作品,结合AR/XR技术,让观众沉浸在艺术的世界中。

教育领域

  • 学校教学:展示教学内容、学生作品及互动教学,提高学生的学习兴趣和参与度。
  • 远程教育:作为在线课程的直播与互动平台,实现师生之间的实时交流。

公共服务

  • 政务服务大厅:提供智能推送服务入口,完成业务咨询、资讯推送、服务引导等功能。
  • 城市智能运营中心:用于日常监测、分析判断、应急指挥等,提升城市管理效率。

娱乐休闲

  • 商场、机场:作为广告发布和互动娱乐的平台,提升顾客体验,增加商业价值。
  • 体育场馆:展示赛事信息、运动员风采及观众互动内容,增强现场氛围。

适用特点

数字化大屏之所以能够在多个领域得到广泛应用,主要得益于其以下几个显著特点:

  • 高清晰度显示:数字化大屏采用高分辨率显示技术,色彩还原度高,画面清晰细腻,为观众带来高品质的视觉体验。
  • 内容丰富多样:支持文字、图片、视频、动画等多种形式的内容展示,通过特效和动画效果增强视觉效果,使展示更加生动、形象。
  • 交互性强:可与观众进行互动,如触摸屏幕操作、参与互动游戏等,增强观众的参与感和体验感。结合AI数字人技术,还能实现更加智能化的交互体验。
  • 信息量大:能够同时展示大量信息,如数据、图表等,帮助观众在短时间内快速了解和掌握所需内容。
  • 灵活多变:可根据不同的展示需求进行定制化设计,调整显示内容、布局、颜色等,使展示更加符合主题和风格。同时,支持多数据源集成和数据自动刷新,确保信息的实时性和准确性。

在线demo:http://bi.bctools.cn

gitee地址:https://gitee.com/software-minister/jvs-bi

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个使用 Vue 2.x 编写的数据大屏的示例代码,你可以参考: ```html <template> <div class="data-screen"> <div class="data-screen-header"> <h1>{{ title }}</h1> <h2>{{ subtitle }}</h2> </div> <div class="data-screen-content"> <div class="data-screen-chart"> <echarts :options="chartOptions" /> </div> <div class="data-screen-table"> <table> <thead> <tr> <th v-for="(col, index) in tableCols" :key="index">{{ col }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in tableRows" :key="index"> <td>{{ row.date }}</td> <td>{{ row.value }}</td> <td>{{ row.rate }}</td> </tr> </tbody> </table> </div> </div> </div> </template> <script> import echarts from 'echarts' import 'echarts-gl' import 'echarts-wordcloud' import 'echarts-liquidfill' import 'echarts-liquidfill/src/liquidFill.js' import 'echarts-liquidfill/src/liquidPath.js' export default { name: 'DataScreen', components: { echarts }, props: { title: { type: String, default: '数据大屏' }, subtitle: { type: String, default: '' }, chartOptions: { type: Object, default: () => ({}) }, tableCols: { type: Array, default: () => (['日期', '数值', '增长率']) }, tableRows: { type: Array, default: () => ([]) } } } </script> <style scoped> .data-screen { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f5f5f5; } .data-screen-header { margin-bottom: 20px; text-align: center; } .data-screen-header h1 { font-size: 32px; font-weight: bold; } .data-screen-header h2 { font-size: 24px; } .data-screen-content { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: calc(100% - 100px); } .data-screen-chart { width: 70%; height: 100%; } .data-screen-table { width: 30%; height: 100%; overflow: auto; } .data-screen-table table { width: 100%; border-collapse: collapse; } .data-screen-table th { padding: 10px; font-size: 16px; font-weight: bold; text-align: center; background-color: #f5f5f5; border: 1px solid #e0e0e0; } .data-screen-table td { padding: 10px; font-size: 14px; text-align: center; border: 1px solid #e0e0e0; } </style> ``` 这个组件包含一个标题、副标题、一个 Echarts 图表和一个表格。你可以通过 `title` 和 `subtitle` 属性来设置标题和副标题,通过 `chartOptions` 属性来设置图表的配置选项,通过 `tableCols` 和 `tableRows` 属性来设置表格的列和行数据。 注意,你需要先安装并引入 Echarts 库,这里的示例代码是在 `main.js` 中引入的: ```js import Vue from 'vue' import App from './App.vue' import echarts from 'echarts' Vue.prototype.$echarts = echarts new Vue({ render: h => h(App) }).$mount('#app') ``` 当然,这只是一个示例代码,你需要根据具体需求来编写真实的数据大屏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

jonyleek

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

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

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

打赏作者

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

抵扣说明:

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

余额充值