前端通過什麼技術可以繪製這樣炫酷的數據顯示界面呢？
可以直接用 H5 + JS + CSS 等技術實現，但是實際情況，從頭開始顯然不現實，你可以站在「巨人」的肩膀上。
1 ECharts
ECharts 是百度開源的前端互動式圖表庫，有非常多開箱即用的圖表，功能強大，社區活躍，文檔資源豐富。已經由百度貢獻給了 Apache 開源基金會，算是同類產品中非常優秀的了。
使用非常簡單，例如，繪製一個折線圖。
ECharts 的設計理念是配置式的，也就是繪製圖表理論上不需要編寫代碼（除了初始化），只需要提供一個配置對象即可，所有的內容都可以通過配置調整。而且呈現的內容是互動式的，並且可以通過主題整體更換配色。
上面的例子非常簡單，下面來點複雜的。
上面的圖片均來自官方例子，官方例子庫已經提供來幾十種圖表的數百種案例，基本可以先選擇想要實現的效果，然後模仿生成配置來實現。
Examples - Apache ECharts (incubating)?www.echartsjs.com2 AntV
AntV 是螞蟻金服開源的數據可視化解決方案，包含了一系列開源庫，如 G2 可視化引擎，G2Plot 圖表庫，G6 圖可視化引擎，F2 移動可視化引擎，Graphin 圖分析組件，ChartCube 在線圖表製作，L7 地理空間可視化框架。
功能強大，涵蓋面也非常廣。例如 G2Plot 是圖表庫，對標的就是 ECharts，而 G2 是可視化引擎，是更低級但功能更強大的 API，可以理解為繪圖庫。AntV 的設計理念是聲明式，而 G2 是基於一套比較成熟的圖形語法《The Grammar of Graphics》(Leland Wilkinson 著) 開發的。
下面是使用 G2Plot 繪製折線圖。
官方也有非常完善的文檔和案例庫。
AntV?antv.vision
3 HighCharts
HighCharts 也是比較著名的開源圖表庫，個人非商業使用免費。語法也是和 ECharts 差不多的配置式。
官方也提供了非常豐富的文檔和案例庫，有中文。
https://www.highcharts.com/demo?www.highcharts.com
4 D3
D3 是另一款非常著名的互動式繪圖引擎，也算是偏底層繪圖的庫，類似於 G2。
繪圖功能非常強大和靈活，但是因為偏底層，所以實現代碼量較多。
官方文檔和案例庫也是非常豐富的，不過都是英文的。也有用戶中文翻譯的文檔。
Gallery?observablehq.com
先介紹這麼多，上面的只要掌握一款，基本上就能實現你需要的可視化功能。
總結一下
- 如果需要快速上手，且繪製圖表都比較常見，推薦使用 ECharts。
- 如果需要往這方面深入研究，且應用平台比較多，圖表需要非常個性化，推薦使用 AntV 或者 D3。
- ECharts 入門簡單，上手容易，但是想要實現個性化的圖表就有點困難。
- AntV 有一套理論基礎，入門比較難，但是上手之後多款產品覆蓋面廣，個性化定製比較容易。
- HighCharts 入門簡單，但是商業使用需要授權。
- D3 入門比較難，但是上手之後個性化定製比較容易。
有很多數據可視化的開源庫，這裡首推一個 echarts
https://www.echartsjs.com?www.echartsjs.com有中文文檔，易上手，對國人比較友好，而且非常強大，做一個你說的那種頁面絕對夠用了。
目前的數據可視化大屏工具是用組件開發的，這也降低了學習門檻，非專業的工程師甚至普通人都可以嘗試開發，更別說還贈送海量模型了，連雙十一天貓的數據大屏都可以授權下載，可見阿里雲是非常下成本的，不過這顯示不出前端開發的優勢，因為這是無代碼開的界面，所以我推薦開發組合工具ThingJS+ThingDepot+Echarts。
數據可視化大屏常見的是可視化場景搭配2D圖表，如果要做3D版本，可以嘗試一款基於webgl的3D庫ThingJS，把場景模型導入二次開發平台，可以基於js開發邏輯進行效果開發，包括一些動畫參數和顏色設置，再加入圖表開發（比如Echarts免費開發庫），輕鬆完成以下3D城市應用構建。
免費學習筆記歡迎領取：ThingJS：一個3D城市地圖應用工具，等你獲取
物聯網3D可視化PAAS平台 - ThingJS 進入
看起來很厲害對不對？其實
表格用echarts
地圖圖用canvas畫甚至簡單的可以用map area
布局就普通的div+css
光效用css濾鏡
你看到的其他哪些很酷炫的畫面用圖片
就能完成了哈哈！
圖表組件庫+html，css，js就可以
現在的可視化的標準要求就是這樣。
圖標庫比如
Echarts
Hightcharts
d3
這些解決你的圖表問題，餅圖，柱狀圖，折線圖。
將他們布局成你要的樣式，就需要html,css,js了。如果用前端框架
那就是vue，react那一套
底層都是使用 SVG 或者 Canvas 實現。
我曾用VUE為主，實現過這種大屏展示項目。
一個職業前端拿到這樣的項目，分析的點不止是外觀（「炫酷」），而要考慮多個維度：
1、總的框架實現。我前面的項目用的是vue+element的一個框架：vue-element-admin。框架幫你搞定很多事，隨便舉2個點：
- 圖標字體。那些小圖標你總要實現吧？
- 自適應。畫面寬度高度總要能適應窗口吧？寬度變化時，每一個格子內的圖表要變化寬度吧？要知道，大家廣泛使用的「百度echarts」在容器改變寬度後，並不會自動刷新，而要自己封閉刷新邏輯。
如果你這個頁面是一個大項目中的一頁，你還要考慮更多的問題。
如果是一個單獨的頁面，你至少還要考慮下面的問題：
2、視覺效果保真度。一般的圖表組件都能做到基本的圖表感覺，比如常見的柱圖、餅圖、全國地圖，但是要做到很獨特，就必然要引入比如漸變色、發光特效、陰影特效，拿echarts為例，這些特效全都是「數據」。細節越多，數據越多，這中間要佔用大量的開發時間。---太漂亮的設計稿，前端是要有所取捨的，甚至可以因為時間或開發費用的關係，會丟棄一些細節。
3、數據層面。這涉及後端數據如何傳送給前端，以及前端進行數據輪換、組件封裝的技巧了。比如那個圖表是要1秒鐘實時變化的，前端就要撰寫相應的刷新機制。
4、小功能點：動畫層面。我寫的項目中還會有一些小的裝飾動畫（與數據展示無關的動畫），比如邊框隔2秒鐘閃一下，或是一個亮點沿窗邊運動一下。這些簡單的要用CSS動畫實現，複雜的要用SVG動畫。如果要集成度高，用起來方便，也要封閉成組件。我試用過另一個框架：DataV。
綜上，這樣的一個頁面，在我看來，還是比較考驗前端綜合能力。
文中提到的兩個框架鏈接：
Vue Element Admin?panjiachen.github.ioDataV?datav.jiaminghi.com
canvas 和svg，可以cover 90%的業務場景，再進階就是webgl了
其實根本不需要前端也可以。可以用下阿里的datav。
DataV數據可視化-阿里雲?help.aliyun.com
推薦閱讀：
※前端掌握這幾點，面試都笑了
※淺談使用 Vue 構建前端 10W+ 代碼的單頁面應用(二)
※前端工程師演算法系列~快速排序
※前端-css小技巧
※webpack4搭建現代Hybird-h5工程