이 글에서는 주로 Echarts를 사용하여 데이터 통계 보고서를 생성하는 PHP 구현 코드를 소개합니다. 필요한 친구는
echarts 통계, 간단한 예
를 참고하세요. 먼저 아래는 렌더링입니다.
코드 보기
HTML 페이지는 사용자 정의된 너비와 높이로 ECharts용 Dom을 준비합니다.
<p class="panel panel-info"> <p class="panel-body"> <p id="echart_show" style="height:500px"></p> </p> </p>
js 파일은 공식 홈페이지를 참고하시거나, 여기서 다운받아서
cb979feae670d3b2ecb76f2e8193d19b2cacc6d41bbb37262a98f745aa00fbf0
구체적인 방법은 다음과 같습니다
# 🎜🎜#
<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: ['用户数', '用户消耗'] }, 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: '自定义扩展方法', // 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: '用户数', boundaryGap: [0, 0.5] // boundaryGap: [0.2, 0.2] }, { type: 'value', scale: true, name: '用户数', boundaryGap: [0, 0.5] } ], series: [ { name: '用户消耗', type: 'bar', xAxisIndex: 1, data: show_data[0] }, { name: '用户数', type: 'line', xAxisIndex: 1, data:show_data[0] } ] }; my_demo_chart.hideLoading(); my_demo_chart.setOption(echarts_all_option); }; // 获取原始数据 $.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); } } } }); }; // 默认加载 var default_load = (function () { init_echarts(); })(); }); </script>컨트롤러에서 필요한 데이터를 쿼리합니다(날짜 및 해당 수량은 여기에서 쿼리됩니다)
//折线统计 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)); }#🎜🎜 #
이때 간단한 echarts 통계차트가 나왔습니다
echarts의 일부 매개변수를 이해하지 못하는 경우 참고하시면 됩니다. 공식 웹 사이트 Echarts Documentation
# 🎜🎜#관련 권장 사항:PHP는 휴대폰 번호를 기준으로 운영자를 결정합니다
#🎜🎜 #Laravel5.2는 Captcha 생성 인증 코드를 사용하여 로그인합니다
PHP 정렬 알고리즘 시리즈의 버킷 정렬에 대한 자세한 설명
위 내용은 Echarts를 사용하여 통계 보고서를 생성하는 PHP 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!