Javaweb charts using a fan to draw Echart

Be imported JSON conversion dependencies: Baidu network disk Link: https://pan.baidu.com/s/1c3UMzCjJZ_-c5-uEy4t_9A   extraction code: uqmj

Function: query data from different years of database and drawing pie chart

servlet：

    protected  void the doGet (the HttpServletRequest Request, the HttpServletResponse Response) 
             throws ServletException, IOException { 
        QueryFromMySql queryFromMySql = new new QueryFromMySql (); 
        the ArrayList <LeiXinTj> leiXinTjs queryFromMySql.QueryBySend_time = ();    // database results obtained 
        response.setContentType ( "text / html ; charset = UTF-. 8 " ); 
        the JSONArray JSONArray = JSONArray.fromObject (leiXinTjs);    // data types into json 
        System.out.println (jsonArray.toString ()); 
        the PrintWriter Writer = response.getWriter ();
        writer.println (JSONArray);
        writer.flush (); 
        writer.Close (); 
    } 
　　database results:

html：

<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
window.onload=function(){
    jQuery(document).ready(function($) {
         
         var myChart = echarts.init(document.getElementById('container'));
         var nav=document.getElementById("nav");
            var reg = new RegExp("(d=)([a-z]*)");
            var str=window.location.search.substr(1).match(reg);
                nav.innerHTML = '<I class = "Hui-IconFont"> xe67f & #; </ I> First <span class = "c-gray en"> & gt; </ span> Statistics Annual <span class = "c- gray en "> & gt; < / span> chart <a class =" btn btn- success radius r "style =" line-height: 1.6em; margin-top: 3px "href =" javascript: location.replace (location .href); "title =" refresh "> <I class =" Hui-IconFont "> xe68f & #; </ I> </a> ' ; CI // set the chart var   Option = { 
            title: {/ / title shown in the chart 
                text: 'annual statistics (2016-11-22 to 2020-02-13)' , 
                subtext: 'real data' , 
                the X-:'center'
            },
            tooltip : {
                trigger: 'item'
         

,
                Formatter: "{A} a {B}: {C} ({D}%)" 
            }, 
            Legend: {// a small squares shown in the graph 
                Orient: 'Vertical' , 
                left: 20 is , 
                Data : [] 
            }, 
            Toolbox: { 
                Show: to true , 
                Feature: { 
                    Mark: {Show: to true }, 
                    DataView: {Show: to true , readOnly: to false }, 
                    magicType: { 
                        Show: to true,
                        // type: [ 'PIE', 'funnel on'] 
                    }, 
                    Restore: {Show: to true }, 
                    saveAsImage: {Show: to true } 
                } 
            }, 
            calculable: to true , 
            Series: [// sector provided 
                { 
                    name: ' annual statistics' , 
                    of the type: 'PIE' , 
                    the RADIUS: [ '20% ', '75%' ], 
                    Center: [ '50% ', '60%' ],
                    x: % '50 ',                // for funnel on 
                    max: 40,                 // for funnel on 
                    Sort:' Ascending ',      // for funnel on 
                    Data: [] 
                } 
            ] 
        }; 
         
         
        // calling a function 
        myChart.setOption (Option); 

        $ .ajax ({json data lead to the data provided above with Ajax @ converted servlet 
            type: "POST" , 
            the async: to true , 
            URL: "../QueryBySend_time" , 
            type: "the POST" , 
            data: 
                {
                "method":"shan"
                },
            dataType:"json",
            
            success:function(result) {
               // alert(result.selected);
                if(result)
                {
                        var d=result;
                        var leblist = [];
                        var valuelist2 = [];
                     
                    for(var i=0;i<d.length;i++){
                     
                             var m={};
                             
                            m["value"]=d[i].num;
                            m [ "name"] = d[i].name;
                            
                            valuelist2.push (m); // data sector shown 
                            leblist.push (d [i] .name) ; // sector next to the small lattice display data 

                    } 
                     
                    // add data to the data chart 
                        myChart.setOption ({ 
                            Legend: { 
                                Data: leblist 
                            }, 
                            Series: [ 
                            { 
                                name: 'annual statistics' , 
                                Data: valuelist2 
                            }] 
                        }); 
                          
           }
            }, 
            : Error function (errorMsg) {
                 // perform the function when the request fails 
            alert ( "request data failed!" );
            // myChart.hideLoading (); 
            } 
        }); 
        // acquire and process data 
         
        }); 
}
 < / Script> 
<body> 
<NAV class = "the breadcrumb" ID = "NAV"> 
</ NAV> 
<div class = "Page-Container"> 
    <div ID = "Container" style = "min-width: 700px; height : 400px "> </ div> 
</ div>

Renderings: