>>《ECharts數據可視化：入門、實戰與進階》是一本由 ECharts 官方推薦，系統全面、由淺入深、注重實操，帶領讀者快速重新人到高手的書籍。歡迎參與文末贈書活動 。css
在咱們生活和工做中，常常會看到可視化大屏，主要用於展現一些彙總信息，那如何製做一個酷炫的可視化大屏呢？html
今天帶你們看個github上的案例。git
項目地址：https://github.com/yyhsong/iDataV/tree/master/case09github
效果以下：ajax
能夠看到，這是一個名爲「上市公司全景概覽」的可視化大屏，展現內容包含了上市公司地域分佈、行業分佈、股票狀況及預測、市值排行、上市公司數等。展現形式包含環形圖、雙軸圖（柱狀圖+折線圖）、地圖、條形圖、數值。json
接下來，咱們從代碼結構拆解一下這個案例。echarts
首先，經過下圖能夠看出該項目由5部分組成。學習
分別是css、data、img、js和html，其中css是設置一些樣式、data是數據來源，打開後能夠看到是json格式數據，以下圖所示。ui
Img中是一些圖，咱們能夠看到，其中有背景圖，也有一些展現的符號圖，以下圖所示。url
大屏的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搭建一個電商行業的數據可視化大屏，該方法可複用到其餘行業。歡迎掃碼觀看直播。
點擊圖片觀看直播
【贈書福利】
識別下方二維碼，關注公衆號"OSC 開源社區"，聊天窗口回覆「抽獎」二字便可參與（邀請好友助力可提升中獎機率），咱們將從參與者中隨機挑取 5 名幸運讀者，分別包郵贈送一本由機械工業出版社華章公司贊助的《ECharts 數據可視化：入門、實戰與進階》。活動截止到 3 月 8 日 10：00 整，快來參與吧~