Heim > Artikel > Backend-Entwicklung > Detaillierte Erläuterung der Verwendung von Echarts zur Erstellung statistischer Berichte mit PHP
In diesem Artikel wird hauptsächlich der Implementierungscode von PHP vorgestellt, der Echarts zum Generieren von Datenstatistikberichten verwendet. Freunde in Not können darauf zurückgreifen.
Echarts-Statistiken, einfaches Beispiel
Sehen Sie sich zuerst die Renderings an
Sehen Sie sich den Code an
Die HTML-Seite ist ECharts Bereiten Sie eine Dom mit benutzerdefinierter Breite und Höhe vor
<p class="panel panel-info"> <p class="panel-body"> <p id="echart_show" style="height:500px"></p> </p> </p>
js-Datei Sie können auf die offizielle Website verweisen oder sie hier herunterladen und vorstellen
2b60f49ad8d806ed00cc06f7aa018ab02cacc6d41bbb37262a98f745aa00fbf0
Das Folgende ist die spezifische Methode
<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>
Fragen Sie die Daten ab, die Sie im Controller benötigen (hier werden das Datum und die entsprechende Menge abgefragt)
//折线统计 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)); }
An diesem Punkt wird ein einfaches Echarts-Statistikdiagramm angezeigt
Falls Sie einiges nicht verstehen Parameter in Echarts finden Sie auf der offiziellen Website Echarts Documentation
Verwandte Empfehlungen:
Detaillierte Erläuterung der korrekten Haltung der Verwendung von Echarts in React-Komponenten
HTML5, JS, JQuery, ECharts asynchrones Laden
ECharts3 zur Implementierung der Operation dynamischer Daten + Zeitachse
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Echarts zur Erstellung statistischer Berichte mit PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!