fastadmin和ECharts配合使用---用於統計1-12月份以圖表形式展示相關資料資訊
阿新 • • 發佈：2019-02-13
前端頁面展示
<div class="container" style="width:100%;">
<div class="row" style="border:1px solid #999999;background-color:#ffffff;">
<!--切換條件-->
<!--商戶選擇-->
<div class="col-md-12" style="font-size:18px;">
<div class="col-md-12" style PHP部分（後端程式碼）
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/8/16
* Time: 15:33
*/
namespace app\admin\controller\report\customer;
use app\admin\model\Merchant;
use app\admin\model\CustomerInvite;
use app\common\controller\Backend;
class Customerothers extends Backend
{
/**
* 客戶分析---邀約/簽到/成交分析
* @return string
* @throws \Exception
*/
public function index()
{
//商戶的下拉資料
$merchantModel = new Merchant();
$merchantData = $merchantModel->collectionMerchantTree();
$this->assign('merchantData',$merchantData);
return $this->view->fetch();
}
public function merchantAjax(){
if($this->request->isAjax()){
$m_id = input('merchant','','intval');
//1-12月的邀約記錄數
$monthInvite = array();
for($a=1;$a<=12;$a++){
$monthInvite[$a] = CustomerInvite::statisticalMonth($a,$m_id);
}
//1-12月簽到記錄數
$monthRegister = array();
for($b=1;$b<=12;$b++) {
$monthRegister[$b] = CustomerInvite::statisticalMonth($b,$m_id,true);
}
//1-12月成交記錄數
$monthOrder = array();
for($c=1;$c<=12;$c++) {
$monthOrder[$c] = CustomerInvite::statisticalMonth($c,$m_id,true,true);
}
if($monthInvite&&$monthRegister&&$monthOrder){
$return_data['code'] = 200;
$return_data['monthInvite'] = $monthInvite;
$return_data['monthRegister'] = $monthRegister;
$return_data['monthOrder'] = $monthOrder;
echo json_encode(array('code'=>$return_data['code'],'monthInvite'=>$return_data['monthInvite'],'monthRegister'=>$return_data['monthRegister'],'monthOrder'=>$return_data['monthOrder']));die();
}
}else{
$this->request->isAjax('請求錯誤！');
}
}
}JS程式碼
var EchartsModel;
define(['jquery', 'bootstrap', 'badmin', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
EchartsModel=Echarts;
});
//切換商戶獲取ajax
function change(){
var merchant = $('#merchant').val(); //門店的mid值
$.ajax({
url:"/admin/report/customer/customerothers/merchantAjax",
type:"POST",
dataType:'json',
data : {merchant:merchant},
async:false,
success:function(e){
if(e.code==200){
//邀約
$('#invite').siblings().remove();
var html ='';
for (var i in e.monthInvite){
html +="<td style='color:#3f5fbf;text-align: center'>"+ e.monthInvite[i] +"</td>";
}
$('#invite').after(html);
//簽到
$('#register').siblings().remove();
var html1 ='';
for (var j in e.monthRegister){
html1 +="<td style=' color:#3f5fbf;text-align: center'>"+ e.monthRegister[j] +"</td>";
}
$('#register').after(html1);
//成交
$('#order').siblings().remove();
var html2 ='';
for (var q in e.monthOrder){
html2 +="<td style='color:#3f5fbf;text-align: center'>"+ e.monthOrder[q] +"</td>";
}
$('#order').after(html2);
$data = e.data;
var inviteArr = [];
var registerArr = [];
var orderArr = [];
for(var ii=1;ii<=12;ii++) {
inviteArr[ii-1] = e.monthInvite[ii];
registerArr[ii-1] = e.monthRegister[ii];
orderArr[ii-1] = e.monthOrder[ii];
}
var myChart = EchartsModel.init(document.getElementById('echart'));
//測試
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
//configParameters部分
myChart.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: EchartsModel.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
//config部分
myChart.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: myChart.config.rotate,
align: myChart.config.align,
verticalAlign: myChart.config.verticalAlign,
position: myChart.config.position,
distance: myChart.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
//labelOption部分
var labelOption = {
normal: {
show: true,
position: myChart.config.position,
distance: myChart.config.distance,
align: myChart.config.align,
verticalAlign: myChart.config.verticalAlign,
rotate: myChart.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#eee'
}
}
}
};
//option部分
option = {
color: ['#003366', '#006699', '#4cabce'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['邀約', '簽到', '成交']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邀約',
type: 'bar',
barGap: 0,
label: labelOption,
data: inviteArr
},
{
name: '簽到',
type: 'bar',
label: labelOption,
data: registerArr
},
{
name: '成交',
type: 'bar',
label: labelOption,
data: orderArr
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
}
}
})
}初始頁面效果
點選商戶效果（選擇）
