selectpage + echarts结合使用
size3感谢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", \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);
}
}
};
