SptingBoot基于Echarts生成折线图，柱状图，超详细~~

本文介绍: 近期产品团伙给了一个生成PDF数据报的需求，PDF中需要生成折线图，梯状折现图，柱状图等需求以及一些表格信息的东西，我这边就去找到前端开发工程师，但是前端工程师并没有好的方案给出，于是乎就由后台开发来生成图片，并写入PDF中。下面我把我生成统计图的方法（大部分参考+整合）写成文章，需要的兄弟姐妹们可以参考和纠正我。

在这里插入图片描述

看看这些代码有没有觉得很眼熟的感觉？？

下面我们来使用Ph antomJS运行这个echarts–convert.js

1.copy的项目下打开cmd黑窗口
2.执行 &lt;phantomjs echarts-convert.js -s -p 6666&gt;
3.黑窗口打印【echarts-convert server start success. [pid]=10364】表明启动成功

–s或–server：开启服务监听，如果开启服务端，则-o不生效，这也就意味不能使用脚本命令生成图片；
–p或–port：端口号，只有-s启用时生效，改变监听端口号；

2.Spr in gBoot 实现 统计图生成

1.pom.xml重要依赖

		&lt;!--①--&gt;
         &lt;dependency&gt;
            <groupId&gt;org.freemarker</groupId&gt;
            <artifactId&gt;freemarker</artifactId&gt;
            <version&gt;2.3.28</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.7</version>
        </dependency>

【依赖①】freema rker是什么？FreeMa rker是一个用Jav a 语言编写的模板引擎，它基于模板来生成文本输出。其原理如下图所示：

FreeMarker详细手册传送门

2.图片 数据 模板

在这里，我就用生成单折线图来做示例。
模板格式均可在 Echarts（官方示例地址）搜索。

{
	animation:false ,
	xAxis: {
		type: 'category',
		data: ${x}
	},
	yAxis: {
		type: 'value'
	},
	series: [
	{
		data: ${y0},
		type: 'line',
		color:'blue',
	},
	{
		data: ${y1},
		type: 'line',
		color:'green',
	}
	]
}

在这里插入图片描述
将模板放入项目资源目录中比较舒服~~

3.JAVA代码

DTO

@Data
public class ImageDataDto {
	/**
	*标题
	**/
    private String title;
    /**
	*X轴
	**/
    private List<String> x;
    /**
	*y轴（多）
	**/
    private List<List<Double>> y = new ArrayList();
}

逻辑代码

public String linecreateImage(ImageDataDto dto) throws IOException, TemplateException {
		//新建Map装载数据
        HashMap<String, Object> data = new HashMap<>();
        data.put("x", JSON.toJSONString(dto.getX()));
        data.put("y0", JSON.toJSONString(dto.getY().get(0)));
        data.put("y1", JSON.toJSONString(ddto.getY().get(1)));
        //模板引擎
        String options = FreemarkerUtil.generateString("optionline.ftl", "/teplate", data);
        //文件夹路径
        String filePath = "";
        String name = filePath + UUID.randomUUID().toString() + ".png";
        // 文件输出到指定路径方法
        generateImage(EchartsUtil.generateEchartsBase64(options), name);
        return name;
    }

private static void generateImage(String base64, String s) {
		//文件
        BASE64Decoder decoder = new BASE64Decoder();
        try (OutputStream out = new FileOutputStream(s)) {
            // 解密
            byte[] b = decoder.decodeBuffer(base64);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }
            out.write(b);
            out.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

Freema rkerUtil工具类

public class FreemarkerUtil {
    private static final String path = FreemarkerUtil.class.getClassLoader().getResource("").getPath();

    public static String generateString(String templateFileName, String templateDirectory, Map<String, Object> datas)
            throws IOException, TemplateException {
        Configuration configuration = new Configuration(Configuration.VERSION_2_3_0);

        // 设置默认编码
        configuration.setDefaultEncoding("UTF-8");

        // 设置模板所在文件夹
        configuration.setDirectoryForTemplateLoading(new File(path + templateDirectory));

        // 生成模板对象
        Template template = configuration.getTemplate(templateFileName);

        // 将datas写入模板并返回
        try (StringWriter stringWriter = new StringWriter()) {
            template.process(datas, stringWriter);
            stringWriter.flush();
            return stringWriter.getBuffer().toString();
        }
    }
}

是的~到这里就已经完事了，不出意外你指定的文件夹下已经有生成的图片。
在这里插入图片描述

结尾

图片生成到文件夹中，就可以为我所用，比如我需要写入 pdf中生成报告。。。。这里的demo只是简单的折线图，不过就可以满足很多人的需求，如果需要更复杂的去Echarts 官网查找。
其实java 后台生成这种统计图的需求是很少的~~
本人曾使用过jfreechart等其他统计图生成方案均不本文所介绍的理想，如果大家有什么更好用的，欢迎分享。