邮件显示统计图表echarts-java+phantomjs实现
项目背景是产品业务上的订阅推送，纯java后端实现，通过邮件将统计报表发送给用户。这里会涉及一些关键点：
- 首先是统计图表的生成，我们采用常见的echarts，简单易用，支持图表类型丰富美观；java后端实现可使用
echarts-java来实现图表的生成。 - 其次使用模板渲染的方式将获取到的订阅数据（标题，日期，描述，统计图表，列表）渲染成html，这里使用
handlebars实现模板渲染。文档地址：https://handlebarsjs.com/zh/guide/ - 将渲染后的html，作为邮件内容发送给想用用户。
1 首选解决echarts图表生成
<!-- https://mvnrepository.com/artifact/org.icepear.echarts/echarts-java -->
<dependency>
<groupId>org.icepear.echarts</groupId>
<artifactId>echarts-java</artifactId>
<version>1.0.7</version>
</dependency>
项目中添加上述依赖，echarts-java为java生成echarts的option或者完整的html提供了简洁的接口。目前好像不在更新维护了，所以没有提供直接生成图片或者相关的功能。
@Slf4j
public class ChartGenHandle {
private static final String TEMPLATE_PREFIX = "templates/";
private static final String EMPTY_REPORT = "empty-push-template";
private static final String BO_REPORT = "bo-push-template";
private static final String REPORT_CENTER = "center";
public static final Map<String, Template> TEMPLATES = new ConcurrentHashMap<>();
public static String genReport(String title, String summary, List<BaseNameValue<String, Integer>> barData,
List<BaseNameValue<String, Integer>> pieData, List<ReportDataVO> details) {
ReportVO reportData = new ReportVO();
try {
Handlebars handlebars = new Handlebars();
String path = TEMPLATE_PREFIX + BO_REPORT;
Template template = TEMPLATES.getOrDefault(path, handlebars.compile(path));
reportData.setTitle(title);
reportData.setSummary(summary);
Engine engine = new Engine();
reportData.setBar(engine.renderJsonOption(genBar(barData)));
reportData.setPie(engine.renderJsonOption(genPie(pieData)));
reportData.setDetails(details);
return template.apply(reportData);
} catch (IOException e) {
log.error("报告生成异常：template=" + BO_REPORT + ",params=" + JSON.toJSONString(reportData), e);
}
return null;
}
public static String genHtml(Chart<?, ?> chart) {
Engine engine = new Engine();
return engine.renderHtml(chart);
}
public static Bar genBar(List<BaseNameValue<String, Integer>> datas) {
if (datas == null || datas.isEmpty()) {
return new Bar().setTitle(new Title()
.setLeft(REPORT_CENTER).setRight(REPORT_CENTER).setTop(REPORT_CENTER).setBottom(REPORT_CENTER)
.setText("无数据").setTextStyle(new Label().setFontSize(20).setFontWeight("normal")));
}
String[] names = new String[datas.size()];
Integer[] values = new Integer[datas.size()];
for (int i = 0; i < datas.size(); i++) {
BaseNameValue<String, Integer> data = datas.get(i);
names[i] = data.getName();
values[i] = data.getValue();
}
return new Bar().setLegend().setTooltip("item")
.addXAxis(names)
.addYAxis()
.addSeries(values);
}
public static Pie genPie(List<BaseNameValue<String, Integer>> datas) {
if (datas == null || datas.isEmpty()) {
return new Pie().setTitle(new Title()
.setLeft(REPORT_CENTER).setRight(REPORT_CENTER).setTop(REPORT_CENTER).setBottom(REPORT_CENTER)
.setText("无数据").setTextStyle(new Label().setFontSize(20).setFontWeight("normal")));
}
List<PieDataItem> items = datas.stream().map(data -> new PieDataItem().setName(data.getName()).setValue(data.getValue()))
.collect(Collectors.toList());
return new Pie()
.addSeries(new PieSeries()
.setRadius(new String[]{"40%", "70%"})
.setItemStyle(new PieItemStyle().setBorderRadius(10).setBorderColor("#fff").setBorderWidth(2))
.setLabel(new PieLabel().setShow(true).setPosition("outside").setFormatter("{b}:{c}({d}%)")
.setFontWeight("bold").setOverflow("break"))
.setData(items.toArray()));
}
}
@Data
class ReportVO {
private String title;
private String summary;
private String pushDate;
private String bar;
private String pie;
private List<ReportDataVO> details;
}
@Data
class ReportDataVO {
private String name;
private String area;
private String age;
}
@Data
class BaseNameValue<K, V> {
private K name;
private V value;
}
模板如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"
integrity="sha512-ivdGNkeO+FTZH5ZoVC4gS4ovGSiWc+6v60/hvHkccaMN2BXchfKdvEZtviy5L4xSpF8NPsfS0EVNSGf+EsUdxA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<title>推送报告</title>
</head>
<body class="mail-template">
<h1>{{title}}</h1>
<h3 align="center">来源：<a href="http://xxxxxxx">推送平台</a> </h3>
<section class="business-overview">
<h2>1、概览</h2>
<div class="content">{{{summary}}}</div>
</section>
<section class="business-type">
<h2>2、统计</h2>
<h3>区域分布</h3>
<div id="area-bar" style="height: 600px"></div>
<h3>年龄分布</h3>
<div id="age-pie" style="height: 600px"></div>
</section>
<h2>3、明细</h2>
<div>
<table>
<tr>
<th>名称</th>
<th>地区</th>
<th>年龄</th>
</tr>
{{#each details ~}}
<tr>
<td> {{name}}</td>
<td> {{area}}</td>
<td> {{age}}</td>
</tr>
{{~/each}}
</table>
</div>
<script>
let area = echarts.init(document.getElementById('area-bar'));
let areaBar = {{{bar}}};
area.setOption(areaBar);
let age = echarts.init(document.getElementById('age-pie'));
let agePie = {{{pie}}};
age.setOption(agePie);
</script>
</body>
</html>
<style>
.mail-template h1:nth-child(1) {display: flex; justify-content: center;}
.mail-template .business-overview .content {width: calc(100% - 40px);padding:6px;}
.mail-template .business-type #area-bar {width: 100%;}
.mail-template table {width: 100%;}
.mail-template table tr:nth-child(1) {background: #fafafa;height: 48px;}
.mail-template table tr:nth-child(1) th:nth-child(1) {width: 200px;}
.mail-template table tr:nth-child(1) th:nth-child(n + 2) {width: 120px;}
.mail-template table td { padding: 12px;border: 1px solid #f0f0f0;}
.mail-template { padding: 12px; }
</style>
上述代码生成的html如下所示：
到此为止，我们实现了生成逻辑的核心代码，但是如果在邮件中显示还是个问题，因为在邮件中没法执行js脚本，所有上述生成的html直接作为邮件内容，是没办法显示图表的。
2 phantomjs应用
因为没办法直接在邮件中使用js来渲染统计图表，所以我们只能采用往邮件里面插入生成好的图表图片来实现。一般有两种方案，第一种是借用截图服务来实现，现在浏览器端实现一个统计图表页面，然后通过截图服务或者前端截图功能生成图片，然后将图片插入到邮件中。第二种是纯后端实现，这里就要采用phantomjs组件了。
PhantomJS是一个开源的、基于WebKit内核的、无界面的Web浏览器，可以用于网络监控、网页自动化、性能分析、截屏以及各类与Web相关的任务。它支持JavaScript语言，可以直接运行在命令行中。
1.下载安装phantomjs安装包
https://phantomjs.org/download.html
解压缩
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
配置环境变量
export PATH=$PATH:/home/webdev/phantomjs/phantomjs-2.1.1-linux-x86_64/bin
source /etc/profile
运行测试脚本
examples>phantomjs hello.js
hello,world!
运行过程中根据服务器环境的不同，可能会出现缺少一些依赖的底层环境，根据提示安装就好
比如：phantomjs: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by /usr/lib64/libstdc++.so.6)
yum -y install fontconfig fongconfig-devel bitmap-fonts bitmap-fonts-cjk
2.base64生成
这里有个开源的项目，基于phantomjs生成echarts统计图的base64。
https://gitee.com/saintlee/echartsconvert
将项目下载下来，然后启动服务
nohup phantomjs ../echarts-convert.js -s &
默认的启动端口为9090
echartsconvert启动好之后，在程序里面通过http请求的方式，获取echarts图表的base64。
核心代码如下：调用前先看下面 [注意事项]
public static void main(String[] args) throws IOException {
// opt是echarts图表的option，可调用handlebars的 egine.renderJsonOption()方法获得
String opt = "{\"series\":[{\"type\":\"pie\",\"data\":[{\"name\":\"新增企业\",\"value\":1}],\"itemStyle\":{\"borderColor\":\"#fff\",\"borderWidth\":2,\"borderRadius\":10},\"label\":{\"fontWeight\":\"bold\",\"show\":true,\"position\":\"outside\",\"overflow\":\"break\",\"formatter\":\"{b}:{c}({d}%)\"},\"radius\":[\"40%\",\"70%\"]}]}";
// PhantomJS 服务器地址
String url = "http://1.13.102.102:9090";
opt = opt.replaceAll("\\s+", "").replaceAll("\"", "'");
List<NameValuePair> nvp = new ArrayList<>();
nvp.add(new BasicNameValuePair("opt", opt));
String res = Request.Post(url)
.bodyForm(nvp, StandardCharsets.UTF_8)
.addHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8")
.execute().returnContent().asString(StandardCharsets.UTF_8);
System.out.println(res);
}
//echartsconvert返回结果的结构如下
{
"code": 1,
"msg": "success",
"data": "base64字符串"
}
如此我们就解决了大部分难题，获取了统计图的base64，这时候需要简单调整下html模板，调整点如下
<section class="business-type">
<h2>2、统计</h2>
<h3>区域分布</h3>
<div id="area-bar" style="height:400px"><img src="data:image/png;base64,{{{bar}}}></div>
<h3>年龄分布</h3>
<div id="age-pie" style="height: 400px"><img src="data:image/png;base64,{{{pie}}}></div>
</section>
#上面用{{{pie}}}是为了防止base64里面的特殊字符被转义。
[注意事项]：对于echartsconvert项目存在两个问题，请求编码导致的响应超时和中文无法显示问题
1：饼图绘制不了，request时就卡住的问题
solution1：此处并不是饼图绘制不了，而是只要opt中含有'%'都会挂，原因是作者在代码里执行了两次decodeURIComponent（详情参考echarts-convert.js源码259行），所以'%'传递时也必需encode两次，否则会造成%后的json串无法被decode导致卡住的问题。
此处可以将'%'替换为'%25'解决，或是改源码将decodeURIComponent改为一次，暂时没有发现改为一次decode会出现中文问题
2：项目上linux服务器后，图片内所有中文无法显示问题 <br>
solution2：此处并不是echarts或convert本身造成的，而是linux服务器上没有匹配的字符集
此处执行linux字符集安装即可
在centos中执行：yum install bitmap-fonts bitmap-fonts-cjk
在ubuntu中执行：sudo apt-get install xfonts-wqy
项目的issues列表中大佬给出的解决方案：https://gitee.com/saintlee/echartsconvert/issues/IYDDU