Three steps of data visualization (iii): Thymeleaf + echarts complete data visualization __thymeleaf

Preface Spring Festival Holiday is more comfortable, the first day of work, continue to the unfinished content before the year. The final point of this chapter is to accomplish data visualization using the Thymeleaf template engine and the echarts. Why use Thymeleaf and echarts. 1.thymeleaf is based on HTML, you can first prototype design, that is, the design of static HTML, and then embed the thymeleaf tag, even if the page rendering is not successful, but also the standard HTML page, the readability is good, and independent of the Java container, You can think of it as a standard HTML page. 2.echarts as Baidu Rare open source framework, here do not do detailed introduction, similar to Highcharts and other graphic display tools, very powerful. Because I didn't use it, so I had to try it. 1.html prototype Design 1. I use here is bootstrap,so to Chinese network to find a prototype it (can write their own prototype is very good, but do not recommend, write it is not necessarily better than others, do not waste time).

https://v4.bootcss.com/docs/4.0/examples/ I found a carousel example, directly copy the HTML code into the project index.html, and then change their own

at this time do not hurry to achieve the content of the page rendering part, is currently just a static HTML, and then start Springboot, test the index.html of the style of CSS JS, such as whether the load success, such as the error or with the sample show the effect of discrepancy, please modify.

At this point, our prototype design is complete. 2. Page dynamic rendering to achieve data visualization 1. The first thing to solve is the front-end assembly echarts, or back-end assembly, we use back-end assembly, more flexible. So the problem, need to echarts all the attributes of abstract packaging into model, I found a great god on the Internet to write the Echarts-java Map class Library: Https://gitee.com/free/ECharts, the source code download down to import projects.

This class library uses the Lombok to reduce the code redundancy, in fact, you do not have to write the Getter setter method, only with annotations. Reference:
http://blog.csdn.net/zhglance/article/details/54931430 2. At this point I tried, and also encountered a problem, when the object is mapped to JSON, many of the null properties are also mapped to JSON, This can cause some of the important attributes of echarts to be overwritten by NULL, causing the echarts to load an error, so the solution is straightforward: filter out null and empty fields in JSON. Write a configuration class as follows:

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 = Build Er.createxmLmapper (False). build ();
        The Mapper object is set by this method, and all serialized objects are serialized///Include.Include.ALWAYS Default///Include.non_default property is not serialized by the default value The Include.non_empty property is empty ("") or null is not serialized, then the returned JSON does not have this field. This will save the flow of traffic//Include.non_null property to NULL serialization Objectmapper.setserializationinclusion (JsonInclude.Include.NO

        N_empty);  field is preserved, and the null value is converted to "" Objectmapper.getserializerprovider (). Setnullvalueserializer (New jsonserializer<object> () {@Override public void serialize (Object o, jsongenerator jsongenerator, Serializerprovider seria
            Lizerprovider) throws IOException, jsonprocessingexception {jsongenerator.writestring ("");
        }
        });
    return objectmapper;
 }
}

with the above configuration, springboot filters null and empty fields when converting objects to JSON 3. Select a dimension for data visualization, simple point, statistical film evaluation number Back-end Code, assembly option, to echarts unfamiliar to the first official website study:

*
    * Get histogram JSON data
    *
    /Public Option getechartsoption ()
    {
        list<movie> List = Moviemapper.selectmaplist ();
        Echarts Option Object Option
        = new option ();
        Option.title ("Statistics on the number of film reviewers"). ToolTip (Trigger.axis). Legend ("Number of reviewers");
        The x axis is the value axis
        option.xaxis (new Valueaxis (). Boundarygap (0d, 0.01));

        The y axis is the
        categoryaxis category = new Categoryaxis ();
        Columnar data
        Bar bar = new Bar ("Number of reviewers");
        Circular data for
        (Movie m:list) {
            //Set class head
            Category.data (M.gettitle ());
            A histogram corresponding to the
            Bar.data (M.getevalnum ());

        Grid Grid = new Grid ();
        Grid.setleft ();
        Option.setgrid (grid);
        Option.yaxis (category);
        Option.series (bar);

        return option;
    }

Front-end code:

Reference Echarts Official document: Http://echarts.baidu.com/option.html#title: 4. Final effect

5. Release year dimension statistics (also made a pie chart statistics), with the background code:

* * Get pie chart JSON data */public Option getechartspieoption () {list<movie> List = Moviemapper.
        Selectallmaplist ();
        Option option = new option ();
        Titles title = new title ();
        Title.settext ("Year of Watercress Film release");
        Title.setsubtext ("source watercress");
        Title.setx ("center");

        Option.settitle (title);
        Prompt box Tooltip Tooltip = new Tooltip ();
        Tooltip.settrigger (Trigger.item);
        Tooltip.formatter ("{A} <br/>{b}: {C} ({d}%)");

        Option.settooltip (tooltip);
        Legend Legend Legend = new Legend ();
        list<string> legenddatalist = Arrays.aslist ("90 's", "00 's", "10", "other");
        Legend.setorient (orient.vertical);
        Legend.setleft ("left");
        Legend.setdata (legenddatalist);

        Option.setlegend (legend);
        Pie-Chart Pie pie = new Pie ();
        Simple processing of data int y90 = 0;
        int y00 = 0;
        int Y10 = 0;
      int yelse = 0;  for (Movie movie:list) {if (Movie.getmyear (). StartsWith ("199")) {y90++;
            else if (Movie.getmyear (). StartsWith (")") {y00++;
            else if (Movie.getmyear (). StartsWith ("201")) {y10++;
            } else{yelse++;
        } map<string,string> DataMap90 = new hashmap<> ();
        Datamap90.put ("name", "90 's");
        Datamap90.put ("Value", string.valueof (y90));
        map<string,string> dataMap00 = new hashmap<> ();
        Datamap00.put ("name", "00 's");
        Datamap00.put ("Value", string.valueof (y00));
        map<string,string> DATAMAP10 = new hashmap<> ();
        Datamap10.put ("name", "10 's");
        Datamap10.put ("Value", string.valueof (Y10));
        map<string,string> datamapelse = new hashmap<> ();
        Datamapelse.put ("name", "other"); Datamapelse.put ("Value", String.valuEOf (Yelse));
        Package Pie Pie.data (DataMap90, dataMap00, DATAMAP10, Datamapelse);
        Pie.setname ("Release Age");
        Pie.setradius ("55%");
        String [] Centerarray = {"50%", "60%"};

        Pie.setcenter (Centerarray);

        Option.series (PIE);
    return option; }

Effect:

So far, we have completed two dimensions of data visualization.
' Summary: The raw data comes from Douban, using the Python scrapy framework to crawl data and store data. On this basis, using Springboot + thymeleaf + echarts for simple data visualization. Thus the complete display network data collection, the storage, the processing and the use four links involve the technology chain.