利用无头浏览器phantomjs生成echarts图

场景

后端生成报告中需要插入与前端相同的echarts图，请求不由前端触发，故无法传入前端生成好的echarts图


网上提供解决方案：phantomjs无头浏览器+echarts-convert.js

环境搭建

参考： https://www.cnblogs.com/yestreenstars/p/5511212.html

1.安装依赖软件

yum -y install wget fontconfig

2.下载PhantomJS

wget -P /tmp/ https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-i686.tar.bz2

3.解压

tar xjf /tmp/phantomjs-2.1.1-linux-i686.tar.bz2 -C /usr/local/

4.重命名

mv /usr/local/phantomjs-2.1.1-linux-i686 /usr/local/phantomjs

5.建立软链接

ln -s /usr/local/phantomjs/bin/phantomjs /usr/bin/

6.echarts乱码解决

yum install bitmap-fonts bitmap-fonts-cjk

7.下载转换echarts所需依赖

下载地址：https://gitee.com/saintlee/echartsconvert


如内置echarts版本与前端不符，进行替换即可

使用

echarts-conver参数

-s或--server：开启服务监听，如果开启服务端，则-o不生效，这也就意味不能使用脚本命令生成图片；
-p或--port：端口号，只有-s启用时生效，改变监听端口号；
-o或--opt：ECharts的option,这里是json字符串，最外层不加引号；
    示例：{title:{text:'ECharts示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]}
-t或--type：生成类型file或base64，file是生成图片，base64是生成Base64字符串；
-f或--outfile：文件输出路径，只有--type=file时生效，如果不指定，则在脚本目录下创建一个tmp文件夹，将图片以时间戳为名字，保存到tmp目录下；
-w或--width：生成的图片宽度，默认800像素；
-h或--height：生成的图片高度，默认400像素。

详见：https://gitee.com/saintlee/echartsconvert

作为server

只能生成简单echarts，返回图片base64

phantomjs /app/echartsconvert/echarts-convert.js -s -p 6666

参考：https://www.jianshu.com/p/dfc28fd7d786

命令行

作为脚本使用生成本地图片，能生成较复杂echarts

phantomjs /app/echartsconvert/echarts-convert.js -o [echartsOption] -t file -f [filePath] [-w width] -h[height]

参考：https://blog.csdn.net/zengyif_szu/article/details/81942799