PHP 使用Echarts生成数据统计报表的实现代码

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中一些参数不太理解的,大家可以参考官网 Echarts Documentation

时间: 2018-01-01

vue+echarts实现数据实时更新

本文实例为大家分享了vue+echarts实现数据实时更新的具体代码,供大家参考,具体内容如下 今天在管理后台新增一个图表,用了echarts,记录一下 根据数据实时更新 安装 npm install echarts --save 然后在main.js中配置一下 import echarts from 'echarts' Vue.prototype.$echarts = echarts 可以了,接下来就是在你需要用的页面写了 // html 宽高还是尽量固定吧,不然会出现一些奇奇怪怪的问题 <d

Python3随机漫步生成数据并绘制

本文为大家分享了Python3随机漫步生成数据并绘制的具体代码,供大家参考,具体内容如下 random_walk.py from random import choice #生成随机漫步的数据类 class RandomWalk(): def __init__(self,num_points=5000): #初始化随机漫步的属性 self.numpoints=num_points #随机漫步的默认点数 self.x_values=[0] #所有的随机漫步都始于(0.0) self.y_value

mysql按照天统计报表当天没有数据填0的实现代码

1.问题复现: 按照天数统计每天的总数,如果其中有几天没有数据,那么group by 返回会忽略那几天,如何填充0?如下图,统计的10-3~10-10 7天的数据,其中只有8号和10号有数据,这样返回,数据只有2个,不符合报表统计的需求.期望没有值填0 2.换个思维: 我们用一组连续的天数作为左表然后left join 要查询的数据 最后group by.:连续天数表 t1 left join 业务数据  t2 group by t1.day ,如下图: SELECT t1.`day`, COU

基于Python实现自动化生成数据报表

目录 前言 开发工具 环境搭建 主要代码 前言 不要在用手敲生成Excel数据报表了,用Python自动生成Excel数据报表!废话不多说 让我们愉快地开始吧~ 开发工具 Python版本: 3.6.4 相关模块: pandasxlwingsmatplotlib模块: xlwingsmatplotlib模块: matplotlib模块: 以及一些Python自带的模块. 环境搭建 安装Python并添加到环境变量,pip安装需要的相关模块即可. 原始数据如下,主要有水果蔬菜名称.销售日期.销售数

php版微信数据统计接口用法示例

本文实例讲述了php版微信数据统计接口用法.分享给大家供大家参考,具体如下: php版微信数据统计接口其实是非常的好用了在前版本还没有此功能是后面的版本增加上去了,下面来看一个php版微信数据统计接口的例子: 微信在1月6日时放出了新的数据分析接口传送门: 请注意: 1.接口侧的公众号数据的数据库中仅存储了2014年12月1日之后的数据,将查询不到在此之前的日期,即使有查到,也是不可信的脏数据: 2.请开发者在调用接口获取数据后,将数据保存在自身数据库中,即加快下次用户的访问速度,也降低了微信侧

基于PHPexecl类生成复杂的报表表头示例

本文实例讲述了基于PHPexecl类生成复杂的报表表头.分享给大家供大家参考,具体如下: 以前一直有需求,能把Execl里面的数据导入数据库,并且把数据库里面的数据导出到Execl中. require_once dirname(__FILE__) . '/../Classes/PHPExcel/IOFactory.php'; class PHPExeclCore extends PHPExcel_IOFactory{ public static function SummerCreateExec

分享python数据统计的一些小技巧

最近在用python做数据统计,这里总结了一些最近使用时查找和总结的一些小技巧,希望能帮助在做这方面时的一些童鞋.有些技巧是很平常的用法,平时我们没有注意,但是在特定场景,这些小方法还是能带来很大的帮助. 1.在字典中将键映射到多个值上面 {'b': [4, 5, 6], 'a': [1, 2, 3]} 有时候我们在统计相同key值的时候,希望把所有相同key的条目添加到以key为键的一个字典中,然后再进行各种操作,这时候我们就可以使用下面的代码进行操作: from collections im

如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示      源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方

利用pyecharts读取csv并进行数据统计可视化的实现

因为需要一个html形式的数据统计界面,所以做了一个基于pyecharts包的可视化程序,当然matplotlib还是常用的数据可视化包,只不过各有优劣:基本功能概述就是读取csv文件数据,对每列进行数据统计并可视化,最后形成html动态界面,选择pyecharts的最主要原因就是这个动态界面简直非常炫酷. 先上成品图: 数据读取和数据分析模块: #导入csv模块 import csv #导入可视化模块 from matplotlib import pyplot as plt from pyla