Java后台生成ECharts图片【Java+Echarts+Phantomjs】

Java使用Echarts生成图片

文章目录

• 前言
• 一、场景需求
• 二、使用工具
• 三、实现思路
• 四、代码
• • 1.项目结构
  • 2.测试代码 EchartsTest.java
  • 3.JS脚本 echarts-convert.js
  • 4.测试数据代码 option.js
  • 5.结果展示
• 五、总结

前言

• Java后台使用Echarts生成图片。

一、场景需求

• 旧场景：前后端分离的项目，后台为Java，前端为VUE。VUE前端获取数据渲染生成echarts图表后，再通过点击事件获取echart对象的base64编码发送给后台，后台根据base64通过Freemarker模板生成包含图片的Word。
• 新场景：前端不用等待获取数据渲染echarts图表，直接请求后台，获取echarts图表的base64编码，再通过Freemarker模板生成包含图片的Word。

二、使用工具

1. Echarts：https://github.com/apache/echarts （下载ZIP，需要使用文件echarts/dist/echarts.min.js）
2. Phantomjs：https://phantomjs.org/download.html
3. JQuery：https://code.jquery.com/jquery-3.6.0.min.js （Ctrl+S保存到本地）

三、实现思路

• 前端发送请求，后台根据请求获取渲染echarts所需的数据option，通过phantomjs进行无界面浏览器的echarts渲染，渲染成功后获取echarts对象的base64编码。

四、代码

1.项目结构

• echarts.min.js，echarts-convert.js，jquery-3.6.0.min.js 这个三个文件需要放在同一个文件夹中。示例如下图：
• 

2.测试代码 EchartsTest.java

package top.youngtse.demo.test.echarts;import org.junit.Test;
import java.io.*;/*** @Title: EchartsTest* @Date 2022/5/11 17:28* @Author Youngtes* @Description: 测试Echarts后台渲染生成图片*/
public class EchartsTest {/*** phantomjs 路径*/private static String PHANTOMJS_PATH = "D:\\Tools\\phantomjs-2.1.1-windows\\bin\\phantomjs.exe";/*** echartsJs 路径*/private static String ECHARTS_PATH = "D:\\Space\\idea_space\\demo\\src\\main\\resources\\static\\echartjs\\echarts-convert.js";/*** echarts渲染所需数据 路径*/private static String OPTION_PATH = "D:\\Space\\idea_space\\demo\\src\\main\\resources\\temp\\option.js";/*** echarts获取图片base64编码URL头*/private static final String BASE64FORMAT = "data:image/png;base64,";@Testpublic void echartsTest() {BufferedReader input = null;String line;String base64 = "";try {/*** 命令格式：* phantomjs echarts-convert.js -infile optionURl -width width -height height* 可选参数：-width width -height height* 备注：* phantomjs添加到环境变量中后可以直接使用，这里防止环境变量配置问题所以直接使用绝对路径*/String cmd = PHANTOMJS_PATH + " " + ECHARTS_PATH + " -infile " + OPTION_PATH;
//            + " -width " + 800 + " -height " + 600;Process process = Runtime.getRuntime().exec(cmd);/*** 获取控制台输出信息* 通过JS中使用console.log()打印输出base64编码* 获取进程输入流，进行base64编码获取*/input = new BufferedReader(new InputStreamReader(process.getInputStream()));while ((line = input.readLine()) != null) {if (line.startsWith(BASE64FORMAT)) {base64 = line.replace(BASE64FORMAT, "");break;}}} catch (Exception e) {e.printStackTrace();} finally {try {input.close();} catch (Exception e) {e.printStackTrace();}}System.out.println(base64);}}

3.JS脚本 echarts-convert.js

代码如下（示例）：

(function () {var system = require('system');var fs = require('fs');var config = {// define the location of js filesJQUERY: 'jquery-3.6.0.min.js',ECHARTS: 'echarts.min.js',// default container width and heightDEFAULT_WIDTH: '600',DEFAULT_HEIGHT: '700'}, parseParams, render, pick, usage;// 提示：命令格式usage = function () {console.log("\n" + "Usage: phantomjs echarts-convert.js -infile URL -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;page.onConsoleMessage = function (msg) {console.log(msg);};page.onAlert = function (msg) {console.log(msg);};createChart = function (inputOption, width, height) {var counter = 0;function decrementImgCounter() {counter -= 1;if (counter < 1) {console.log("The images load error");}}function loadScript(varStr, codeStr) {var script = $('