使用JAVA在后端生成echarts格式的option内容

目录

一、在 pom.xml 引入 freemarker，用于解析 ftl 模板文件

二、在 templates 目录下 创建 echarts 目录，并放入 riskEchartsOption.ftl 模板文件

三、创建 EchartsFreemarkerUtils 工具类，用于读取解析 ftl 模板文件。

四、编写业务代码调用EchartsFreemarkerUtils.generate（）

 map结构如下：

 返回json格式的option内容

一、在 pom.xml 引入 freemarker，用于解析 ftl 模板文件

<!-- 解析ftl模板文件 -->
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.31</version>
        </dependency>

二、在 templates 目录下 创建 echarts 目录，并放入 riskEchartsOption.ftl 模板文件

{
"title": {
"text": "${dateRange}",
"subtext": "共${carCount}台车接入德行第三方账号监管服务",
"left": "center"
},
"legend": {
"top": "bottom"
},
"tooltip": {},
"dataset": {
"source": [
["product", "共处置风险","一级报警数", "二级报警数", "三级报警数"],
["总风险数",${riskCount}, ${oneRiskLevel}, ${twoRiskLevel}, ${threeRiskLevel}],
["风险属实", ${realRiskCount}, ${oneRealRiskLevel}, ${twoRealRiskLevel}, ${threeRealRiskLevel}],
["设备误报", ${unrealRiskCount}, ${oneUnrealRiskLevel},${twoUnrealRiskLevel}, ${threeUnrealRiskLevel}]
]
},
"xAxis": [
{ "type": "category", "gridIndex": 0 },
{ "type": "category", "gridIndex": 1 }
],

"yAxis": [{ "gridIndex": 0 }, { "gridIndex": 1 }],
"grid": [{ "bottom": "55%" }, { "top": "55%" }],
"series": [

{ "type": "bar", "seriesLayoutBy": "row","label": {"show": true,"position": "inside" } },
{ "type": "bar", "seriesLayoutBy": "row","label": {"show": true,"position": "inside" } },
{ "type": "bar", "seriesLayoutBy": "row","label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } }

]
}

三、创建 EchartsFreemarkerUtils 工具类，用于读取解析 ftl 模板文件。

package com.dexin.common.utils.echarts;


import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.StringWriter;
import java.util.Map;

/**
 * 调用生成echarts option模版
 * @author yuanzhouhai
 * @version 1.0
 * @date 2024-01-18 10:29
 */
public class EchartsFreemarkerUtils {
    private static final ClassLoader CLASS_LOADER = EchartsFreemarkerUtils.class.getClassLoader();
    // 模板存放的目录
    private static final String BASE_PATH = "static/echarts";

    /**
     * 加载模板并生成ECharts的option数据字符串
     * @param templateFileName
     * @param data
     * @return {@link String}
     */
    public static String generate(String templateFileName, Map<String, Object> data) {
        Configuration configuration = new Configuration(Configuration.VERSION_2_3_31);
        // 设置默认编码
        configuration.setDefaultEncoding("UTF-8");
        // 将 data 写入模板并返回
        try {
            StringWriter writer = new StringWriter();
            // 设置模板所在目录，设置目录打成jar包后无法读取，所以使用类加载器
            // configuration.setDirectoryForTemplateLoading(new File(BASE_PATH));
            configuration.setClassLoaderForTemplateLoading(CLASS_LOADER, BASE_PATH);
            // 生成模板对象
            Template template = configuration.getTemplate(templateFileName);
            template.process(data, writer);
            writer.flush();
            return writer.getBuffer().toString();
        } catch (Exception e) {
        }
        return null;
    }

}

四、编写业务代码调用EchartsFreemarkerUtils.generate（）

String riskOps = EchartsFreemarkerUtils.generate("riskEchartsOption.ftl", map);

 map结构如下：

 返回json格式的option内容

{
"title": {
"text": "2023-11-01至2023-11-30",
"subtext": "共47台车接入德行第三方账号监管服务",
"left": "center"
},
"legend": {
"top": "bottom"
},
"tooltip": {},
"dataset": {
"source": [
["product", "共处置风险","一级报警数", "二级报警数", "三级报警数"],
["总风险数",3, 0, 1, 2],
["风险属实", 3, 0, 1, 2],
["设备误报", 0, 0,0, 0]
]
},
"xAxis": [
{ "type": "category", "gridIndex": 0 },
{ "type": "category", "gridIndex": 1 }
],

"yAxis": [{ "gridIndex": 0 }, { "gridIndex": 1 }],
"grid": [{ "bottom": "55%" }, { "top": "55%" }],
"series": [

{ "type": "bar", "seriesLayoutBy": "row","label": {"show": true,"position": "inside" } },
{ "type": "bar", "seriesLayoutBy": "row","label": {"show": true,"position": "inside" } },
{ "type": "bar", "seriesLayoutBy": "row","label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } },
{ "type": "bar", "xAxisIndex": 1, "yAxisIndex": 1,"label": {"show": true,"position": "inside" } }

]
}