大屏可視化demo專題及常見問題 - CSDN

2020-12-27 CSDN技術社區

本文是個人原創，未經允許，禁止轉載！

隨著企業數位化建設的發展，領導對數據價值的利用意識越來越高，數據分析和展現需求日益增長。對於管理層來說，可視化大屏和駕駛艙項目尤其受歡迎，這兩年我遇到的BI項目有半數會有開發管理駕駛艙、大屏的需求。

一方面大屏項目能夠全面的展示經營數據，將管理策略具象化，另一方面通過科技感的數據展現也能提升企業形象。最近剛參與一個金融行管理駕駛艙的開發，在項目中也探索了一些新的心得與經驗分享給大家

可視化大屏開發流程

大屏項目的開發流程大概如上圖，其中重中之重就是前期的需求調研，調研業務需求，討論選取指標，有硬體展示需求的，要對硬體設備需求進行調研及選型

今天我主要教大家如何快速開發一張大屏demo，話不多說，進入正題

大屏demo製作

在完成指標的選取後，我們要針對指標分析的維度，選擇合適的可視化圖表來展示數據信息，確定圖表類型後，排版布局，確定我們的原型圖。

圖表選擇可以參考下圖：

大屏展示的數據指標多，往往需要藉助豐富的圖表才能實現多樣化和美觀，我們選擇圖表時儘量不要過於單一，想辦法多樣化，比如比率可以使用餅圖，餅圖又可以通過多層嵌套實現多層餅圖，還可以使用水球、刻度槽型百分比、以及展示比率的比率，再加上邊框的點綴就可以實現既又實用的效果了。

另外一些3D或者動畫效果的使用，會起到畫龍點睛的效果，讓整張大屏科技感十足，有人會覺得加動態效果肯定又要多寫幾百行代碼了，但其實根本不用！（方法下面講）

常規的大屏模板開發一般選擇直接讀取資料庫，通過js+圖表庫進行繪製，常見比如Echarts、Highchart等等，最終實現前端顯示效果。

但是在BI項目中，我一般會選擇效率更高的報表軟體去開發，成熟的報表軟體支持的圖表類型多，而且有很多配置好的可視化組件可以直接拿來用，雖然部分個性化的需求難滿足，但是絕大部分的常規需求都能滿足，而且開發效率是原始的js+圖表庫的好幾倍，後期維護也更省事。

下面以我熟悉的FineReport為例，教大家如何快速開發一張可視化大屏

FineReport報表 - 專業的企業級Web報表工具​www.finereport.com

下載安裝後，打開設計器，我們要用到的是決策報表開發功能，界面如下：

打開設計器，在伺服器>定義數據連接中定義需要連接的資料庫，即可建立需要的數據連接，並自定義查詢語句創建數據集，從而製作報表。

FineReport 支持多種數據源連接方式，支持通過 JDBC 的方式直接連接資料庫，或者以 JNDI 的方式與應用伺服器共享數據連接，或者以 XMLA 數據連接的方式來與多維資料庫進行連接，還支持通過 JCO 連接 SAP 系統。

新建一張決策報表模板，新建數據集，用sql語句創建大屏所要用到數據集，作為圖表組件的數據來源，為了使模板能夠適應不同解析度的屏幕，我們要給模板設置一下自適應屬性

下一步，常規操作就是將圖表組件拖拽到畫布上，調整布局，在右側圖表屬性中設置好圖表數據連接和圖表顏色、背景、邊框等自定義設置

圖表屬性設置

除了基礎的柱形圖、折線圖、雷達圖等基礎圖表之外，FineReport還提供了視覺效果非常棒的擴展圖表，利用3D和動畫效果，讓圖表組件更加簡潔、炫酷，安裝擴展圖表插件後，直接拖拽到畫布上就能用，不需要寫代碼：

比如這樣的動態輪播儀錶板：

還有這樣的三維地球：

3D場景地圖：

基礎布局完成之後，調整圖表的整體配色，加一些細節點綴。利用圖表預定義顏色功能，可以快速將大屏配色統一：自定義一個配色方案，命名為demo1，選擇默認配色方案為demo1。

推薦一個配色網站：http://colorschemedesigner.com/csd-3.5/ ，對於不太會色彩搭配色的同學很友好。

除了配色以外，還可以給圖表添加一些標題框，動態背景等等，也可以利用js實現一些動態輪播，或者動態效果，在產品的幫助文檔裡有各種功能的詳細代碼，大家直接對著抄就行

如果你覺得這樣的開發方式還不夠簡單，在圖表選擇和細節配置上沒有把握，FineReport還有一個王炸級的功能，叫組件復用功能，我最近剛發現。

安裝組件復用插件（插件免費）後，在設計器右側組件欄，會有很多已經配置好功能、樣式、場景的圖表塊和報表塊，裡面有200個組件供用戶使用，只要拖拽組件塊到畫布上，然後替換業務數據就可以：

指標卡類組件：

