目录
一、在 pom.xml 引入 freemarker,用于解析 ftl 模板文件
二、在 templates 目录下 创建 echarts 目录,并放入 riskEchartsOption.ftl 模板文件
三、创建 EchartsFreemarkerUtils 工具类,用于读取解析 ftl 模板文件。
四、编写业务代码调用EchartsFreemarkerUtils.generate()
一、在 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" } }
]
}