怎么使用Echart-Java类库+thymeleaf渲染后台数据到前端Echarts图形？

本人在学习Echarts方面知识找到该链接作者的博客，很有收获，遇到些问题，特此 记录一下

首先介绍一下什么是Echarts-Java类库？

Echarts-Java就是一个基于java的Echarts开发包，即可以用Java类去构造 Echarts可能需要的全部数据结构。简单来说就是可以用java类为Echarts提供需要的数据。实现方式：后台以json的形式返回到前端，前端以js引用即可。

具体方式

1. 前端Echarts:

<div id="test" style="width: 800px ;height: 600px"></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.init(document.getElementById('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();
    Bar bar=new Bar("评价人数");
    SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyy-MM-dd");
    for (Inouts inouts : inoutsList) {
        bar.data(inouts.getIncome());
        categoryAxis.data(simpleDateFormat.format(inouts.getTime()));
    }
    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 = builder.createXmlMapper(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值转为""
        objectMapper.getSerializerProvider().setNullValueSerializer(new JsonSerializer<Object>() {
            @Override
            public void serialize(Object o, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException, JsonProcessingException {
                jsonGenerator.writeString("");
            }
        });
        return objectMapper;
    }
}

总结

把后台数据渲染到前端Echarts图形中，就四点注意：

  • 后端导入Echarts- Java的依赖，写好接口，返回json数据
  • 前端用js引用json渲染即可
  • 如果数据渲染异常，则写配置类，过滤json中的null字段
  • 还有就是版本问题，echarts-java类库的版本2.x 和3.x是不一样的，开始我用的3.x报错了，我猜测是跟Echarts的版本冲突了，所以我改成2.x就没错了