指標卡類組件

常用圖表組件：

標題組件：

用上組件復用的功能，大屏開發就變成了簡單的排版工作，不用找視覺設計師，自己拖拖拽拽就能做出非常專業級視覺效果的可視化大屏。

而且除了能夠直接復用這些配置好的組件之外，你也可以自主創建組件，並且分享組件文件給團隊其他人，或者直接從別人的模板裡創建組件，復用到自己的模板，提高開發的效率：

給大家展示一個我純用組件復用裡提供的組件塊製作的一張大屏demo:

最後，老規矩，工具已經案例完了，再給大家送上寶貴的大屏模板，直接替換數據就能用：

1、銀行服務監管大屏：

2、集團綜合管理駕駛艙：

3、機場航班數據大屏：

4、金融業投資管理營收大屏

相關焦點

  • 淺談國內外大屏數據可視化廠商
    大數據產業正在用一個超乎我們想像的速度蓬勃發展，大數據時代的來臨，越來越多的公司開始意識到數據資源的管理和運用，大數據可視化大屏展示被更多的企業青睞，大屏數據可視化是以大屏為主要展示載體的數據可視化設計，大屏易於在觀感上給人留下震撼印象，便於營造某些獨特氛圍，打造儀式感。
  • 大屏可視化:設計尺寸-高級指南
    ，一直是很多設計師苦惱的一件事，很多時候大屏出現的問題，都是因為對設計尺寸沒有一個正確的認識導致。 比如大屏內容呈現不全、拉伸、壓縮、字號小的看不見等等，出現這樣的問題就會浪費時間調整返工，本期我們就來認認真真的討論一下大屏的設計尺寸。
  • 「疫情分析」的數據可視化大屏設計要點
    此刻，疫情仍然在蔓延，如何利用全面、有效，及時的數據和可視化技術準確感知疫情態勢，為決策者、管理人員提供宏觀數據依據，節省決策時間，讓數據可視化成為管理者和時間賽跑的幫手，是快速打贏這場「戰疫」的關鍵。在家為祖國做貢獻期間，設計了該NCP疫情數據可視化大屏，並總結了一些關於數據可視化大屏設計的思考。
  • windows 服務啟動1053專題及常見問題 - CSDN
    1.問題描述今天在啟動一個Windows服務時，服務啟動不了，且提示：1053錯誤那麼是什麼導致了1053錯誤呢？這個問題就能解決了。」 3.實際解決於是根據他的思路，我雙擊了服務程序。結果出現了如下的提示框：
  • 浪潮大數據分析平臺專題及常見問題 - CSDN
    隨著我國經濟社會信息化和自動化水平不斷提高，在政府管理、公共服務、科學研究、商業應用等許多領域也而臨大數據問題，亞需各種有針對性和經濟有效的解決方案，快速提升我國在大數據領域的整體實力和國際競爭力。
  • 「新冠疫情分析管控數據可視化」大屏設計總結
    對於疫情的決策者與監管者來說，通過數據可視化大屏來掌握疫情發展狀況，能夠更為直觀了解全局信息，有效節省決策時間。此刻，疫情仍然在蔓延，如何利用全面、有效，及時的數據和可視化技術準確感知疫情態勢，為決策者、管理人員提供宏觀數據依據，節省決策時間，讓數據可視化成為管理者和時間賽跑的幫手，是快速打贏這場「戰疫」的關鍵。在家為祖國做貢獻期間，設計了該NCP疫情數據可視化大屏，並總結了一些關於數據可視化大屏設計的思考。
  • 數據分析小白如何輕鬆快速的製作可視化大屏
    第六章 數據看板6.1 創建數據看板相信很多人都看過許多酷炫的可視化大屏，在看到的時候，會不會也想要製作這種酷酷的大屏，將數據更加多樣地展示。數據可視化大屏不僅可以集合多個圖表在同一屏幕顯示，而且可以設置成酷炫的可視化樣式，因此，可視化大屏不僅在視覺上讓人感覺震撼，同時通過智能的方式展現企業的數據全貌，綜合分析業務數據，提高了工作效率的同時也有助於企業的商業決策，這些有根據的數據幫助企業進行更為科學的判斷，讓企業避免了決策失誤。
  • f檢驗 matlab專題及常見問題 - CSDN
    15.71985 15.91986 15.71987 16.71988 15.31989 16.11990 16.2MATLAB實現參考網上多個代碼可得https://www.ilovematlab.cn/thread-246993-1-1.htmlhttps://blog.csdn.net
  • 數據可視化系統(大屏)的主要目的是什麼?
    因此，到底如何去抓住數據，數據可視化系統的主要目的就是這個，幫助使用者發揮數據本身的價值，讓使用者去作出正確決策或行動。數據可視化，是將數據信息以直觀的圖表、圖形展示出來的一種表現形式。簡單地介紹一下目前數據可視化項目的流程，去幫助我們理解。
  • iot深圳 nb專題及常見問題 - CSDN
    關注同名公眾號「IoT黑板報」 ，獲取更多物理網資訊及乾貨 關注物聯網領域，尋求報導或投稿請郵件聯繫 jiawd@csdn.net高通驍龍835各項跑分出爐 性能碾壓去年所有旗艦手機@威鋒網 高通最新移動平臺 Snapdragon 835，基本上可以確認是今年旗艦智慧型手機的標配，在驍龍 835 真機到來之前，隨著昨日中國發布會的解禁，越來越多的相關跑分測試也隨之出爐
  • 案例解析:電商大屏數據可視化設計經驗分享
    本文結合大量實際案例，來與大家分享電商類大屏設計的經驗，帶你了解電商大屏的設計技法與思考。數據可視化大屏設計大多以藍色調為主，因為藍色比較容易營造大屏所追求的科技感，所以在眾多行業中運用最廣泛。例如公安系統、城市交通、科技公司、政企單位、製造業等眾多行業。但電商類大屏需要另一種與其他大多數行業不同的調性。
  • android啟動頁設計專題及常見問題 - CSDN
    轉載請註明出處：http://blog.csdn.net/wangjihuanghun/article/details/63255144啟動頁幾乎成為了每個app的標配，有些商家在啟動頁中增加了開屏廣告以此帶來更多的收入。
  • 華為雲電腦 蘋果專題及常見問題 - CSDN
    首1653先華為平板和手機搭配使用會有很多擴展功能，比如兩者同時登陸一個帳號的時候，手機拍攝的照片就可以通過雲空間同步到平板上，這樣一來就可以在平板的大屏幕上欣賞手機拍攝的照片了。還有麒麟970及以上處理器的華為手機和平板，支持一個名為「多屏協同」的功能，手機的屏幕可以直接無線投屏到平板上顯示，甚至可以在平板上控制手機。這個功能在編輯手機文檔、手機和平板之間傳遞文件時非常有用。
  • 大屏當道:十大優秀數據可視化作品洞悉行業前沿趨勢
    這兩年隨著大數據的發展，數據可視化大屏項目漸漸從原來的政府單位逐漸應用到了企業端，可視化大屏在監控預警、實時指揮、信息公示、公開匯報等應用場景發揮重要作用。億信華辰及鋒而試，將可視分析與各行業業務決策需求相結合，率先開啟了數據可視化各行業領域及應用場景全覆蓋的發展模式。
  • 結合Echarts、Ajax技術實現可視化大屏監控 ThingJS 3d 開發
    接下來，基於數據流設計，利用Echarts可視化技術實現可視化界面展現給用戶。可視化大屏應用案例解析Echarts開發接入ThingJS的3D場景，打造三維可視化大屏應用，可實現空間數據分析可視化，即展示逼真的三維場景，並且提供2D圖錶盤與3D場景的高度耦合，幫助人們基於手動選擇場景，查看實時數據信息，更加迅速有效的認知、掌握並理解信息。
  • html5 平板電腦專題及常見問題 - CSDN
    有時，我們可能會發現自己試圖通過「電源布局」解決信息架構問題。 您的後端開發人員吐出了6列表格數據，因此6列就是您要布局的內容！ I think our first step should _always_be to try to optimize what we're putting in the original table.
  • 方差檢驗專題及常見問題 - CSDN
    衡量一個事件發生與否可能性的標準是概率大小，通常概率大的事件容易發生，概率小的事件不容易發生，在一次隨機抽樣中小概率事件發生的可能性很小，可以視為不會發生。小概率事件是否出現，是統計決策的依據。（小概率事件出現，則拒絕原假設，否則，接受原假設）。
  • 大數據大學排名專題及常見問題 - CSDN
    >就業能力Employability --30%校友成就Alumni Outcomes --20%投資回報率Value for Money --20%研究成果及論文影響力 Thought Leadership --20%師生比 Class & Faculty Diversity --10%商業分析是一門研究商業需求和商業問題的解決方法的學科
  • c++獲取系統日期時間專題及常見問題 - CSDN
    ("%d\n",1+p->tm_mon);/*獲取當前月份,範圍是0-11,所以要加1*/ printf("%d\n",1900+p->tm_year);/*獲取當前年份,從1900開始，所以要加1900*/ printf("%d\n",p->tm_yday); /*從今年1月1日算起至今的天數，範圍為0-365*/}原文：https://blog.csdn.net
  • android布局詳解專題及常見問題 - CSDN
    <include>標籤在設計與設備相關的布局文件時非常重要，例如，將手機橫屏（landscape）和豎屏（portrait）時可以使用不同的布局文件，但有可能橫多視圖的布局是相同的。這樣就可以在res/layout目錄中放置橫屏和豎屏都需要用到的布局，而在res/layout-land和res/layout-port目錄中的布局文件可以使用<include>標籤引用這些布局。 2.布局別名　　在res目錄下的所有子目錄都是資源目錄，例如res/values、res/layout等。