邮件显示统计图表echarts-java+phantomjs实现

邮件显示统计图表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