后端生成echarts图

场景:后端生成报告中需要插入与前端展示相同的echarts图
解决方案:phantomjs无头浏览器+echarts-convert.js
服务器环境:CentOS 7

环境搭建

参考: 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参数

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

-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像素。

作为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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容