这次遇到的问题要在发送email时，生成好看的数据图表，所以初步思路就是：java服务端+echars。由于echars是需要用js执行的，所以还需要加入执行环境PhantomJS 。

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。原生支持各种Web标准：DOM处理,CSS选择器,JSON,Canvas,和SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。

    第一种方式是前端+echars，生成图表后，后台使用phantomjs进行进行截屏，这个方式我试了可行，但是增加了前端的工作量，丢掉。

    下面这种方式，是利用PhantomJS 是一个js执行环境，通过拼凑出cmd的执行命令，把绘图所需要的数据，组装成echars需要的格式一并传入。即通过后台（Java）执行PhantomJS，调用echarts-convert.js+数据，并输出成图片。

①开发环境准备：

    去git上下载echartsconvert，本次phantomjs.exe执行的就是echarts-convert.js，它引用了echarts.min.js和jquery-3.2.1.min.js。

    下载phantomjs-2.1.1-windows。linux和mac有对应的版本，使用的时候配置phantomjs-2.1.1-windows\bin\phantomjs.exe的路径到cmd命令里就行。

②Demo：

public class EcharsServiceImpl implements EcharsService {

        private static final String JSpath = "D:/AAAA/A/echartsconvert/script/echarts-convert.js";    //echarts.js的存放路径

        private static final String phantomjs = "D:/AAAA/A/phantomjs-2.1.1-windows/bin/phantomjs.exe";    //PhantomJS的存放路径

        public static void main(String[] args) {

                String optiona =Constant.dd;     //应用预先定义的测试数据，Constant.aa，bb，cc，dd，ee在后面给你们

                generateEChart(optiona);

           }

    public static String generateEChart(String options) {

        String dataPath = writeFile(options);     //把参数放文件里落地

        String path = "D:/AAAA/A/Echart/"+UUID.randomUUID()+".png";

        try {

            File file = new File(path);

            if (!file.exists()) { 

                File dir = new File(file.getParent());

                dir.mkdirs();

                file.createNewFile();

            }

            String blank = " ";

            String cmd = phantomjs +blank+ JSpath + " -infile " + dataPath + " -outfile " + file;

            Process process = Runtime.getRuntime().exec(cmd);

            InputStream inputStream = process.getInputStream();

            //System.out.println(inputStream.read());       看一下流，输出-1就得检查一下前头的cmd了

            BufferedReader input = new BufferedReader(new InputStreamReader(inputStream));

            //String line = "";

            //while ((line = input.readLine()) != null) {

            //System.out.println(line);

            //}

            input.close();

        } catch (IOException e) {

            e.printStackTrace();

        }finally{

            return path;

        }

    }

    /**

    * 把数据写入文件，调试demo的时候,可以跳过这段,直接指定xxx.json

    */

    public static String writeFile(String options) {

        String dataPath="D:/AAAA/A/Echart/"+ UUID.randomUUID().toString().substring(0, 8) +".json";

        try {

            /* 写入Json文件 */

            File writename = new File(dataPath); // 相对路径，如果没有则要建立一个新的output.txt文件

            if (!writename.exists()) {  //文件不存在则创建文件，先创建目录

                File dir = new File(writename.getParent());

                dir.mkdirs();

                writename.createNewFile(); // 创建新文件

            }

            BufferedWriter out = new BufferedWriter(new FileWriter(writename));

            out.write(options);

            out.flush(); // 把缓存区内容压入文件

            out.close(); // 最后记得关闭文件

        } catch (IOException e) {

            e.printStackTrace();

        }

        return dataPath;

    }

}

③测试数据准备

    测试数据要自己到echars的官网上找（https://echarts.baidu.com/examples/#chart-type-tree），每种图表的option不一样，单击下面不同类型的图进去，组装合适的option。组装的时候要记得修改key-value中value的单引号。

    我在下面的常量里准备了饼图、折线图、漏斗图、仪表盘四种简单数据。

/**

* 供echars模拟的数据

* @author PENGJING973

*/

