<a href="http://datav.aliyun.com/share/52285449ec2522c492036058724c151c?spm=0.0.0.0.pokbrk">大屏體驗位址（移動端慎點！）</a>
提醒下大家1月27日是除夕哦，通過時序播放我們可以很明顯的看到春節前後空氣品質的全國分布變化，我就不在這裡分析具體原因了，我這裡僅僅是抛個磚。
那麼如何制作這樣一塊時序大屏呢？接下來為大家揭秘下制作過程。
資料是可視化的原材料，正所謂巧婦難為無米之炊，我們首先要擷取春節期間全國的空氣品質資料。
這裡筆者下載下傳了2017年1月1日至2017年2月2日的全國1497個監測點的資料。
我們打開<code>china_sites_20170101.csv</code>看下資料檔案内容：
由上圖可以看出這裡橫坐标是各個監測站點編号，縱坐标是一天24個時間段對應的各種空氣品質名額，也就是說我們可以通過每個csv檔案擷取一天内每個小時的各個描述空氣品質名額的值。
我們下載下傳該檔案打開看一下：(注意圖中有條資料沒有經緯度資訊，這裡需要補全或者過濾掉)
這樣我們已經下載下傳好所需要的資料（稍後講如何對資料進行處理）。
相信大家在看天氣預報時經常看到類似下面的圖(這裡截取中國氣象網的一張圖)。
這張圖就是根據地面上若幹位置的氣象觀測站的資料利用空間插值的方法制作出來的一張等溫面圖。
看下百度百科的空間插值解釋：
空間插值：空間插值常用于将離散點的測量資料轉換為連續的資料曲面，以便與其它空間現象的分布模式進行比較。
也就是說根據這些已知的監測站點監測出的資料去推算其他任意空間位置的資料，再根據值處在的不同區間範圍去映射對應的顔色就可以得到上面這樣的一張圖。
一張圖讀懂什麼是空間插值（下面的圖是使用datav制作的哦）：
可以很清楚的看到空間插值就是根據離散的已知點去插值出連續的面資料的這樣一個過程。
datav提供了一個輕分析的等值面地圖元件來幫助大家來将已知的矢量點資料制作成栅格區域圖，這裡我們可以利用其來實時插值出全國的空氣品質圖，可以應對一些氣象等行業的可視化需求。
等值面元件特性：
支援自定義插值精度
支援自定義插值權重
支援線性渲染和分段渲染
想要看到一段時間的空氣品質随時序的變化，時間軸元件自然必不可少。
這種需求，細心的datav君已經為大家想到了。
時間軸控件有個重要特性就是支援回調id,利用好這個回調id,我們可以跟其他元件進行關聯，這樣當時間軸的時間變化的同時可以觸發其他元件的資料更新。
當你填寫了正确的回調id,他會在每次時間變化的時候重新觸發一次資料請求，并自動在其他元件對應的api接口的參數清單加上目前回調id及其對應的值。
例如：
初始接口位址：<code>http://127.0.0.1:8888/aqi</code>
回調觸發後：<code>http://127.0.0.1:8888/aqi?date=2017012722</code>(這裡回調id填寫的是<code>date</code>,<code>2017012722</code>對應的時間軸控件的時間序列目前時間段的<code>date</code>字段的值)
同樣回調id也可以對<code>sql</code>語句生效，不過這裡需要使用<code>:</code>加上回調id名稱作為占位。
初始sql: <code>select :date as value;</code>
回調觸發後：<code>select '2017022722' as value;</code>
前面我們已經有了資料利器，這裡我們需要打磨一下資料使其更符合我們使用。
首先分析下我們需要什麼樣的資料，我們看下我們的等值面元件需要的資料格式：
插值點資料：這裡可以看到示例資料是一個包含經度、緯度、值的一個數組，對應我們的需求就是監測站點的經緯度和監測站點對應的某個名額的值。
首先我們如果僅做一天的某個時段的這樣一張等值面圖，例如2017年1月20日的中午12點的關于aqi名額的等值面圖，我們需要知道當天這個時段的每個監測站點的位置也就是經緯度資訊和對應的aqi的值。
相信到這裡大家應該知道要怎麼去處理這些資料了。
寫一段<code>node</code>腳本處理下上面下載下傳的全國監測站點經緯度資訊的csv檔案。
得到監測站點編号為key，站點資訊為value的字典。
截取一段看看：
接下來我們再來處理下2017年1月20日的全國1497個監測點資料，也就是<code>china_sites_20170120.csv</code>這個檔案。
再來一段腳本處理下這個csv，這個csv包含了當天24個小時每個監測站點各個空氣品質名額的資訊，我們将這些資訊提取出來，并根據前面擷取的站點清單經緯度映射表給站點加上經緯度資訊。
這裡将每天的時間段作為key，每個時間段所對應的所有監測站點的aqi資訊和位置等資訊的數組作為對應的值。
看下格式示例：
這樣我們就可以友善的擷取該天每個時間段的資料給等值面元件使用。
根據前面介紹的時間軸的特性，我們如果想要時間軸變化的同時使得等值面的資料也發生變化，那麼我們需要一個接口或者資料庫能根據時間參數來擷取不同時間段的全國各個監測站點的資料。
這裡我們可以寫一個簡單的接口來完成這樣的一個需求。
請求位址：<code>/aqi</code>
請求方式：<code>get</code>
請求參數：
參數名稱：<code>date</code>
參數類型：<code>string</code>, 示例<code>2017012722</code>，時間格式為<code>yyyymmddhh</code>
這裡需要提前處理好上面下載下傳的所有資料,<code>node</code>提供了一個<code>glob</code>子產品可以友善的對檔案夾下資料進行批量處理。
這樣就批量提取出了每天的資料。
我們再利用<code>glob</code>子產品對資料進行一次整合，将檔案名也就是日期作為key，對應内容作為值。
這樣我們就得到了一個<code>all.json</code>這樣一個整合後的檔案。
下面再利用<code>node</code>的<code>express</code>架構初始化一個<code>express</code>項目，然後按照上面的接口需求增加一個簡單的接口：
另外提醒下為了避免跨域請求的問題，需要使用<code>cors</code>子產品，在<code>app.js</code>檔案中增加<code>cors</code>子產品。
這樣接口已經完成，<code>npm start</code>一下，測試下接口通路：
打開datav主面闆，選擇建立可視化。
建立一塊空白大屏并取名。
選擇地圖，添加2d平面地圖元件，删掉預設的子圖層（保留底圖層），然後添加等值面子元件，将地圖元件大小拖拽至合适的大小，設定地圖的中心點和縮放等級。
選擇輔助圖形，添加時間軸元件，調整至合适的位置和大小。
所需主要兩個元件準備完畢，先來添加時間軸的資料吧，我們研究的時間區域選擇2017年1月22日到2017年2月2日的每天的22點。
參照時間軸資料面闆的示例資料，我們造出我們需要的資料。
其中<code>name</code>事件或者時間節點名稱也就是時間軸的軸點顯示的内容，<code>value</code>是對應的時間，<code>date</code>是作為上面介紹的回調id選項使用。
将上面資料替換時間軸資料面闆的靜态資料，再參照下圖配置（主要是回調id和資料格式選項的填寫），我們再來看看此時的時間軸長什麼樣。
這裡的資料格式按照上面的資料填寫<code>%y%m%d%h</code>,回調id填寫<code>date</code>。
再來配置下我們的等值面元件，由于示例的資料區域也是全國範圍，這裡的裁剪面的資料可以不動，有需要的同學可以根據自己需要修改這裡的裁剪面資料。
我們主要看下這個矢量插值點的資料配置：
點選檢視資料響應結果，可以看到已經得到了正确的響應結果并比對成功。
等值面資料配置成功我們再來修改下等值面的樣式，由于需要輪播全國範圍的資料，為了保證計算效率，我們需要适當将精度調低，也就是像元大小調大一些，這樣可以保證快速得到插值結果。
如圖調整像元大小為3，分類數目為35類，顔色保持預設色使用線性渲染方式。
其實到這裡已經可以預覽出播放效果了，我們再增加一個标題元件吧，順便介紹下sql語句中回調參數的用法。
這裡連接配接一個<code>postgresql</code>資料庫，然後我們修改資料源類型為資料庫，選擇配置好的資料庫，如果沒有可以點選建立按鈕建立一個資料庫連接配接，這裡就不再贅述。
相關sql語句(<code>:date</code>在實際浏覽時會傳入回調id對應的值)：
最後再添加一下圖例，我們就大功告成了。
我們再預覽一下看看效果：
這裡簡單利用datav的兩個元件——時間軸和等值面元件制作了這樣一個春節期間的空氣品質回顧大屏。
datav還提供其他很多豐富的元件去幫助大家制作屬于自己的資料大屏。
帶上你的資料，借助datav豐富的可視化元件，一起為資料賦能。