Echarts Dynamic Data loading via Ajax

　　

One:

    <!--introduced echarts.js--    <script type= "Text/javascript" src= "Echarts.min.js" ></script>    < !--Introducing Jquery.js--    <script type= "Text/javascript" src= "Jquery-1.12.3.js" ></script>

Two:

<!--prepare a size (wide-height) Dom-to-    <div id= "main" style= "width:600px;height:400px for Echarts;" ></div>

Three:

function ShowView () {$ ("#view"). Show (); //initializing an Echarts instancevar mychart = echarts.init (document.getElementById (' View '))); //Show title, legend, and empty axesmychart.setoption ({title: {text:' Asynchronous Data loading example '}, tooltip: {}, Legend: {data:[' Number of registrations ']}, Xaxis: {data: []}, YAxis: { }, Series: [{name:' Number of registrations ', type:' Bar ', data: []}]});    Mychart.showloading (); //display a simple loading animation before the data is loadedvar names=[];//Date Array (actually used to hold x-axis coordinate values)var nums=[];//Register an array of numbers (actually used to hold the y-coordinate value)$.ajax ({type:"POST", DataType:"JSON", URL:"${pagecontext.request.contextpath}/back/customerdata/getviewlist.action", Success:function (data) {if(data.rows) { for(Var i=0;i<data.rows.length;i++) {Names.push (data.rows[i].registtime); //Take out the category and fill in the category array                             }                          for(Var i=0;i<data.rows.length;i++) {Nums.push (data.rows[i].registerday); //Take out the category and fill in the category array} mychart.hideloading (); //Hide Load AnimationsMychart.setoption ({//Load Data GraphXaxis: {data:names}, Series: [{//correspond to the corresponding series according to the nameName: ' Number of registrations ', data:nums}] })                    }Else{msgshow ("System Prompt", "Data query Error", "Warning");                         }                },            }); //display charts using the established configuration items and datamychart.setoption (option); }

Four: Background action

 Public voidGetviewlist ()throwsexception{String SQL= "Select Date_format (f.registdate, '%y-%m-%d ') as Registtime,count (F.flowingid) as Registerday" + " From Shop_invitation_flowerwater as F "+" GROUP by Registtime "; CustomerList=customerdataservice.findlistmapbysql (SQL); Map<string, object> jsonmap =NewHashmap<string, object> ();//Define MapJsonmap.put ("Rows", customerlist);//rows button to store a list of records per pageJsonconfig Jsonconfig =NewJsonconfig (); Jsonconfig.registerjsonvalueprocessor (Date.class,NewJsonformatdate ("Yyyy-mm-dd HH:mm:ss")); Jsonobject Jo= Jsonobject.fromobject (Jsonmap, jsonconfig);//formatting resultJo.accumulate ("Issuccess", "true"); Response.setcontenttype ("Text/html;charset=utf-8"); PrintWriter out=Response.getwriter ();        Out.println (Jo.tostring ());        Out.flush ();            Out.close (); }

Echarts Dynamic Data loading via AJAX