PHP怎么使用Echarts生成数据统计报表

发布时间：2022-07-21 13:04:50 所属栏目：PHP教程来源：互联网

导读：看下代码 HTML页面为ECharts准备一个Dom，宽高自定义 div id=echart_show style=height:500px/div /div /div js文件可以参考官网，或者在这里下载，引入 script type=text/javascript src=__ROOT__/Public/admin/lib/jquery/nowdatachars/echarts-all.js/sc

　　看下代码

　　HTML页面为ECharts准备一个Dom，宽高自定义

　　　　　　<div id="echart_show" style="height:500px"></div>

　　　　</div>

　　</div>

　　js文件可以参考官网，或者在这里下载，引入

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

　　下面是具体方法

　　    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",

　　

　　                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();

　　        })();

　　//折线统计

　　    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读取文件内容几种正	php include与require
php将12小时制转换成2	PHP空白页面常见缘由及