So verwenden Sie Echarts, um statistische Berichte in PHP zu erstellen

Echarts-Statistiken, einfaches Beispiel

Empfohlen: „PHP-Video-Tutorial“

Schauen Sie sich zuerst die Renderings an

Schauen Sie sich den Code an

HTML-Seite Bereiten Sie einen Dom für ECharts vor, mit benutzerdefinierter Breite und Höhe

<div class="panel panel-info">
　　<div class="panel-body">
　　　　<div id="echart_show" style="height:500px"></div>
　　</div>
</div>

js Die Datei kann auf die offizielle Website verwiesen oder hier heruntergeladen und eingeführt werden

<script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/nowdatachars/echarts-all.js"></script>

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(&#39;echart_show&#39;));

                my_demo_chart.showLoading({
                    text: &#39;加载中...&#39;,
                    effect: &#39;whirling&#39;
                });

                var echarts_all_option = {
                    title: {
                        text: &#39;&#39;,
                        subtext: &#39;用户走势&#39;
                    },
                    tooltip: {
                        trigger: &#39;axis&#39;
                    },
                    legend: {
                        data: [&#39;用户数&#39;, &#39;用户消耗&#39;]
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: [&#39;line&#39;, &#39;bar&#39;]},
                            restore: {show: true},
                            saveAsImage: {show: true}
//                            myTool2: {
//                                show: true,
//                                title: &#39;自定义扩展方法&#39;,
//                                icon: &#39;image://http://echarts.baidu.com/images/favicon.png&#39;,
//                                onclick: function (){
//                                    alert(&#39;自定义&#39;)
//                                }
//                            }
                        }
                    },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100
                    },
                    xAxis: [
                        {
                            type: &#39;category&#39;,
                            boundaryGap: true,
                            data: show_data[1]
                        },
                        {
                            type: &#39;category&#39;,
                            boundaryGap: true,
                            data: show_data[1]
                        }
                    ],
                    yAxis: [
                        {
                            type: &#39;value&#39;,
                            scale: true,
                            name: &#39;用户数&#39;,
                            boundaryGap: [0, 0.5]
//                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: &#39;value&#39;,
                            scale: true,
                            name: &#39;用户数&#39;,
                            boundaryGap: [0, 0.5]
                        }
                    ],
                    series: [
                        {
                            name: &#39;用户消耗&#39;,
                            type: &#39;bar&#39;,
                            xAxisIndex: 1,
                            data: show_data[0]
                        },
                        {
                            name: &#39;用户数&#39;,
                            type: &#39;line&#39;,
                            xAxisIndex: 1,
                            data:show_data[0]
                        }
                    ]
                };
                my_demo_chart.hideLoading();
                my_demo_chart.setOption(echarts_all_option);
            };

            // 获取原始数据
            $.ajax({
                url:"__CONTROLLER__/getRes",
                async:false,
                dataType:&#39;json&#39;,
                type:&#39;post&#39;,

                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 (das hier abgefragte Datum und die entsprechende Menge)

//折线统计
    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));
    }

Bisher eine einfache Echarts-Statistik Das Bild kommt heraus

Wenn Sie einige Parameter in Echarts nicht verstehen, können Sie auf die offizielle Website https://www.echartsjs.com/option.html#title

verweisen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Echarts, um statistische Berichte in PHP zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!