在我們生活和工作中,經常會看到可視化大屏,主要用於展示一些彙總信息,那如何製作一個酷炫的可視化大屏呢?
今天帶大家看個github上的案例。
項目地址:https://github.com/yyhsong/iDataV/tree/master/case09
效果如下:
可以看到,這是一個名爲“上市公司全景概覽”的可視化大屏,展示內容包含了上市公司地域分佈、行業分佈、股票情況及預測、市值排行、上市公司數等。展示形式包含環形圖、雙軸圖(柱狀圖+折線圖)、地圖、條形圖、數值。
接下來,我們從代碼結構拆解一下這個案例。
首先,通過下圖可以看出該項目由5部分組成。
分別是css、data、img、js和html,其中css是設置一些樣式、data是數據來源,打開後可以看到是json格式數據,如下圖所示。
Img中是一些圖,我們可以看到,其中有背景圖,也有一些展示的符號圖,如下圖所示。
大屏的header部分:
大屏的背景:
還有一些圖標符號等:
Js文件夾中包含着一些使用到的js文件,如下圖所示。
以上文件夾的內容通過html調用,打開這個index.html,這是一個典型的html:
通過<script> 標籤加載js文件:
Img中的圖片通過img標籤加載:
<img src="img/icon-01.png" />
Data中的json數據通過ajax方式加載:
可視化的部分通過ECharts實現,例如:
先初始化:
echarts.init(document.getElementById("mapChart"), "shine");
然後寫個option:
const mapChartOpt = {...}
最後setoption:
mapChart.setOption(mapChartOpt);
如果要從零開始學習大屏可視化細節的製作,推薦閱讀王大偉老師新書《ECharts數據可視化:入門、實戰與進階》中第7章 ECharts不同場景Dashboard製作案例。
近些年,大屏數據可視化十分流行,在各行業廣泛應用。3月7日19點-20點,王大偉將做客華章直播間,帶大家從零開始用ECharts搭建一個電商行業的數據可視化大屏,該方法可複用到其他行業。歡迎掃碼觀看直播。
送書福利:
以爲了回饋各位粉絲對胡哥有話說公衆號的長期關注與支持,特送出兩本前端福利書籍。爲了降低大家的獲獎成本,抽獎方式胡哥也想出了更有意思的中獎方式。
方式一:在留言中會選出一個留言點贊數最多的小夥伴,送出一本
方式二:在留言中隨機抽取一名小夥伴,送出一本,機會都是平等的,只要留言參與就會有獎!
原則上兩種獲獎只能取其一,不能重複獲取呦~
開獎時間:
本週日(3月7日)下午14點整,準時開獎呦~
注意呦:這是胡哥回饋粉絲的福利,所以中獎的小夥伴一定是關注了胡哥有話說公衆號的呀~
以上就是胡哥今天給大家分享的內容,喜歡的小夥伴記得收藏
、轉發
,點擊在看
推薦給更多的小夥伴。
胡哥有話說,專注於大前端技術領域,分享前端系統架構,框架實現原理,最新最高效的技術實踐!
本文分享自微信公衆號 - 胡哥有話說(hugeyouhuashuo)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。