PHP如何使用Echarts生成数据统计报表

echarts统计,简单示例

先看下效果图

PHP如何使用Echarts生成数据统计报表

看下代码

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

<div class="panel panel-info">
<div class="panel-body">
<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>

下面是具体方法

<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中一些参数不太理解的,大家可以参考官网 https://www.echartsjs.com/option.html#title

关于PHP如何使用Echarts生成数据统计报表的文章就分享到这,如果对你有帮助欢迎继续关注我们哦

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/41167.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
php学习php学习订阅用户
上一篇 2022年6月20日 22:50
下一篇 2022年6月20日 22:50

相关推荐

  • 我来教你phporm。

    PHP ORM(Object-Relational Mapping,对象关系映射)是一种编程技术,它允许开发者用面向对象的方式操作数据库,通过使用 PHP ORM,开发者可以避免直接编写 SQL 语句,从而提高代码的可读性和可维护性,在本文中,我们…

    2024年6月20日
    00
  • ThinkPHP5的方法和3.2的方法对比

    ThinkPHP5的方法和3.2的方法对比 助手函数 描述 cache 缓存管理(相当于3.2中的S方法) class_basename 获取类名(不包含命名空间) config 获取和设置配置参数(相当于3.2中的C方法) controller 实例化控制器(相当于3.2…

    2018年5月7日
    0186
  • 浅谈PHP中isset()、empty()、is_null()的区别

    在PHP中,isset()、empty()和is_null()都可用于测试变量的值,那么它们之间有什么差异呢?下面本篇文章就来对比一下这三个函数,了解一下它们的区别。 让我们从一些定义开始。 isset() : 你可以用isset() 来确定一…

    2023年3月29日
    04
  • 什么是daemon?PHP中如何实现daemon?

    守护进程(daemon)是一类在后台运行的特殊进程,用于执行特定的系统任务。本篇文章带大家了解一下PHP中实现daemon的方法,介绍一下编程中需要注意的地方。 PHP实现守护进程可以通过 pcntl 与 posix 扩展实现。 编程…

    2023年3月29日
    00
  • PHP中如何进行打印机和扫描仪应用开发?

    随着信息技术的不断发展,打印机和扫描仪已经成为了现代商务与生活中不可缺少的设备之一。而为了更好地满足用户的需求,开发一款能够优化打印和扫描操作的应用程序,也成为了每个开发者都想要实现的目标。本文将介…

    2023年5月17日
    01
  • PHP数组的相关介绍

    数组的覆盖 说明:如果后面的元素中的下标和前面元素的下标“重复”了,后面元素的值会覆盖前面的元素值。 数组的自增 说明:有一个固定的数组,这个时候需要在网数组中添加一个新的元素。 数组的分类 索引数组:下标…

    2018年4月7日 PHP自学教程
    0259
  • PHP8.0中的类型约束处理库:Typehint

    PHP是一门非常受欢迎的编程语言,被广泛用于Web开发领域。随着版本的不断更新,PHP的功能也日益丰富。在2020年11月,PHP8.0版本正式发布,其中一个重要的新特性就是类型约束处理库——Typehint。 Typehint是PHP8.0中…

    2023年5月18日
    03
  • 如何使用PHP实现商城的品牌搜索功能。

    近年来,随着互联网的快速发展,电商行业的崛起已成为现代商业中的一股主流趋势。而其中最具代表性的商业类型就是“购物商城”,以淘宝、京东等为代表,这些平台的业务涉及人员、库存、订单、物流等多种方面。其中,…

    2023年5月23日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息