数据可视化 三步走（三）：thymeleaf + echarts 完成数据可视化

前言

     春节小长假休的比较舒服，第一天上班，继续年前未完成的内容。

     本章节完成最后一点：利用thymeleaf模板引擎 和echarts完成数据可视化。

为什么使用thymeleaf和echarts？

     1.thymeleaf是基于html的，可以先进行原型设计，即设计静态的html，然后嵌入thymeleaf标签，即使页面渲染不成功，也是标准的html页面，可读性较好，而且独立于java容器，你可以认为它就是一个标准的html页面。

    2.echarts作为百度不可多得的开源框架，这里不做详细介绍，类似于highcharts等图表展示工具，非常强大。因为我没用过，所以要尝试一下。

1.html原型设计

    1.我这里用的是bootstrap，so 去中文网找个原型吧(能自己写原型固然很牛逼，但不建议，写出来也不一定比人家的好看，不要浪费时间)。

https://v4.bootcss.com/docs/4.0/examples/

    我找了个轮播的示例，直接copy html代码到项目中的index.html中，然后自己改了改

     此时不要着急实现页面渲染部分的内容，目前只是一个静态的html，然后启动springboot，测试下index.html的样式 css js等是否加载成功,如报错或者跟样例展示效果有出入，请自行修改。

至此，我们的原型设计就完成了。

---

2.页面动态渲染，实现数据可视化

    1.首先要解决的就是前端组装echarts，还是后端组装，我们用后端组装，更灵活。那么问题来了，需要将echarts的所有属性抽象封装成model，我在网上找了个大神写的echarts-java映射类库：https://gitee.com/free/ECharts，把源码下载下来导入项目。

这个类库中用到了lombok减少代码冗余，其实就是不用自己写getter setter方法，只用注解就可以。参考：
http://blog.csdn.net/zhglance/article/details/54931430

    2. 此时我试了一下，还遇到一个问题，对象映射成json时，很多null属性也被映射成json了，这样会导致echarts的某些重要属性遭到null覆盖掉，使得echarts加载报错，所以这里就直接上解决方案：过滤掉json中的null和空字段。写一个配置类如下：

package com.cnepay.config;

import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializerProvider;
import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Primary;
import org.springframework.http.converter.json.Jackson2ObjectMapperBuilder;

import java.io.IOException;

/**
 * Created by wxq on 2018/2/2.
 */
@Configuration
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