【送書】手把手教你如何制作可視化大屏！
[文末送書福利]
在我們生活和工作中，經(jīng)常會看到可視化大屏，主要用于展示一些匯總信息，那如何制作一個酷炫的可視化大屏呢？
今天帶大家看個github上的案例。
項目地址：https://github.com/yyhsong/iDataV/tree/master/case09
效果如下：
可以看到，這是一個名為“上市公司全景概覽”的可視化大屏，展示內(nèi)容包含了上市公司地域分布、行業(yè)分布、股票情況及預(yù)測、市值排行、上市公司數(shù)等。展示形式包含環(huán)形圖、雙軸圖（柱狀圖+折線圖）、地圖、條形圖、數(shù)值。
接下來，我們從代碼結(jié)構(gòu)拆解一下這個案例。
首先，通過下圖可以看出該項目由5部分組成。
分別是css、data、img、js和html，其中css是設(shè)置一些樣式、data是數(shù)據(jù)來源，打開后可以看到是json格式數(shù)據(jù)，如下圖所示。
Img中是一些圖，我們可以看到，其中有背景圖，也有一些展示的符號圖，如下圖所示。
大屏的header部分：
大屏的背景：
還有一些圖標符號等：
Js文件夾中包含著一些使用到的js文件，如下圖所示。
以上文件夾的內(nèi)容通過html調(diào)用，打開這個index.html，這是一個典型的html：
通過<script> 標簽加載js文件：
Img中的圖片通過img標簽加載：
<img src="img/icon-01.png" />
Data中的json數(shù)據(jù)通過ajax方式加載：
可視化的部分通過ECharts實現(xiàn)，例如：
先初始化：
echarts.init(document.getElementById("mapChart"), "shine");
然后寫個option：
const mapChartOpt = {...}
最后setoption：
mapChart.setOption(mapChartOpt);
如果要從零開始學(xué)習(xí)大屏可視化細節(jié)的制作，推薦閱讀王大偉老師新書《ECharts數(shù)據(jù)可視化：入門、實戰(zhàn)與進階》中第7章 ECharts不同場景Dashboard制作案例。
近些年，大屏數(shù)據(jù)可視化十分流行，在各行業(yè)廣泛應(yīng)用。3月7日19點-20點，王大偉將做客華章直播間，帶大家從零開始用ECharts搭建一個電商行業(yè)的數(shù)據(jù)可視化大屏，該方法可復(fù)用到其他行業(yè)。歡迎掃碼觀看直播。
關(guān)注”前端自習(xí)課“或添加我的微信，回復(fù) ec 獲取抽獎二維碼，抽 3 本。
本次送書活動的開獎日期為：2021-03-08 19：00，祝大家好運。
注意上述送書活動的中獎?wù)哒堄?3 天內(nèi)聯(lián)系我兌獎，逾期無效。再次感謝 華章圖書 對本次活動的大力支持??。
