• 0
  • 0

Echart报表显示样例

2019-06-27 1045 0 admin 所属分类:Javascript

PHP 添加快速筛选日期配置

$days = array(
		array('value' => '', 'name' => '快速选择查看日期'),
		array('value' => '1', 'name' => '一天内'),
		array('value' => '3', 'name' => '三天内'),
		array('value' => '7', 'name' => '七天内'),
		array('value' => '30', 'name' => '一个月内'),
		array('value' => 'curmonth', 'name' => '本月'),
		array('value' => 'lastmonth', 'name' => '上个月'),
		array('value' => '90', 'name' => '三个月'),
		array('value' => '180', 'name' => '半年'),
		array('value' => '365', 'name' => '一年'),
);

新增上个月 和 本月信息查看

PHP相关函数

// 获取开始时间和结束时间
function getStartAndEnd($start, $end, &$msg) {
    if (!$start) {
        $start = getcookie('start') ? getcookie('start') : TIMESTAMP - 7 * 3600 * 24;
        $end = getcookie('end') ? getcookie('end') + 3600 * 24 - 10 : TIMESTAMP;
        $start = strtotime(date('Y-m-d', $start));
        $end = strtotime(date('Y-m-d', $end));
    } else {
        $start = strtotime($start);
        if (!$end) {
            $end = TIMESTAMP;
        } else {
            $end = strtotime($end);
            if ($start > $end) {
                $msg = '开始时间不能小于结束时间';
                return false;
            } else if ($start == $end) {} else if ($end > TIMESTAMP) {
                $msg = '结束时间不能大于当前时间';
                return false;
            }
            $end = strtotime(date('Y-m-d', $end)) + 3600 * 24 - 1;
        }
    }
    return ['start' = > $start, 'end' = > $end];
}



//友好化显示日期  时间格式化只与当前时间和目标时间的差值有关
function formatDay($i, $end)
{
    //获取尾部时间偏移量
    if (TIMESTAMP < $end) {
        $offset = 0;
    } else {
        $last = strtotime(date('Y-m-d', TIMESTAMP));
        $cur = strtotime(date('Y-m-d', $end));
        $offset = intval(($last - $cur) / (3600 * 24));
    }

    if ($offset == 0) {
        return '今天';
    } else if ($offset == 1) {
        return '昨天';
    } else if ($offset == 2) {
        return '前天';
    } else {
        return date('m-d', $end);
    }
}

网页排版

<div lay-filter="docDemoTabBrief">
    <div action="">
        <div>
            <div>
                <div>
                    <select name="day" lay-filter="day">{loop $days $k $v}
                        <option value="{$v['value']}">{$v['name']}</option>{/loop}</select>
                </div>
                <div>
                    <input type="text" name="begin" id="begin" placeholder="开始时间" value="{$_GET['begin']}" autocomplete="off">
                </div>
                <div>
                    <input type="text" name="end" id="end" placeholder="结束时间" value="{$_GET['begin']}" autocomplete="off">
                </div> <a onclick="updateUI()">确定</a>
            </div>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div id="ajaxData"></div>
</div>

引入Echar组件

<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

JS代码

<script type="text/javascript">
    var $;
    var day = '';
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        }

        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4-RegExp.$1.length));
        for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    layui.use(['form', 'element'], function () {
        $ = layui.$;
        form = layui.form;
        element = layui.element;
        form.on('select(day)', function(data){
            day = data.value;
            if (day=='curmonth' || day=='lastmonth') {
                if (day=='curmonth') {
                    var begin = new Date();
                    begin.setDate(1);
                    begin = begin.Format('yyyy-MM-dd');
                    var end = new Date().Format('yyyy-MM-dd');
                } else if (day=='lastmonth') {
                    var begin = new Date();
                    begin.setMonth(begin.getMonth()-1);
                    begin.setDate(1);
                    begin = begin.Format('yyyy-MM-dd');
                    var end = new Date();
                    end.setMonth(end.getMonth()-1);
                    var myyear=end.getFullYear();
                    var mymonth=end.getMonth()+1;
                    var lasyday = getLastDay(myyear,mymonth);
                    end.setDate(lasyday);
                    end = end.Format('yyyy-MM-dd');
                }
            } else if (day!='') {
              day = parseInt(day);
              var begin = new Date();
              begin.setDate(begin.getDate()-day+1);
              begin = begin.Format('yyyy-MM-dd');
              var end = new Date().Format('yyyy-MM-dd');
            }
            $('#begin').val(begin);
            $('#end').val(end);
            updateUI();
        });
        updateUI();
    });
    layui.use('laydate', function(){
        laydate = layui.laydate;
        laydate.render({
            elem: '#begin'
        });
        laydate.render({
            elem: '#end'
        });
    });
    function updateUI() {
        var begin = $('#begin').val();
        var end = $('#end').val();
        //返回 ecahrt options参数
        $.post('请求地址', {'submit':'1','formhash':'{FORMHASH}',begin:begin,end:end,_id:'{$id}'}, function(data) {
            if (data.status) {
                mymsg(data.msg,1);
                var myChart = echarts.init(document.getElementById('ajaxData'));
                myChart.setOption(data.data);
            } else {
                mymsg(data.msg,2);
            }
        });
    }
