1, download Echarts plug-in,: http://echarts.baidu.com/
2, the specific introductory case is not verbose, refer to the official tutorial: http://echarts.baidu.com/tutorial.html
3, the foreground introduces Echarts and Jquery,ajax request the corresponding JSON data
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Echarts</title> <!--introduction of Echarts.js - <Scriptsrc= "__root__/public/jquery-1.10.2.min.js"></Script> <Scriptsrc= "__root__/public/echarts.common.min.js"></Script></Head><Body> <!--prepare a DOM with size (wide height) for echarts - <DivID= "Main"style= "width:1200px;height:400px;"></Div> <Scripttype= "Text/javascript"> //Initializes a Echarts instance based on the prepared Dom varMyChart=Echarts.init (document.getElementById ('Main')); //Specify the configuration items and data for the chart varDate=[],num= []; functionGetNumber () {$.ajax ({URL:"__controller__/getregister", Async:false, DataType:'JSON', type:'Post', Success:function(msg) {varresult=Msg.result; if(Msg.code== $){ for(varI= 0; I<result.length; I++) {Date.push (result[i].date); Num.push (Result[i].count); } } } }); }; GetNumber (); Option={title: {text:'Recent registration Trend'}, tooltip: {trigger:'Axis'}, Legend: {data:['Number of registrations']}, grid: {left:'3%', right:'4%', bottom:'3%', Containlabel:true}, Toolbox: {feature: {saveasimage: {}}}, Xaxis: {type:'category', Boundarygap:false, Data:date}, YAxis: {type:'value'}, Series: [{name:'Number of registrations', type:' Line', Stack:'Total', Data:num},]}; //displays the chart using the configuration item and data you just specified. mychart.setoption (option); </Script></Body></HTML>
4. Backend interface returns JSON data
Public functionGetregister () {$user= D (' User '); $beginLastweek=Strtotime(' -30 days '); //time stamp two weeks ago $begin=Strtotime(Date(' y-m-d ',$beginLastweek)); $result=$user->field ("Register_time")->where ("Register_time > '%s '",$begin),Select (); $sql= "Select From_unixtime (register_time, '%y-%m-%d ') as Date,count (*) as Count from App_user WHERE register_time >$beginLastweekGROUP by Register_time div 86400; "; $result=$user->query ($sql); $this->ajaxreturn (Array(' Code ' =>200, ' result ' =$result)); }
Display effect:
echarts+php+mysq+ Ajax for chart drawing