Java服务端使用freemarker+wkhtmltoimage生成Echart图片

在Java后端使用FreeMarker和wkhtmltoimage生成ECharts图片的基本步骤如下：

引入依赖库：
确保在项目的pom.xml中引入了FreeMarker和wkhtmltoimage的依赖。
创建FreeMarker配置：




Configuration cfg = new Configuration(Configuration.VERSION_2_3_28);
cfg.setDirectoryForTemplateLoading(new File("templates"));
cfg.setDefaultEncoding("UTF-8");

加载FreeMarker模板：




Template template = cfg.getTemplate("echartTemplate.ftl");

准备ECharts图表所需数据：




Map<String, Object> dataModel = new HashMap<>();
dataModel.put("chartTitle", "示例图表");
dataModel.put("chartData", getChartData()); // 获取图表数据的方法

生成ECharts图片：




Writer out = new OutputStreamWriter(new FileOutputStream("output.html"), "UTF-8");
template.process(dataModel, out);
out.close();
 
String imagePath = "output.png";
String htmlPath = "output.html";
 
// 使用wkhtmltoimage将HTML转换为图片
String wkhtmltoimagePath = "path/to/wkhtmltoimage";
String command = wkhtmltoimagePath + " --format png " + htmlPath + " -O " + imagePath;
 
Runtime.getRuntime().exec(command);

在这个过程中，你需要准备一个ECharts的HTML模板echartTemplate.ftl，并将其放置在templates目录下。模板中应包含ECharts的库文件以及一个用于渲染图表的容器。




<!DOCTYPE html>
<html>
<head>
    <title>ECharts 图表</title>
    <script src="path/to/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: ${chartTitle}
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data: ${chartData}
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

请确保path/to/echarts.min.js和path/to/wkhtmltoimage指向正确的资源路径。getChartData()是一个方法占位符，你需要实现该方法以返回正确的图表数据格式。

注意：在实际部署时，你可能需要考虑安全性和性能问题，例如防止恶意代码注入、处理文件IO和图像转换时的异常处理等。

Java服务端使用freemarker+wkhtmltoimage生成Echart图片

评论已关闭

推荐阅读