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

PHP如何使用Echarts生成数据统计报表,第1张

概述PHP如何使用Echarts生成数据统计报表 echarts统计,简单示例

推荐:《PHP视频教程》

先看下效果图

看下代码

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生成数据统计报表全部内容,希望文章能够帮你解决PHP如何使用Echarts生成数据统计报表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://outofmemory.cn/langs/1159943.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-01
下一篇2022-06-01

随机推荐

  • 乾隆是谁的儿子

    乾隆是雍正跟孝圣宪皇后的儿子,那些关于乾隆身份的传闻,大多是后人杜撰的。关于乾隆的身世有一个传说。那一年,雍亲王和好友陈世倌两家的夫人在同一天分别生了孩子,但雍正夫人生的是女儿,好友生的是男孩。雍亲王

  • 范雎怎么读

    范雎的读音是f&agrave;n jū,他虽然是魏国人,却是秦国的宰相,被称为应侯,范雎曾经是须贾的门客,普通又平凡,之后他被人怀疑与齐国联合卖主求荣,还差点一命呜呼,幸好有郑安平帮助,范雎才能死里

  • 小艾在历史上是谁

    在历史上小艾的原型是小乔,也是三国时期非常有名的美女,周瑜的妻子,两人之间的感情十分甜蜜。在电影《影》中的故事背景其实就是三国时期,而小乔这个人物也被改成了小艾。 当时关羽因为一时失意失去了荆州,但

    2022-12-06
    000
  • 一品诰命夫人是什么身份

     一品诰命夫人就是一品大员的妻子。古代官员从一品到五品称诰,六品至九品称敕。明清时期形成了完备的诰封制度,一至五品官员授以诰命,夫人跟随丈夫的品级,所以有“诰命夫人”的说法。诰命夫人跟其丈夫官职密切相

    2022-12-06
    000
  • 商朝历史简介

    商朝(约公元前1600年&mdash;约公元前1046年),是中国历史上的第二个朝代,是中国第一个有直接的同时期的文字记载的王朝。商朝经历了三个大的阶段。第一阶段是&ldquo;先商&rdquo;;第

    2022-12-06
    000
  • 隋朝皇帝列表

    1、隋文帝:杨坚杨坚(541年7月21日-604年8月13日),即隋文帝(581年-604年在位),汉族,隋朝开国皇帝,中国古代著名的政治家、战略家。大定元年(581年),杨坚受北周静帝禅让为帝,改元

    2022-12-06
    000
  • 古代女子及笄是多少岁

    古代女子及笄是15岁。及笄是我国古代专门用来表达女性年龄的专用名词,在古代满15周岁女性都是要结发的,笄也就是簪子的意思,结发之后也指已到了结婚的年龄。在古代时称女子年在十五为&ldquo;及笄&rd

    2022-12-06
    000
  • 一两银子多少文

    一两银子是多少文在各个朝代都是不同的,不过就正常情况来看,一两银子大约可以换1000~1500文铜钱。在洪武八年的时候便规定银一两当钱一千文,而清代实行银钱平行本位制度,规定制钱一千文准银一两。在明代

    2022-12-06
    000
  • 哪个星座最适合短发

    哪个星座短头发最好看:1、射手座,其实对于他们来说是非常不适合留长头发的,一个短短的头发却更能够与他们相陪,这不仅可以方便玩耍,而且更能够衬托内心的性格。2、天秤座,长头发可能会在不经意之间遮住了她们

发表评论

登录后才能评论

评论列表(0条)

    保存