Srping boot + ECharts simple application

Be in the project, the project required to be a line chart displays the number of online statistics, (the number of statistics stored in the database), not previously done line chart, find the Internet

Baidu produced ECharts, a few days after reading the document under test (because the official website of the online document written in very simple), then studied under, complete, and now write a simple interaction of the front and rear end, as follows: 

first step:

Get Echarts

Select from the official website to download the version you need to download interface, based on the needs of the developer features and volume, we offer different packages to download, if you are not asked in the volume, you can download the full version. Development environment is recommended to download the source code version (I use the source code version)

Step two: the front page plus ajax

<! DOCTYPE HTML > 
< HTML > 
< head > 
    < Meta charset = "UTF-. 8" > 
    <-! Introduced ECharts File -> 
    < Script the src = "../../ JS / echarts.min.js" > </ Script > 
    < Script the src = "../../ JS / jQuery-2.1.3.js" > </ Script > 
</ head > 

< body > 
    <-! to prepare ECharts includes a size (width high) in the DOM -> 
    < div ID = "main" style= "width: 600px; height: 400px;" > </ div > 

    < Script type = "text / JavaScript" > 

        // based ready dom, instance initialization echarts 
        var myChart = echarts.init (document.getElementById ( ' main ' ));
         // the specified configurations and the data table 
        var names = [];
         var values = []; 

        // to display a simple piece of data is loaded before loading the animation 
        myChart.showLoading (); 

        // asynchronous request 
        $. ajax ({ 
            of the type: " POST "  ,
            the async:to true ,             // asynchronous request (synchronous request will lock the browser, the user must wait for the request to complete other operations may be performed before) 
            URL: " / EcharsShow " ,     // request to the dataActiont 
            Data: {}, 
            dataType: " JSON " ,         // return data in the form of json 
            success: function (Result) {
                 // implementation of the function contents request succeeds, result is a server object is returned json 
                IF (Result) {
                     for ( var I = 0 ; I < Result. length; i ++ ) {
                        names.push (Result [I] .time); 
                        values.push (Result [I] .number); 
                    } 
                    myChart.hideLoading ();     // hides loading animation 
                    // load line graph shown 
                    myChart.setOption ( 
                        { 
                            title: { 
                                text: ' The number of landing statistics ' 
                            }, 
                            ToolTip: {}, 
                            Legend: { 
                                Data: [ ' number ' ] 
                            },
                            XAXIS: { 
                                Data: names 
                            }, 
                            YAXIS: { 
                            }, 
                            Series: [ 
                                { 
                                    name: ' The number of landing ' , 
                                    type: ' Line ' , 
                                    Data: values 

                                } 
                            ] 
                        } 
                    ); 
                } 
            },
            error: function{(errorMsg)
                 // execute the request fails this function 
                Alert ( " Chart request data fails! " ); 
                myChart.hideLoading (); 
            } 
        }); // End Ajax 

    </ Script > 
</ body > 
</ HTML >

third step:

Write SpringBoot background

Entity class

import lombok.AllArgsConstructor;
import lombok.Data;


@Data
@AllArgsConstructor
public class FlowBean {
    /**
     * 主键id
     */
    private int id;

    /**
     * 人数
     */
    private int number;

    /**
     * 时间
     */
    private String time;

    public FlowBean() {
    }

    public FlowBean(int number, String time) {
        this.number = number;
        this.time = time;
    }


}

Controller write back

import com.lovo.service.IFlowService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Description;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class OnlineController {
    @Autowired
    private IFlowService flowService;

    @Description("获取Echarts数据")
    @RequestMapping(value = "/EcharsShow",method = RequestMethod.POST)
    @ResponseBody
    public List<FlowBean> sexOnline(){
        List<FlowBean> flowBeans = flowService.sexOnline();
        System.out.println("flowBeans = " + flowBeans);
        return flowBeans;
    }
}

Renderings

ECharts