背景
- 项目业务中需要开发邮件发送并正文中携带图片的功能,参考了几种方式,最后确定使用ECharts (用来构建echarts的option数据结构的)+ phantomjs(node服务) + echartsconvert 生成图片
具体步骤
一、 引入pom依赖
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0.6</version>
</dependency>
二、构造Option
这个开源项目中https://github.com/abel533/ECharts,有很多生成Option的demo,我举一个列子
@Test
public void test() {
GsonOption option = new GsonOption();
option.title().text("某地区蒸发量和降水量").subtext("纯属虚构");
option.tooltip().trigger(Trigger.axis);
option.legend("蒸发量", "降水量");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);
option.calculable(true);
option.xAxis(new CategoryAxis().data("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"));
option.yAxis(new ValueAxis());
ItemStyle itemStyle = new ItemStyle();
Normal normal = new Normal();
normal.setShow(true);
normal.setPosition(Position.top);
itemStyle.setNormal(normal);
// 柱状图
Bar bar = new Bar("蒸发量");
bar.data(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3);
bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));
bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));
bar.label(itemStyle);
// 折线图
Line bar2 = new Line("降水量");
bar2.data(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3);
bar2.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));
bar2.markLine().data(new PointData().type(MarkType.average).name("平均值"));
bar2.label(itemStyle);
option.series(bar,bar2);
// 到这里就构建好了echarts的Option对象了
}
三、部署图片生成服务
1. 将phantomjs和echartsconvert包放在 目录/home/echarts/下
2. 解压这两个包 unzip echartsconvert-master.zip 、unzip phantomjs-2.1.1-linux-x86_64
3. 在/home/echarts/phantomjs-2.1.1-linux-x86_64/bin创建一个shell脚本start.sh
#!/bin/bash
nohup phantomjs /home/echarts/echartsconvert-master/echarts-convert.js -s -p 10001 >echarts.log 2>&1 &
4.执行脚本 ./start.sh,注意要开启10001这个端口的访问
四、调用图片生成服务生成图片
public static String generateEchartsBase64(Option op) throws IOException {
String option = GsonUtil.format(op);
option = option.replaceAll("\\s+", "").replaceAll("\"", "'");
Map<String, String> params = new HashMap<>();
params.put("opt", option);
String response = post("你的图片生成服务的ip加端口", params, "utf-8");
JSONObject responseJson = JSONObject.parseObject(response);
String code = responseJson.getString("code");
if (SUCCESS_CODE.equals(code)) {
base64 = responseJson.getString("data");
return "data:image/png;base64," + base64;
} else {
throw new NotifyException(responseJson.getString("msg"));
}
}
注意:
这里可以直接将生成的option放进去,进行调试
https://echarts.apache.org/examples/zh/editor.html?c=line-simple