Stories

Detail Return Return

私有化的零代碼可視化大屏設計器,獨立應用! - Stories Detail

數據可視化大屏是一種將複雜數據以圖形、圖表、地圖等直觀形式展示在大屏幕上的技術工具,它的核心價值在於能夠將複雜的數據轉化為直觀視覺信息。它廣泛應用於企業的監控中心、會議室和展廳等場所,能實時展示關鍵業務指標、運營數據和市場趨勢等信息。
圖片
數據可視化大屏強大而靈活,滿足多樣化需求,具體表現在:
• 高清晰度顯示(採用高分辨率顯示技術,色彩還原度高)
• 內容豐富多樣(支持文字、圖片、視頻、動畫等多種形式)
• 交互性強(可與觀眾進行互動,增強參與感和體驗感)
• 信息量大(能夠同時展示大量信息,幫助觀眾快速瞭解和掌握所需內容)
• 靈活多變(可根據不同的展示需求進行定製化設計)
一套精美的可視化大屏如果用傳統的方式,那麼會涉及多個環節、需要多技術協同的複雜過程才能實現。
今天我想分享的是一套可以通過拖拽配置化實現可視化大屏的工具,它實現了組件配置化,不需要寫代碼。
以下配置所用到的是JVS-智能BI,它是一款自助式數據分析工具,提供了從數據接入、到數據整合、再到數據清洗加工、再到數據可視化的全鏈路方案,整個過程不需要寫代碼,不需要掌握SQL、Python和R這些技能。
首先是準備好需要可視化展示的數據,這裏我就不詳細介紹數據的接入和ETL數據集清洗加工的過程了,如果對這些操作有興趣也可以評論區留言,後續我再出這些功能操作的説明。
我們來看下可視化大屏的配置步驟。
1、進入可視化大屏設計頁面
系統提供有3種創建方式:
①.新建大屏:創建空白的大屏,從零開始搭建個性化大屏。
②.上傳本地大屏模板:將其他導出的大屏文件,通過導入功能,上傳後進行二次編輯或者修改。
圖片
③.模板中心進入編輯:從模版中挑選適合的模板,可以自定義修改,能滿足不同用户的多樣需求。
圖片
2、進入大屏設計頁面
圖片
3、組件説明
左側是各類組件庫,有基礎、圖表、控件、形狀、素材庫
• 有文本組件、地圖、時間組件、跑馬燈、數字翻牌器等,能滿足不同的信息展示需求。
• 圖表,提供了多種圖表類型,通過拖拽字段的方式配置數據,可以自定義展示條數和排序方式,也可以設置條件過濾,對數據進行篩選。可以生動詮釋數據邏輯。
• 基礎形狀,主要用於一些特殊的視覺效果創作,可以設置圖像的透明度與顏色邊框。
圖片
素材:大屏內的許多修飾組件都是在素材庫的,除了可以使用已經提供的修飾組件外。還可以上傳素材,使用自己的素材進行裝飾。
圖片
4、組件的配置
通過拖拽組件到中間畫布進行配置佈局
圖片
右側是配置面板,可以設置組件的透明度、配色方案、背景顏色、圖例設置、X軸、Y軸等具體配置
例如:點擊組件,在右側,進入自定義樣式配置頁面,選擇符合頁面要求的填充顏色。
圖片
5、交互設計
交互功能是對圖表的行為控制,比如觸發單擊雙擊等動作時,圖表對應做出的反應。
常見的交互包括:
• 鼠標懸停:當用户將鼠標懸停在圖表上時,顯示詳細的數據信息
• 點擊操作:支持用户點擊圖表中的元素,進行下鑽、篩選等操作
• 觸摸屏支持:確保在觸摸屏設備上操作簡單易用,響應迅速
圖片
6、大屏背景
背景圖的選擇方式有兩種,上傳圖片或者選擇系統內置圖片都可以
圖片
7、權限管理
每個大屏都可以設置獨立的權限管理,可添加多個權限組,對不同的用户配置不同的操作權限
圖片
8、查看和下載
編輯完成後,可以預覽大屏效果,也可以下載大屏到本地
圖片
demo示例
圖片

圖片

圖片

圖片

圖片
在線demo:http://bi.bctools.cn
gitee地址:https://gitee.com/software-minister/jvs-bi

user avatar yizhidanshendetielian Avatar yangrd Avatar bug1412 Avatar jzxstudio Avatar xiaoxiansheng_5e75673e1ae30 Avatar swifter Avatar jame_5f6d5e99aea15 Avatar nocobase Avatar ruyadehuangdou Avatar
Favorites 9 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.