ECharts 前段時間釋出了超亮眼的 GL，相對於之前已經圈粉無數的 ECharst-X 而言，ECharst GL更是帥到爆，無論是效能、顏值、型別都有了巨大的飛躍。但是對於小編這樣的設計師來說是不是更易上手呢？答案是肯定的，我們除了能夠根據資料畫出諸如三維地圖等三維的視覺化圖之外，只需要在專案中加入幾個簡單的配置項，就能配製出想要的風格的高質量畫面效果。
本文源地址：echarts.baidu.com/blog/2017/0…
這篇教程就希望通過在 Gallery裡繪製一個有豐富的光效、陰影的寫實風格的三維地圖的例子，簡單介紹一些ECharts GL與畫質相關的配置項，最終效果見 gallery.echartsjs.com/editor.html…
（下圖為最後的效果）。涉及到太高深專業的演算法、程式碼、什麼什麼的小設計師我實在是不會，所以這個僅僅能當 GL 入門級教程使用哦～
繪製一個基礎的三維地圖
首先我們在 Gallery 中用 ECharts GL 畫一個基礎的三維地圖。注意因為 GL 是 ECharts 的一個擴充套件，所以我們需要在 Gallery 中額外引入 GL 的指令碼檔案。 「引入檔案」只需要在 Gallery中新建作品，然後在「指令碼」的配置中加入這行地址就行了。
echarts.baidu.com/resource/ec…
如果要繪製世界地圖的話還需要引入上面「常用指令碼」的世界地圖檔案。
做好準備工作後我們就可以開始畫一個三維的世界地圖了，GL 中畫三維地圖的配置項跟畫普通的二維地圖一樣，只是系列名稱從原來的map改成map3D。
我們先用下面的最基礎配置項，基於引入的指令碼，生成一個最基礎的三維地圖系列。
option = {
series: [{
type: 'map3D',
map: 'world'
}]
};
是不是很簡單，當然畫出來的效果也是非常基礎和簡陋的。
接下來就我們需要做的就是一步一步的新增光照、陰影、後期的配置項把這個三維地圖畫得更漂亮。
新增更豐富的燈光
GL 中大部分元件都支援燈光的配置，這些燈光會影響到元件中的所有圖形，燈光的配置項需要統一在元件light屬性下設定。
light: {
main: {
intensity: 1
},
ambient: {
intensity: 0
}
}
通常情況下元件中預設會有一個主光源main和一個全域性的環境光ambient。主光源起到了主要的照明作用，可以讓我們剛才畫出來的三維地圖產生基礎的明暗對比，從而使圖形產生真實的立體感。全域性的環境光可以為整個場景提供全域性照亮和統一材質的效果。（新增光照效果如下圖）
我們可以通過intensity屬性設定不同光源的強度。例如在上面的程式碼中我們將主光源的強度設成2，環境光源的強度設成0後可以得到更加強烈的明暗對比。
預設的環境光只是單純的對所有圖形都加上一個固定的亮度，所以會顯得很平淡，如果把主光源去掉（intensity設為0）的話，整個地圖場景會變成灰色。所以為了更豐富的光照效果，我們可以使用 GL 提供的更為強大的ambientCubemap作為環境光源。
ambientCubemap是指使用一張全景貼圖作為環境光源。一般全景的環境光貼圖大概是下面這樣。
大家使用手機的全景模式中就可以拍出類似的全景照片。不過小編建議去尋找專業的 HDR 格式的全景圖資源。這裡推薦一個有不少免費的HDR全景圖資源的網站 www.hdrlabs.com/sibl/archiv…
找到合適的全景圖片後，我們可以在 Gallery 的匯入資料中上傳該圖片。
得到在 Gallery 上該圖片地址連結後插入到ambientCubemap的texture屬性中。
light: {
main: {
intensity: 1
},
ambient: {
intensity: 0
},
ambientCubemap: {
diffuseIntensity: 1,
texture: '/asset/get/s/data-1497251035660-HkVJTnsMW.hdr'
}
}
設定了texture屬性後 GL 就會自動啟用環境光貼圖作為環境光源。
因為全景貼圖的每個畫素都會被計算到光照裡，所以相比普通的環境光，使用環境光貼圖會讓整個光照會顯得更真實和豐富。
為了得到更真實的環境光效果，注意此處建議使用.hdr格式的圖片，因為 HDR 也就是高動態範圍影像，它比其他格式的影像有更大亮度的資料儲存。對比一下同一張圖片HDR和PNG格式照亮的不同效果。
新增陰影
有光的地方就會有陰影，陰影給了光照更多的層次，失去了陰影的光照是沒有靈魂的，是平淡乏味的。
在 GL 中可以簡單的加上shadow: true為主光源新增陰影。同時為了讓三維地圖有一種放在地面上的立體模型的感覺，我們再顯示一個地面groundPlane。
light: {
main: {
intensity: 1,
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
diffuseIntensity: 1,
texture: '/asset/get/s/data-1491896094618-H1DmP-5px.hdr'
}
},
groundPlane: {
show: true
}
通過陰影還可以更容易得感受到光照的方向，我們可以通過設定主光源alpha、beta兩個屬性設定不同的光照角度，來檢視陰影的變化。
main: {
intensity: 1,
shadow: true,
alpha: 150,
beta: 70
}
這樣就可以實現之前設計圈非常流行的一種長陰影的風格。
更豐富的顏色
到這裡我們得到的效果跟最初那個簡陋的畫面已經是天壤之別了，小編作為一個設計師是很鍾情於白模的效果的，但是如果你手裡有一份資料的話更是錦上添花。 資料的上傳和轉換可以通過echarts提供的表格資料轉換工具實現， echarts.baidu.com/spreadsheet… 資料部分內容不在此多述。如果暫時沒有現成資料，可以直接先複製教程例項中的資料，見左側程式碼區域var regionData = [{……}];內的全部內容，直接複製貼上即可進行之後操作。
將這份資料匯入並寫入配置項裡，
接下來，我們可以使用 ECharts 中視覺對映「visualMap」元件將地圖中的每塊區域賦予不同的顏色。
在 ECharts GL 中使用 visualMap 和在ECharts中並沒有任何的不同：
visualMap: {
show: false,
min: 0,
max: 15,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
}
就是這樣子每個國家根據不同資料就呈現出不同的顏色啦。
後期處理
看到後期可能大家第一個想到的就是使用 PS 調色，小編這次主要用到的確實是調色。但其實GL 中除了調色之外，還有例如景深 、描邊等諸多的後期效果能讓整個畫面呈現出你需要的效果，大家之後可以大膽的嘗試。
不知道大家是否能感受到其實此時得到的圖片整體明度偏暗，色相偏藍。就如我們在拍完照片後發現色調和曝光不理想需要再次調整圖片一樣，我們也需要對這張的畫面進行後期處理和調色。
後期處理的配置項都是在元件的postEffect下。首先可以通過 enable 屬性開啟。
postEffect: {
enable: true
}
開啟後 GL 會自動對整個畫面調整曝光到合適的顏色。
當然如果這個畫面並不能讓我們滿意的話，我們還可以通過postEffect下的colorCorrection配置項去手動的調整顏色。colorCorrection下有常見的曝光exposure、亮度brightness、對比度contrast和飽和度saturation選項。
但是這次小編要教大家使用這裡面更強大的顏色查詢表功能lookupTexture。這個功能可以讓我們在 PS 等自己用著順手的影像處理軟體裡處理好圖片之後再到 GL 裡復現我們在 PS 裡調整的顏色曲線。
小編給大家提供了一張初始的顏色查詢表，大家把下面這張查詢表的圖片下載下來後和你的作品截圖一起放入 Photoshop 中（可以把作品截圖拖入查詢表圖層的上方，注意需要保持查詢表大小不變，作品截圖是為了讓我們直觀的預覽調整的效果，調到滿意之後，刪除作品圖層，只儲存查詢表，之後在GL中載入查詢表，查詢表的顏色對映會直接在GL中復現）。
點選左下角建立新的填充或調整工具來選擇自己需要調整的配置項，此時兩個圖層是可以同時調整的，這裡可以自由調整各項引數來實現自己想要的效果。我在此使用的是顏色查詢下自帶的Candlelight.cube將圖片調整成了一種蠟燭光照的復古風格，又調整了亮度和對比度使其更清晰。
調整完成之後，隱藏作品截圖的圖層，只需儲存顏色查詢表（如下圖）
將該圖在 Gallery 內上傳資料，得到在 Gallery 上該圖片地址連結後插入到colorCorrection的 lookupTexture中即可。
到此，在 ECharts GL 中配置一個三維地圖的步驟就完成啦，還想解鎖更多 GL 技能的話， 可以直接去 ECharts 官網檢視 GL 超多酷炫的例項，或者去檢視GL的配置項手冊 echarts.baidu.com/option-gl.h… 盡情的嘗試吧～
總結
本文我們介紹瞭如何在 ECharts GL 中配置出一張好看的寫實風格三維地圖。小編要偷偷地告訴你，用 ECharts GL 生成的效果圖你還可以直接用來做圖片素材哦，如果你還在為 PPT 或者自己的設計作品找不到合適的配圖素材發愁的話，快來試試直接在 Gallery 裡用 ECharts GL 直接生成一張吧。