java web data visualization

This week produced with java web visualization of the various provinces nationwide epidemic data, to do the most basic histogram.

First import

 

 Echarts respective packages and plug

 

 

<Script type = "text / JavaScript">
         // based ready dom, instance initialization echarts 
        var myChart = echarts.init (document.getElementById ( 'main' ));

        // Specify configurations and data charts 
        myChart.setOption ({
            title: { 
                text: 'The number of diagnosed provinces'
            },
            tooltip: {},
            legend: {
                Data: [ 'confirmed number' ],
                width:'auto',
                height:'auto'
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: 'The number of confirmed' ,
                type: 'bar',
                data: []
            }]
        });
        myChart.showLoading();
        names var = [];     // type of the array (for holding the actual X-axis coordinate value) 
        var the nums = [];     // sales array (for holding the actual Y coordinate value)
         // use just specified configurations and data show the chart.

This is the specific value to the basic framework echarts transmission request so as to acquire data from the database to the servlet by ajax,

$.ajax({
        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: "Search",     // request to the TestServlet 
        success: function (resultJson) {
            Result var = jQuery.parseJSON (resultJson);
             // the function is executed when the content request is successful, result is a server object is returned json 
            IF (Result) {
                 for (var I = 0; I <result.length; I ++ ) {
                      names.push (Result [I] .name);     // one by one taken out and filled into categories category array 
                      nums.push (result [i] .value) ;
                    }
                   myChart.hideLoading ();     // hides loading animation 
                   myChart.setOption ({         // load data table 
                       xAxis: {
                           data: names
                       },
                       series: [{
                           // under the name corresponds to the corresponding series 
                           name: 'The number of confirmed' ,
                           data: nums
                       }]
                   });
                   
            }
       },
        error : function(errorMsg) {
            // execute the function request failure 
        alert ( "request data graph failed!" );
        myChart.hideLoading();
        }
   });

In which data is to be returned to the servlet format json

request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        System.out.println("1515");
        List<Data> Data = null;
        Data = DBUtil.getAll();
        List<Mydata> mydata = new ArrayList<Mydata>();
        for (Data data : Data) {
            Mydata info = new Mydata();
            info.setName(data.getProvince());
            info.setValue(data.getConfirmed());
            mydata.add(info);
        }
        Gson gson = new Gson ();
        String json = gson.toJson(mydata);
        System.out.println(json);
        response.getWriter().write(json);

Note also want to use json json format must import the package needed, otherwise it will display an error.