public class Constant {

/**饼图*/

public static final String aa = "{tooltip:{trigger:'item',formatter:'{a} <br/>{b}: {c} ({d}%)'},legend:{orient:'vertical',x:'left',data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series:[{name:'访问来源',type:'pie',radius:['50%','70%'],avoidLabelOverlap:false,label:{normal:{show:false,position:'center'},emphasis:{show:true,textStyle:{fontSize:'30',fontWeight:'bold'}}},labelLine:{normal:{show:false}},data:[{value:335,name:'直接访问'},{value:310,name:'邮件营销'},{value:234,name:'联盟广告'},{value:135,name:'视频广告'},{value:1548,name:'搜索引擎'}]}]}";

/**折线图 */

public static final String bb = "{\"title\":{\"text\":\"电流图\",\"subtext\":\"电流图\",\"x\":\"left\"},\"toolbox\":{\"feature\":{\"saveAsImage\":{\"show\":true,\"title\":\"保存为图片\",\"type\":\"png\",\"lang\":[\"点击保存\"]}},\"show\":true},\"tooltip\":{\"trigger\":\"axis\"},\"legend\":{\"data\":[\"邮件营销\",\"联盟广告\",\"视频广告\"]},\"xAxis\":[{\"type\":\"category\",\"boundaryGap\":false,\"data\":[\"周一\",\"周二\",\"周三\",\"周四\",\"周五\",\"周六\",\"周日\"]}],\"yAxis\":[{\"type\":\"value\"}],\"series\":[{\"name\":\"邮件营销\",\"type\":\"line\",\"stack\":\"总量\",\"data\":[120,132,101,134,90,230,210]},{\"name\":\"联盟广告\",\"type\":\"line\",\"stack\":\"总量\",\"data\":[220,182,191,234,290,330,310]},{\"name\":\"视频广告\",\"type\":\"line\",\"stack\":\"总量\",\"data\":[150,232,201,154,190,330,410]}]}";

/**漏斗图*/

public static final String cc = "{title:{text:'漏斗图(对比)',subtext:'纯属虚构',left:'left',top:'bottom'},tooltip:{trigger:'item',formatter:'{a} <br/>{b} : {c}%'},toolbox:{show:true,orient:'vertical',top:'center',feature:{dataView:{readOnly:false},restore:{},saveAsImage:{}}},legend:{orient:'vertical',left:'left',data:['产品A','产品B','产品C','产品D','产品E']},calculable:true,series:[{name:'漏斗图',type:'funnel',width:'40%',height:'45%',left:'5%',top:'50%',funnelAlign:'right',center:['25%','25%'],data:[{value:60,name:'产品C'},{value:30,name:'产品D'},{value:10,name:'产品E'},{value:80,name:'产品B'},{value:100,name:'产品A'}]},{name:'金字塔',type:'funnel',width:'40%',height:'45%',left:'5%',top:'5%',sort:'ascending',funnelAlign:'right',center:['25%','75%'],data:[{value:60,name:'产品C'},{value:30,name:'产品D'},{value:10,name:'产品E'},{value:80,name:'产品B'},{value:100,name:'产品A'}]},{name:'漏斗图',type:'funnel',width:'40%',height:'45%',left:'55%',top:'5%',funnelAlign:'left',center:['75%','25%'],data:[{value:60,name:'产品C'},{value:30,name:'产品D'},{value:10,name:'产品E'},{value:80,name:'产品B'},{value:100,name:'产品A'}]},{name:'金字塔',type:'funnel',width:'40%',height:'45%',left:'55%',top:'50%',sort:'ascending',funnelAlign:'left',center:['75%','75%'],data:[{value:60,name:'产品C'},{value:30,name:'产品D'},{value:10,name:'产品E'},{value:80,name:'产品B'},{value:100,name:'产品A'}]}]}";

/**仪表盘*/

public static final String dd ="{tooltip:{formatter:'{a} <br/>{c} {b}'},toolbox:{show:true,feature:{restore:{show:true},saveAsImage:{show:true}}},series:[{name:'速度',type:'gauge',z:3,min:0,max:220,splitNumber:11,radius:'50%',axisLine:{lineStyle:{width:10}},axisTick:{length:15,lineStyle:{color:'auto'}},splitLine:{length:20,lineStyle:{color:'auto'}},axisLabel:{backgroundColor:'auto',borderRadius:2,color:'#eee',padding:3,textShadowBlur:2,textShadowOffsetX:1,textShadowOffsetY:1,textShadowColor:'#222'},title:{fontWeight:'bolder',fontSize:20,fontStyle:'italic'},detail:{formatter:function(value){value=(value+'').split('.');value.length<2&&(value.push('00'));return('00'+value[0]).slice(-2)+'.'+(value[1]+'00').slice(0,2);},fontWeight:'bolder',borderRadius:3,backgroundColor:'#444',borderColor:'#aaa',shadowBlur:5,shadowColor:'#333',shadowOffsetX:0,shadowOffsetY:3,borderWidth:2,textBorderColor:'#000',textBorderWidth:2,textShadowBlur:2,textShadowColor:'#fff',textShadowOffsetX:0,textShadowOffsetY:0,fontFamily:'Arial',width:100,color:'#eee',rich:{}},data:[{value:40,name:'km/h'}]},{name:'转速',type:'gauge',center:['20%','55%'],radius:'35%',min:0,max:7,endAngle:45,splitNumber:7,axisLine:{lineStyle:{width:8}},axisTick:{length:12,lineStyle:{color:'auto'}},splitLine:{length:20,lineStyle:{color:'auto'}},pointer:{width:5},title:{offsetCenter:[0,'-30%'],},detail:{fontWeight:'bolder'},data:[{value:1.5,name:'x1000 r/min'}]},{name:'油表',type:'gauge',center:['77%','50%'],radius:'25%',min:0,max:2,startAngle:135,endAngle:45,splitNumber:2,axisLine:{lineStyle:{width:8}},axisTick:{splitNumber:5,length:10,lineStyle:{color:'auto'}},axisLabel:{formatter:function(v){switch(v+''){case'0':return'E';case'1':return'Gas';case'2':return'F';}}},splitLine:{length:15,lineStyle:{color:'auto'}},pointer:{width:2},title:{show:false},detail:{show:false},data:[{value:0.5,name:'gas'}]},{name:'水表',type:'gauge',center:['77%','50%'],radius:'25%',min:0,max:2,startAngle:315,endAngle:225,splitNumber:2,axisLine:{lineStyle:{width:8}},axisTick:{show:false},axisLabel:{formatter:function(v){switch(v+''){case'0':return'H';case'1':return'Water';case'2':return'C';}}},splitLine:{length:15,lineStyle:{color:'auto'}},pointer:{width:2},title:{show:false},detail:{show:false},data:[{value:0.5,name:'gas'}]}]}";

}

④生成效果

        分别修改第二步main方法中optiona 的值，等于Constant.aa，bb，cc，dd，ee，观察到D:\AAAA\A\Echart\文件夹下生成的json文件和png文件。

    echars的js参考了这位前辈的csdn：https://blog.csdn.net/leftwukaixing/article/details/89449071，感谢！