LeCMS
ClassCMS
Fastadmin
iCMS
PbootCMS
PHPCMS
易优CMS
YzmCMS
讯睿CMS
极致CMS
Wordpress
HkCMS
YznCMS
WellCMS
ThinkCMF
帝国CMS
SIYUCMSsize3感谢Karson的帮忙，谢谢/colorr
先上图
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", fastDate::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); } } };希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » selectpage + echarts结合使用
