您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)如何在PHP中使用Echarts生成一個(gè)數(shù)據(jù)統(tǒng)計(jì)報(bào)表,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
HTML頁面 為ECharts準(zhǔn)備一個(gè)Dom,寬高自定義
<div class="panel panel-info"> <div class="panel-body"> <div id="echart_show" ></div> </div> </div>
js文件可以參考官網(wǎng),或者在這里下載,引入
<script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/nowdatachars/echarts-all.js"></script>
下面是具體方法
<script type="text/javascript"> var date = [],num = []; $(document).ready(function () { // 繪制反饋量圖形 var init_echarts = function () { var refreshChart = function (show_data) { my_demo_chart = echarts.init(document.getElementById('echart_show')); my_demo_chart.showLoading({ text: '加載中...', effect: 'whirling' }); var echarts_all_option = { title: { text: '', subtext: '用戶走勢' }, tooltip: { trigger: 'axis' }, legend: { data: ['用戶數(shù)', '用戶消耗'] }, toolbox: { show: true, feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} // myTool2: { // show: true, // title: '自定義擴(kuò)展方法', // icon: 'image://http://echarts.baidu.com/images/favicon.png', // onclick: function (){ // alert('自定義') // } // } } }, dataZoom: { show: false, start: 0, end: 100 }, xAxis: [ { type: 'category', boundaryGap: true, data: show_data[1] }, { type: 'category', boundaryGap: true, data: show_data[1] } ], yAxis: [ { type: 'value', scale: true, name: '用戶數(shù)', boundaryGap: [0, 0.5] // boundaryGap: [0.2, 0.2] }, { type: 'value', scale: true, name: '用戶數(shù)', boundaryGap: [0, 0.5] } ], series: [ { name: '用戶消耗', type: 'bar', xAxisIndex: 1, data: show_data[0] }, { name: '用戶數(shù)', type: 'line', xAxisIndex: 1, data:show_data[0] } ] }; my_demo_chart.hideLoading(); my_demo_chart.setOption(echarts_all_option); }; // 獲取原始數(shù)據(jù) $.ajax({ url:"__CONTROLLER__/getRes", 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); msg[0] = num; msg[1] = date; refreshChart(msg); } } } }); }; // 默認(rèn)加載 var default_load = (function () { init_echarts(); })(); }); </script>
控制器中查詢自己需要的數(shù)據(jù) (這里查詢的日期和對應(yīng)的數(shù)量)
//折線統(tǒng)計(jì) public function getRes(){ $user = M('account'); $sql = "SELECT date(createTime) AS date,count(*) as count FROM t_account GROUP BY date "; $result = $user->query($sql); $this->ajaxReturn(array('code'=>200,'result'=>$result)); }
以上就是如何在PHP中使用Echarts生成一個(gè)數(shù)據(jù)統(tǒng)計(jì)報(bào)表,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。