邮件显示统计图表echarts-java+phantomjs实现
项目背景是产品业务上的订阅推送，纯java后端实现，通过邮件将统计报表发送给用户。这里会涉及一些关键点：
- 首先是统计图表的生成，我们采用常见的echarts，简单易用，支持图表类型丰富美观；java后端实现可使用
echarts-java来实现图表的生成。 - 其次使用模板渲染的方式将获取到的订阅数据（标题，日期，描述，统计图表，列表）渲染成html，这里使用
handlebars实现模板渲染。文档地址：handlebarsjs.com/zh/guide/ - 将渲染后的html，作为邮件内容发送给想用用户。
1 首选解决echarts图表生成
xml
复制代码
<!-- 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提供了简洁的接口。目前好像不在更新维护了，所以没有提供直接生成图片或者相关的功能。
java
复制代码
@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; }
模板如下：
整理了这份面试笔记包括了：Java面试、Spring、JVM、MyBatis、Redis、MySQL、并发编程、微服务、Linux、Springboot、SpringCloud、MQ、Kafka 面试专题
需要全套面试笔记【点击此处】即可免费获取
xml
复制代码
<!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安装包 phantomjs.org/download.ht…
ruby
复制代码
解压缩 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生成
bash
复制代码
这里有个开源的项目，基于phantomjs生成echarts统计图的base64。 https://gitee.com/saintlee/echartsconvert
将项目下载下来，然后启动服务
bash
复制代码
nohup phantomjs ../echarts-convert.js -s & 默认的启动端口为9090
echartsconvert启动好之后，在程序里面通过http请求的方式，获取echarts图表的base64。 核心代码如下：调用前先看下面 [注意事项]
java
复制代码
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模板，调整点如下
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项目存在两个问题，请求编码导致的响应超时和中文无法显示问题
javascript
复制代码
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
1167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
