selectpage + echarts结合使用

Stranger 5月前 540

size3感谢Karson的帮忙,谢谢/colorr
先上图
https://cdn.forum.fastadmin.net/uploads/201801/25/7e4a94ab1faee4c307a3730f66ac5812
https://cdn.forum.fastadmin.net/uploads/201801/25/708d084ebf1068357b3b055cfd8a697a
controller

 public function index()
    {
        if ($this->request->isAjax())
        {
            $client_id = $this->request->request('client_id');
            $startdate = $this->request->request('startdate');
            if (!$startdate)
            {
                $startdate = date("Y-m-d 00:00:00", \fast\Date::unixtime('day', -7)) . ' - ' . date('Y-m-d 23:59:59');
            }
            $db = db('customer_consume');
            if ($client_id)
            {
                $db->where('client_id', 'in', $client_id);
            }
            $type = 'day';
            list($start, $end) = explode(' - ', $startdate);
            $starttime = strtotime($start);
            $endtime = strtotime($end);
            //超过两个月按月进行统计
            if ($endtime - $starttime >= 84600 * 30 * 2)
            {
                $db->field('DATE_FORMAT(startdate, "%Y-%m") AS orderdate');
                $type = 'month';
            }
            else
            {
                $db->field('startdate AS orderdate');
            }
            $db->whereTime('startdate', 'between', explode(' - ', $startdate));
            
            $consumelist = $db
                    ->field('MIN(startdate) AS min_startdate')
                    ->field('MAX(startdate) AS max_startdate')
                    ->field('SUM(user_number) AS user_number_amount')
                    ->field('SUM(coin_consume) AS coin_consume_amount')
                    ->field('SUM(cash_consume) AS cash_consume_amount')
                    ->field('SUM(customer_consume) AS customer_consume_amount')
                    ->field('SUM(money) AS money_amount')
                    ->group('orderdate')
                    ->select();
            if ($type == 'month')
            {
                //按月构造数据
                $starttime = strtotime('last month', $starttime);
                while (($starttime = strtotime('next month', $starttime)) <= $endtime)
                {
                    $column[] = date('Y-m', $starttime);
                }
            }
            else
            {
                //按天构造数据
                for ($time = $starttime; $time <= $endtime;)
                {
                    $column[] = date("Y-m-d", $time);
                    $time += 86400;
                }
            }
            $list = array_fill_keys($column, 0);
            $series = [
                'user_number'      => $list,
                'coin_consume'     => $list,
                'cash_consume'     => $list,
                'customer_consume' => $list,
                'money'            => $list,
            ];
            foreach ($consumelist as $k => $v)
            {
                $series['user_number'][$v['orderdate']] = $v['user_number_amount'];
                $series['coin_consume'][$v['orderdate']] = $v['coin_consume_amount'];
                $series['cash_consume'][$v['orderdate']] = $v['cash_consume_amount'];
                $series['customer_consume'][$v['orderdate']] = $v['customer_consume_amount'];
                $series['money'][$v['orderdate']] = $v['money_amount'];
            }
            foreach ($series as $k => &$v)
            {
                $v = array_values($v);
            }
            unset($v);
            $result = array("series" => $series, 'column' => $column);
            $this->success('', null, $result);
        }
        return $this->view->fetch();
    }

view

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="commonsearch-table ">
                    <form class="form-horizontal" role="form" method="post" action="">
                        <fieldset>
                            <div class="row">
                                <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                    <label for="client_id" class="control-label col-xs-4">客户</label>
                                    <div class="col-xs-8">
                                        <input type="text" class="form-control selectpage" data-source="sort/client/index" name="client_id" data-readonly="true" />
                                    </div>
                                </div>
                                <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                    <label for="startdate" class="control-label col-xs-4">投放日期</label>
                                    <div class="col-xs-8">
                                        <input type="text" class="form-control datetimerange" name="startdate" value="" placeholder="投放日期" id="startdate" data-index="15">
                                    </div>
                                </div>
                                <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="col-sm-8 col-xs-offset-4">
                                        <button type="submit" class="btn btn-success">提交</button>
                                        <button type="reset" class="btn btn-default">重置</button></div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <table id="table" class="table table-striped table-bordered table-hover" width="100%">
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="echart" style="height:300px;width:100%;"></div>
                        </div>
                    </div>
                </table>
            </div>
        </div>
    </div>

js

var Controller = {
        index: function () {
            var form = $("#one");
            var ranges = {};
            ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
            ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
            ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
            ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
            ranges[__('今年')] = [Moment().startOf('year'), Moment().endOf('year')];
            var options = {
                timePicker: false,
                autoUpdateInput: false,
                timePickerSeconds: true,
                timePicker24Hour: true,
                autoApply: true,
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    customRangeLabel: __("Custom Range"),
                    applyLabel: __("Apply"),
                    cancelLabel: __("Clear"),
                },
                ranges: ranges,
            };
            var callback = function (start, end) {
                $(this.element).val(start.format(options.locale.format) + " - " + end.format(options.locale.format));
            };
            require(['bootstrap-daterangepicker'], function () {
                $(".datetimerange", form).each(function () {
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                        var label = picker.chosenLabel;
                        $(picker.element).data('label', label).trigger("change");
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                    });
                    $(this).daterangepicker($.extend({}, options), callback);
                });
            });
            
            Form.api.bindevent($("form[role=form]"), function (data, ret) {
                console.log(data);
                Controller.api.charts(data);
            });
            
            $(".btn-success", form).trigger('click');
        },
        api: {
            charts: function (data) {
                var myChart1 = Echarts.init(document.getElementById('echart'), 'walden');
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['用户量', '账户币消费', '现金消费', '客户消费', '充值金额']
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            magicType: {show: true, type: ['stack', 'tiled']},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.column,
                    },
                    yAxis: {
                        boundaryGap: [0, '100%'],
                        type: 'value'
                    },
                    grid: [{
                            left: '3%',
                            top: '-1%',
                            right: '4%',
                            bottom: '0',
                            containLabel: true
                        }],
                    series: [{
                            name: '用户量',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: data.series.user_number,
                        },
                        {
                            name: '账户币消费',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: data.series.coin_consume,
                        },
                        {
                            name: '现金消费',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: data.series.cash_consume,
                        },
                        {
                            name: '客户消费',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: data.series.customer_consume,
                        },
                        {
                            name: '充值金额',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: data.series.money,
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);
            }
        }
    };
最后于 5月前 被Stranger编辑
最新回复 (5)
  • zyuz 4月前
    感谢TA
    0 引用 2

    这个要收藏下。谢谢!

  • hqit 4月前
    感谢TA
    0 引用 3

    收藏

  • 感谢TA
    0 引用 4

    刚好遇到这个问题

  • 某人, 9天前
    感谢TA
    0 引用 5

    你好,你的X轴是固定的吗?请问怎么固定X轴

  • 未登录
    7
返回