文末有福利，你不會失望的

隨著企業數字化建設的迅速發展，各行各業都開始注重資料的價值，資料分析和視覺化展現的需求日益增長。對於管理層來說，視覺化大屏尤其受歡迎和重視。

一方面大屏專案能夠全面展示業務資料，另一方面透過酷炫的資料展現大屏也能提升企業形象，因此許多企業都偏好會製作視覺化大屏的員工。

前幾天，老李也分享了一些視覺化大屏模板給大家，但還是有很多朋友 不懂得怎麼從0-1製作一張視覺化大屏，今天老李就手把手教給大家。

瞭解大屏製作流程

一張視覺化大屏的製作流程主要分為五個步驟：需求調研、原型設計、模板開發、大屏除錯、上線執行。其中， 前期的需求調研是最最重要的，因為只有明確了你需要展示哪些資料指標，後面的步驟才有意義。

廢話不多說，讓我們按照上面的步驟來詳細展開。

製作大屏

• 需求調研

一般來說， 需求調研時需要確定資料指標，這些指標其實也基本是固定的，老李之前也總結歸納過 網際網路、零售、電商、線上教育、餐飲、保險、銀行、製造業、物流等9大行業，以及財務、人力資源、廣告、渠道等4個主題 業務場景的指標體系，有需要的朋友可以看我之前的文章。

最全資料指標體系集合！覆蓋9個行業4個業務場景，全是乾貨

• 原型設計

這一步通常最重要的工作就是 確定你想如何表達你的資料，換句話說就是你需要選擇正確的圖表去展示資料，讓看大屏的領導一目瞭然。

這裡我分享了一張 圖表的思維指南供大家參考，建議收藏。

• 模板開發

很多企業常規的大屏模板開發會選擇直接讀取資料庫，然後透過js+圖表庫繪製，常見比如Echarts、Highchart等，最終實現前端顯示效果。這樣做不是不可以，但是開發效率和後期維護會比較浪費時間。

所以我一般會用 更高效率和現成的報表軟體去製作這種視覺化大屏，省時省力。熟悉我的老粉也清楚，我就比較常用報表軟體FineReport中的決策報表功能去製作大屏，除了省時省力外，還極其省心。

以前做大屏的時候就希望有已經設定好的元件能夠儲存下來直接用，結果後來還真給我在FineReport裡找到了這個功能，叫 元件複用功能。

其實就是安裝元件複用外掛後，在設計器右側元件欄，會有很多已經配置好功能、樣式、場景的圖表、報表塊，有200個左右的元件可以免費使用，只要拖拽元件塊到畫布上，然後替換業務資料就可以，非常適合圖省事的技術人員和小白來操作。

• 大屏除錯

通常來說，大屏除錯會有自適應佈局和絕對佈局兩種。自適應佈局是 如果修改某個元件的大小，相鄰元件的大小也會發生變化，大小變化表現為此消彼長。

絕對佈局是元件可以重疊，改變一個元件的大小，其他元件的大小不會受影響。

不同的佈局會讓報表在瀏覽器端呈現不同的自適應效果，大家可根據應用場景來選擇合適的佈局方式。

• 上線執行

這一塊就沒什麼好說了，把前面四步紮實做好，上線執行穩穩的不是個事兒。

還是老規矩，給大家準備了30張包含人力、銷售、財務等大屏模板，可免費自取。