怎么使⽤Echart-Java类库给前端提供Echarts图形提供数据？
怎么使⽤Echart-Java类库+thymeleaf渲染后台数据到前端Echarts图形？
本⽂引⽤⾃blog.csdn/u012415035/article/details/79378010
本⼈在学习Echarts⽅⾯知识到该链接作者的博客，很有收获，遇到些问题，特此记录⼀下
⾸先介绍⼀下什么是Echarts-Java类库？
Echarts-Java就是⼀个基于java的Echarts开发包，即可以⽤Java类去构造 Echarts可能需要的全部数据结构。简单来说就是可以⽤java类为Echarts提供需要的数据。实现⽅式：后台以json的形式返回到前端，前端以js引⽤即可。
具体⽅式
1. 前端Echarts:
<div id="test" ></div>
<script th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script type="text/javascript">
var mychart=echarts.ElementById('test'));
function show() {
mychart.clear();
mychart.showLoading({text:"正在努⼒读取数据"})
$.getJSON("/inout/getOption",function (data) {
if(data){
console.log(data)
mychart.setOption(data);
mychart.hideLoading();
}
});
}
show();
</script>'
2.后台⽤Echarts-Java提供的类去写接⼝，返回Json数据
（1）导⼊依赖：Echarts-Java依赖
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>2.2.6</version>
</dependency>
（2）⽤Echarts-Java提供的Option类去写⼀个接⼝，返回json
@RequestMapping("/getOption")
@ResponseBody
public Option getOption(){
SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd");
List<Inouts> inoutsList = inoutService.selectByTime(format.format(new Date()));
Option option=new Option();
option.title("近七天⼿机销售情况").tooltip(Trigger.axis).legend("评价⼈数");
CategoryAxis categoryAxis=new CategoryAxis();
thymeleaf用法
Bar bar=new Bar("评价⼈数");
SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyy-MM-dd");
for(Inouts inouts : inoutsList){
bar.Income());
categoryAxis.data(simpleDateFormat.Time()));
}
option.yAxis(new ValueAxis().boundaryGap(0d,0.01));
option.xAxis(categoryAxis);
option.series(bar);
return  option;
}
（3）运⾏项⽬，得到结果
3.如果出现数据渲染不完整的情况，即Echarts表格加载异常，⽐如没有显⽰坐标轴（我出现的就是没有显⽰坐标轴的情况）。
问题产⽣原因：Option对象在转化为json对象的过程中，为null的属性（因为有些属性我们没有配置，⾃然为null）也转换为json了，这会影响Echarts⼀些属性⽆法正常渲染。
解决⽅式：
写⼀个配置类，过滤掉json中的null即可。
@Configuration
//使⽤echarts-java
public class JacksonConfig {
@Bean
@Primary
@ConditionalOnMissingBean(ObjectMapper.class)
public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder){
ObjectMapper objectMapper = ateXmlMapper(false).build();
// 通过该⽅法对mapper对象进⾏设置，所有序列化的对象都将按改规则进⾏系列化
// Include.Include.ALWAYS 默认
// Include.NON_DEFAULT 属性为默认值不序列化
// Include.NON_EMPTY 属性为空（""）或者为 NULL 都不序列化，则返回的json是没有这个字段的。这样对移动端会更省流量
// Include.NON_NULL 属性为NULL 不序列化
objectMapper.setSerializationInclusion(JsonInclude.Include.NON_EMPTY);
// 字段保留，将null值转为""
@Override
public void serialize(Object o, JsonGenerator jsonGenerator, SerializerProvider serializerProvider)throws IOException, JsonProcessingException {                jsonGenerator.writeString("");
}
});
return objectMapper;
}
}
总结
把后台数据渲染到前端Echarts图形中，就四点注意：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。