</script>

前往官网文档参考更多用法

演示代码

$begin = trim($_GET['begin']);
$end = trim($_GET['end']);
$msg = '';
$result = getStartAndEnd($begin, $end, $msg);
if (!$result) {
    Json(array('state' = > 0, 'msg' = > $msg));
}
// https://echarts.baidu.com/examples/editor.html?c=line-stack
$options = array();
$options['title']['text'] = $row['nick_name'].
' 订单相关统计';
$options['title']['subtext'] = '总接单数:%s单  总跑腿费:%s元 总垫付金额:%s元'; //子标题 支持换行 \n
$options['tooltip']['trigger'] = 'axis'; //item ....
$options['legend']['data'] = ['接单数', '总跑腿费', '总垫付金额'];
//表格大小
$options['grid'] = ['left' = > '3%', //距离左边3%
    'right' = > '4%', 'bottom' = > '3%', 'containLabel' = > true,
];
$options['xAxis'] = ['type' = > 'category', 'boundaryGap' = > false, 'data' = > [], //代填充
];
$options['yAxis'] = ['type' = > 'value', ];
$end = $result['end'];
$begin = $result['start'];
$days = intval(($end - $begin) / (3600 * 24)) + 1;
if ($days > 31) {
    $days = 31;
    $begin = $end - 86400 * 31;
}
foreach($options['legend']['data'] as $k = > $v) {
    $options['series'][$k]['name'] = $v;
    $options['series'][$k]['type'] = 'line';
    $options['series'][$k]['stack'] = '总量';
    $options['series'][$k]['data'] = [];
}
$money_1 = 0;
$money_2 = 0;
$money_3 = 0;
// 按天统计
for ($i = 1; $i <= $days; $i++) {
    $start = $begin + ($i - 1) * 3600 * 24;
    $last = $begin + $i * 3600 * 24 - 1;
    //只查询当天 下单折线图 每两个小时反映一次
    if ($days == 1) {
        for ($k = 1; $k <= 12; $k++) {
            $start = $begin + ($k - 1) * 3600 * 2;
            $last = $begin + $k * 3600 * 2;
            $options['xAxis']['data'][] = ($k * 2).
            '时';
            $options['series'][0]['data'][] = C::t(PT_ORDER) - > getRiderTakeNum($id, array('start' = > $start, 'end' = > $last));
            $options['series'][1]['data'][] = C::t(PT_ORDER) - > getRiderTakeNum($id, array('start' = > $start, 'end' = > $last), 1);
            $options['series'][2]['data'][] = C::t(PT_ORDER) - > getRiderTakeNum($id, array('start' = > $start, 'end' = > $last), 2);
        }
    } else {
        $options['xAxis']['data'][] = formatDay($days - $i, $last);
        //统计接单数
        $options['series'][0]['data'][] = C::t(PT_ORDER) - > getRiderTakeNum($id, array('start' = > $start, 'end' = > $last));
        $options['series'][1]['data'][] = C::t(PT_ORDER) - > getRiderTakeNum($id, array('start' = > $start, 'end' = > $last), 1);
        //统计总垫付金额
        $options['series'][2]['data'][] = C::t(PT_ORDER) - > getRiderTakeNum($id, array('start' = > $start, 'end' = > $last), 2);
    }
}
foreach($options['series'][0]['data'] as $k = > $v) {
    $money_1 += $v;
}
foreach($options['series'][1]['data'] as $k = > $v) {
    $money_2 += $v;
}
foreach($options['series'][2]['data'] as $k = > $v) {
    $money_3 += $v;
}
$options['title']['subtext'] = sprintf($options['title']['subtext'], $money_1, $money_2, $money_3);
Json(array('status' = > 1, 'msg' = > 'ok', 'data' = > $options));

获取某个月最后一天函数

function getLastDay(myyear, mymonth) {
    var new_date = new Date(myyear, mymonth, 0);
    return new_date.getDate();
}


Copyright 2016-2020 All Rights Reserved | 粤ICP备17139396号 粤公网安备 44520202000291号

返回顶部