得益于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