发布于 

Java生成Echarts统计图

写在前面

最近做一个需求,是 pdf 报告相关的,要对一些数据生成统计图,并放到 pdf 中。

因为之前也做过 pdf 报告,当时也有往 pdf 里放图片,所以我的想法是,生成好统计图,然后像之前一样把图片放进去就行了。

网上搜了一下,搜到两种比较多人用的方案。

方案如下

1. JFreeChart

这个很简单,引一下依赖,cv 一下网上的代码,就实现了。

但是图片很丑!

2. PhantomJS + ECharts-Convert.js

这个稍微复杂一点,而且不是纯 Java 就能实现,还得安装 PhantomJS。

因为用的是 Echarts 来生成的,所以生成的图挺好看的。


经过权衡,最终我采用的是第二种。

环境准备

安装 PhantomJS

下载对应系统的压缩包文件,然后解压,再配置一下环境变量就 ok 了。

下载地址:https://phantomjs.org/download.html

下载 ECharts-Convert.js

ECharts-Convert.js 下载地址:https://gitee.com/saintlee/echartsconvert

一开始我只下载了 echarts-convert.js 这一个文件,后面运行命令时一直报错,查了很久才反应过来,需要把整个 git 仓库下载下来。

测试效果

使用 phantomjs echarts-convert.js -s -p 6666 命令来启动服务,Java 这边就是通过请求这个服务来生成 Echarts 图表的。

使用代码测试,成功。具体代码可参考文章最下面第一个参考链接。

命令生成

代码虽然测试成功了,但是生成的图片有问题,显示的不太正确。

网友说是仓库太久没更新,里面的 echarts.min.js 过于老旧,需要更新。

更新了一下,然后把 echarts.min.jsecharts-convert.jsjquery-3.2.1.min.js 这三个文件都放到 resources/static/js 目录下。

因为我不太想用 http 请求的方式,所以改成直接用本地执行命令的方式来生成,只需要上面这三个文件即可,不需要其他文件,也不需要 pom 文件去引用额外的依赖。

上面三个文件放到了网盘,需要的可以自取:https://alist.5had0w.com/Code/echarts-convert

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import java.io.BufferedReader;
import java.io.File;
import java.io.InputStreamReader;
import java.nio.file.Files;
import java.util.Random;

/**
* @Author shadow
* @Date 2024/1/12 15:14
* @Description echarts 图表转换成图片
*/
public class EchartsConvertUtil {

private static final String projectPath = System.getProperty("user.dir");

private static final String projectStaticPath = projectPath + "/src/main/resources/static/";

private static final String jsPath = projectStaticPath + "js/echarts-convert.js";

public static File convertToPic(String option) {
// 拼接命令
try {
String picturePath = projectStaticPath + generateFileName();
String cmd = "phantomjs " + jsPath + " -options " + "option=" + option + " -outfile " + picturePath;
System.out.println(cmd);
// 执行命令,window系统需要额外配置
String osName = System.getProperties().getProperty("os.name");
Process process = null;
if (osName.toLowerCase().startsWith("win")) {
process = Runtime.getRuntime().exec("cmd /c " + cmd);
} else {
process = Runtime.getRuntime().exec(cmd);
}
// 打印控制台信息
BufferedReader input = new BufferedReader(new InputStreamReader(process.getInputStream()));
String line = "";
while ((line = input.readLine()) != null) {
System.out.println(line);
}
input.close();
//这里我把图片作为文件返回,以做后续处理,处理完可以 file.delete() 把文件删了
File file = new File(picturePath);
return file;
//也可以把文件字节数组读出来,这里就可以直接删除,返回字节数组就好
// byte[] bytes = Files.readAllBytes(file.toPath());
// file.delete();
// return bytes;
} catch (Exception e) {
return null;
}
}

public static String generateFileName() {
long currentTime = System.currentTimeMillis();
String randomSuffix = generateRandomSuffix();
return currentTime + randomSuffix + ".png";
}

private static String generateRandomSuffix() {
Random random = new Random();
int randomNum = random.nextInt(9000) + 1000; // 生成一个四位随机数
return String.valueOf(randomNum);
}

public static void main(String[] args) {
convertToPic("{xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[120,200,150,80,70,110,130],type:'bar'}]};");
}

}

运行 main 方法测试,成功在 resources/static 目录下生成图片。

对于 option 参数的话,参考 ECharts 官网示例 生成就好。创建对应 json 对象再转成字符串就可以,或者直接字符串拼接。反正就和 js 创建 Echarts 是一样的。

补充:命令直接生成,也是支持把 option 参数放到 js 文件,然后指定参数文件路径来生成的。但是我的参数是动态的,放到文件的话,每次都得写文件,太麻烦了,所以采用直接传入的方式。

参考文章

  1. java后台生成统计图+jfreechart、echarts - 简书
  2. SptingBoot基于Echarts生成折线图,柱状图,超详细~~-CSDN博客

——end——