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

young 588 2021-10-17

场景


后端生成报告中需要插入与前端相同的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