Java+PhantomJs實作后臺生成Echarts圖片（完整原始碼）
- 需求
- 效果圖
- 實作
- 引入依賴
- 引入js檔案
- 拼接option （完整代碼如下）
- 生成圖片
- 附上拼接option時涉及的物體
- 生成的折線圖樣式
- 遇到的坑
需求
生成折線圖定期發送郵件，
效果圖
實作
引入依賴
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0.6</version>
</dependency>
引入js檔案
- echarts.min.js
點擊下載 - jquery-3.5.1.min.js
點擊下載 - echarts-convert.js 生成echart圖片的腳本（完整代碼如下）
(function () {
var system = require('system');
var fs = require('fs');
var config = {
// define the location of js files
//這樣寫要求這三個js在同一個檔案夾下
JQUERY: 'jquery-3.5.1.min.js',
//ESL: 'esl.js',
ECHARTS: 'echarts.min.js',
// default container width and height
DEFAULT_WIDTH: '400',
DEFAULT_HEIGHT: '600'
}, parseParams, render, pick, usage;
usage = function () {
console.log("\nUsage: phantomjs echarts-convert.js -options options -outfile filename -width width -height height"
+ "OR"
+ "Usage: phantomjs echarts-convert.js -infile URL -outfile filename -width width -height height\n");
};
pick = function () {
var args = arguments, i, arg, length = args.length;
for (i = 0; i < length; i += 1) {
arg = args[i];
if (arg !== undefined && arg !== null && arg !== 'null' && arg != '0') {
return arg;
}
}
};
parseParams = function () {
var map = {}, i, key;
if (system.args.length < 2) {
usage();
phantom.exit();
}
for (i = 0; i < system.args.length; i += 1) {
if (system.args[i].charAt(0) === '-') {
key = system.args[i].substr(1, i.length);
if (key === 'infile') {
// get string from file
// force translate the key from infile to options.
key = 'options';
try {
map[key] = fs.read(system.args[i + 1]).replace(/^\s+/, '');
} catch (e) {
console.log('Error: cannot find file, ' + system.args[i + 1]);
phantom.exit();
}
} else {
map[key] = system.args[i + 1].replace(/^\s+/, '');
}
}
}
return map;
};
render = function (params) {
var page = require('webpage').create(), createChart;
var bodyMale = config.SVG_MALE;
page.onConsoleMessage = function (msg) {
console.log(msg);
};
page.onAlert = function (msg) {
console.log(msg);
};
createChart = function (inputOption, width, height,config) {
var counter = 0;
function decrementImgCounter() {
counter -= 1;
if (counter < 1) {
console.log(messages.imagesLoaded);
}
}
function loadScript(varStr, codeStr) {
var script = $('<script>').attr('type', 'text/javascript');
script.html('var ' + varStr + ' = ' + codeStr);
document.getElementsByTagName("head")[0].appendChild(script[0]);
if (window[varStr] !== undefined) {
console.log('Echarts.' + varStr + ' has been parsed');
}
}
function loadImages() {
var images = $('image'), i, img;
if (images.length > 0) {
counter = images.length;
for (i = 0; i < images.length; i += 1) {
img = new Image();
img.onload = img.onerror = decrementImgCounter;
img.src = images[i].getAttribute('href');
}
} else {
console.log('The images have been loaded');
}
}
// load opitons
if (inputOption != 'undefined') {
// parse the options
loadScript('options', inputOption);
// disable the animation
options.animation = false;
}
// we render the image, so we need set background to white.
$(document.body).css('backgroundColor', 'white');
var container = $("<div>").appendTo(document.body);
container.attr('id', 'container');
container.css({
width: width,
height: height
});
// render the chart
var myChart = echarts.init(container[0]);
myChart.setOption(options);
// load images
loadImages();
return myChart.getDataURL();
};
// parse the params
page.open("about:blank", function (status) {
// inject the dependency js
page.injectJs(config.ESL);
page.injectJs(config.JQUERY);
page.injectJs(config.ECHARTS);
var width = pick(params.width, config.DEFAULT_WIDTH);
var height = pick(params.height, config.DEFAULT_HEIGHT);
// create the chart
var base64 = page.evaluate(createChart, params.options, width, height,config);
fs.write("base64.txt",base64);
// define the clip-rectangle
page.clipRect = {
top: 0,
left: 0,
width: width,
height: height
};
// render the image
page.render(params.outfile);
console.log('render complete:' + params.outfile);
// exit
phantom.exit();
});
};
// get the args
var params = parseParams();
// validate the params
if (params.options === undefined || params.options.length === 0) {
console.log("ERROR: No options or infile found.");
usage();
phantom.exit();
}
// set the default out file
if (params.outfile === undefined) {
var tmpDir = fs.workingDirectory + '/tmp';
// exists tmpDir and is it writable?
if (!fs.exists(tmpDir)) {
try {
fs.makeDirectory(tmpDir);
} catch (e) {
console.log('ERROR: Cannot make tmp directory');
}
}
params.outfile = tmpDir + "/" + new Date().getTime() + ".png";
}
// render the image
render(params);
}());
拼接option （完整代碼如下）
public String getOption(String title, String ytitle, List<String> categorie, List<Serie> series) {
GsonOption option = new GsonOption();
// 大標題、位置
option.title().text(title).x("left");
List<String> types = series.stream().map(Serie::getName).collect(Collectors.toList());
// 設定圖例
option.legend().data(types.toArray()).x("center");
// 在軸上觸發提示資料
option.tooltip().trigger(Trigger.axis);
// 工具列 顯示,保存為圖片 實際是一個下載圖示不需要所以注掉了
// option.toolbox().show(true).feature(Tool.saveAsImage);
// x軸
com.github.abel533.echarts.axis.CategoryAxis category =
new com.github.abel533.echarts.axis.CategoryAxis();
category.data(categorie.toArray());
// 起始和結束兩端空白策略
category.boundaryGap(false);
// option.grid().x(180);
// y軸
com.github.abel533.echarts.axis.ValueAxis ecsY =
new com.github.abel533.echarts.axis.ValueAxis();
ecsY.name(ytitle).position("left").axisLine().lineStyle().color(Color.BLACK);
//不允許出現小數位，坐標軸最小值1
ecsY.minInterval(1);
TextStyle textStyle = new TextStyle();
textStyle.setFontSize(18);
// 回圈資料
for (int i = 0; i < types.size(); i++) {
Line line = new Line();
String type = types.get(i);
line.name(type);
int size = series.get(i).getData().size();
for (int j = 0; j < size; j++) {
line.data(series.get(i).getData().get(j));
}
// 設定平滑線條
// line.smooth(true);
option.series(line);
}
// 橫軸為類別、縱軸為值
option.xAxis(category);
option.yAxis(ecsY);
// 處理沒有資料的情況
NoDataLoadingOption noDataLoadingOption = new NoDataLoadingOption();
Effect effect = new Effect();
effect.setShow(true);
EffectOption effectOption = new EffectOption();
effectOption.setEffect(0);
noDataLoadingOption.setEffect(effect);
noDataLoadingOption.setText("暫無資料");
option.noDataLoadingOption(noDataLoadingOption);
String optionStr = option.toString().replace(" ", "");
log.info(optionStr);
return optionStr;
}
生成圖片
public String generateEChart(String options, String imgName, int width, int height) {
String path = "forum-app/src/main/resources/images/" + imgName;
try {
// 檔案路徑（路徑+檔案名）
File file = new File(path);
// 檔案不存在則創建檔案，先創建目錄
if (!file.exists()) {
File dir = new File(file.getParent());
dir.mkdirs();
file.createNewFile();
}
// echarts-convert.js 腳本所在 path
//本地這樣寫是沒問題的
String JSpath = "forum-common/src/main/resources/js/echarts-convert.js";
log.info("start cmd exec generate png");
String cmd =
"phantomjs "
+ JSpath
+ " -options "
+ options
+ " -outfile "
+ path
+ " -width "
+ width
+ " -height "
+ height
+ "";
Process process = Runtime.getRuntime().exec(cmd);
process.waitFor();
log.info("end cmd exec generate png");
BufferedReader input = new BufferedReader(new InputStreamReader(process.getInputStream()));
String line = "";
while ((line = input.readLine()) != null) {
log.info(line);
}
input.close();
} catch (Exception e) {
e.printStackTrace();
} finally {
return path;
}
}
附上拼接option時涉及的物體
public class Serie implements Serializable {
private static final long serialVersionUID = 1L;
private String name;// 名字
private Vector<Object> data;// 資料值?
/**
*
* @param name
* 名稱（線條名稱）
* @param array
* 資料（線條上的所有資料值）
*/
public Serie(String name, Object[] array) {
this.name = name;
if (array != null) {
data = new Vector<Object>(array.length);
for (int i = 0; i < array.length; i++) {
data.add(array[i]);
}
}
}
}
生成的折線圖樣式
遇到的坑
本地測驗一切很完美，高高興興部署到linux上測驗，效果如下，
生成的都是0kb的圖片，心涼了一半，
趕緊去看看日志
{"title":{"text":"問答瀏覽量","x":"left"},"toolbox":{"feature":{"saveAsImage":{"show":true,"title":"保存為圖片","type":"png","lang":["點擊保存"]}},"show":true},"tooltip":{"trigger":"axis"},"legend":{"data":["TRANTOR","GAIA","GAIAAPP"],"x":"center"},"xAxis":[{"type":"category","boundaryGap":false,"data":["2021-09-06","2021-09-07","2021-09-08","2021-09-09","2021-09-10","2021-09-11","2021-09-12"]}],"yAxis":[{"type":"value","position":"left","name":"","axisLine":{"lineStyle":{"color":{"value":-16777216,"falpha":0.0}}}}],"series":[{"name":"TRANTOR","type":"line","data":[0,0,0,2,0,3,2]},{"name":"GAIA","type":"line","data":[0,0,0,0,0,0,0]},{"name":"GAIAAPP","type":"line","data":[0,0,0,0,0,0,0]}],"noDataLoadingOption":{"text":"暫無資料","effect":{"show":true}}}
2021-09-12 19:19:37.340 [1053940:http-nio-8080-exec-10] INFO pub.developers.forum.common.support.GenerateEChartUtil - start cmd exec generate png
2021-09-12 19:19:37.425 [1054025:http-nio-8080-exec-10] INFO pub.developers.forum.common.support.GenerateEChartUtil - end cmd exec generate png
日志看起來一切都很正常，心又涼了一大半，
穩住，不能慌！
排查思路：
- 執行命令寫的是相對路徑，linux環境上可能找不到我安裝的phantomjs執行檔案
- echarts-convert.js檔案沒找到，
解決方案：
配置環境變數，將js檔案拷貝至容器目錄下，
附上dockerfile添加內容：
WORKDIR /
COPY ./forum-common/src/main/resources/js/echarts-convert.js /app/echarts-convert.js
COPY ./forum-common/src/main/resources/js/echarts.min.js /app/echarts.min.js
COPY ./forum-common/src/main/resources/js/jquery-3.5.1.min.js /app/jquery-3.5.1.min.js
#安裝bzip2解壓PhantomJS壓縮包
RUN yum -y install bzip2
#Echarts支持中文
RUN yum -y install bitmap-fonts bitmap-fonts-cjk
# PhantomJS
ENV PHANTOMJS_VERSION 2.1.1
RUN wget --no-check-certificate -q -O - https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 | tar xjC /opt
RUN ln -s /opt/phantomjs-$PHANTOMJS_VERSION-linux-x86_64/bin/phantomjs /usr/bin/phantomjs
ENV PJS_HOME=/opt/phantomjs-$PHANTOMJS_VERSION-linux-x86_64
ENV PATH=$PATH:$PJS_HOME/bin
修改generateEChart()方法中JSpath
String JSpath = "/app/echarts-convert.js";
修改echarts-convert.js 中其他兩個js的路徑
發布，完美！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/300319.html
標籤：其他