得益於echarts和其餘多種數據可視化框架的流行，如今作出各類美觀大氣炫酷的圖形化報表已是信手拈來的事情，接踵而來的就是各類新鮮的奇葩需求。最近咱們就遇到一個，要可以將多張熱力圖合成爲一張動圖，展示出過去一段時間的變化趨勢，而後再經過qq/微信分享出去。用戶爸爸的腦洞開得不錯，仔細一想也有道理，畢竟不是每一個人都裝了咱們的app啊。html
解決的思路也中規中矩，第一步，echart頁面先發起數據請求，獲得應該生成圖片的起始時間和數量；第二步，由echart頁面的js畫出圖表，經過js上傳到服務端（java），循環這個過程，直到全部圖片上傳成功；第三步，在服務端將多張圖片合成爲gif，保存起來。這一步偷懶沒有本身寫，github上面找了一個很輕量的庫（https://github.com/rtyley/animated-gif-lib-for-java），實測效果還不錯。java
總體來說很簡單，可是這裏面有個坑就是第一步echarts頁面發起請求，須要用戶訪問這個頁面才行。因爲裏面有大量的js執行，curl顯然是不行的。必需要經過瀏覽器訪問。Windows用戶能夠很愉快的寫個計劃任務調用chrome天天運行一次就搞定了，沒有圖形化界面的linux用戶就要hard一點點了。一開始嘗試的是網上廣泛流行的方法：selenium+chrome headless+chromedriver。這種方法的起源實際上是自動化測試，可是咱們的需求是一個瀏覽器，把頁面上全部js給我跑一遍。最後這個方式是失敗了，緣由是chromedriver的侷限——它能夠渲染整個頁面，也能夠調用某個js方法（By JavaScriptExecutor.executeScript()），可是它不能把頁面上的js和導入的js所有跑一遍，就像一個普通的瀏覽器那樣。成功的方法其實更簡單，就是讓chrome運載在虛擬的X Window-Xvfb。注意Xvfb安裝以後須要安裝中文字庫和圖表須要用到的字體（從windows複製過來便可）。linux
Xvfb -ac :1 -screen 0 1280x1024x16 export DISPLAY=:1 google-chrome-stable --disable-gpu http://xxx.html