1、下載echarts插件，下載地址：http://echarts.baidu.com/
2、具體入門案例就不啰嗦了，參考官方教程：http://echarts.baidu.com/tutorial.html
3、前台引入echarts和jquery，ajax請求相應的json數據
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="__ROOT__/Public/jquery-1.10.2.min.js"></script> <script src="__ROOT__/Public/echarts.common.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 1200px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var date = [],num = []; function getNumber(){ $.ajax({ url:"__CONTROLLER__/getRegister", async:false, dataType:'json', type:'post', success:function(msg){ var result = msg.result; if(msg.code == 200){ for(var i = 0 ; i < result.length; i++){ date.push(result[i].date); num.push(result[i].count); } } } }); }; getNumber(); option = { title: { text: '近期注冊走勢' }, tooltip: { trigger: 'axis' }, legend: { data:['注冊數'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value' }, series: [ { name:'注冊數', type:'line', stack: '總量', data:num }, ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
4、后台接口返回json數據
public function getRegister(){ $user = D('User'); $beginLastweek=strtotime('-30 days'); //兩周前的時間戳 $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 > $beginLastweek GROUP BY register_time div 86400;"; $result = $user->query($sql); $this->ajaxReturn(array('code'=>200,'result'=>$result)); }
顯示效果：
