define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme'], function ($, undefined, Backend, Table, Form,echarts) {
var Controller = {
dashboard: function () {
Fast.api.ajax({
url: 'orderplan/data',
method:'get'
}, function (data, ret) {
Controller.echarts.top(data.top);
Controller.echarts.order(data.order);
Controller.echarts.money_line(data.lines);
Controller.echarts.cancel_order_pie(data.pie.cancel);
Controller.echarts.item_pie(data.pie.item);
Controller.echarts.area_pie(data.pie.area);
Controller.echarts.source_pie(data.pie.source);
});
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
},
echarts: {
top: function(data){
let map = [
'count','performance','total','worker'
];
$('.myplan-num').each(function(index) {
if (index === 1 || index === 2){
$(this).html('¥' + data[map[index]]);
}else {
$(this).html(data[map[index]]);
}
});
},
order: function(data){
let map = [
'abnormal','check','auditing','check','review','invoice'
];
$('.todo-plan-num').each(function(index) {
$(this).html(data[map[index]]);
});
},
item_pie: function(data){
// 基本的饼图配置
var myChart = echarts.init(document.getElementById('item_pie'));
var option = {
title: {
text: '订单项目类型',
subtext: '',
left: 'right'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
color: [
"#18d1b1",
"#3fb1e3",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
legend: {
orient: 'vertical',
left: 'left',
data: data.map(item => item.name)
},
series: [
{
name: '服务项目',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
// 监听窗口大小变化,自动重新绘制图表
window.addEventListener('resize', function() {
myChart.resize();
});
},
area_pie: function(data){
// 基本的饼图配置
var myChart = echarts.init(document.getElementById('area_pie'));
var option = {
title: {
text: '订单区域',
subtext: '',
left: 'right'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
color: [
"#18d1b1",
"#3fb1e3",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
legend: {
orient: 'vertical',
left: 'left',
data: data.map(item => item.name)
},
series: [
{
name: '订单区域',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
// 监听窗口大小变化,自动重新绘制图表
window.addEventListener('resize', function() {
myChart.resize();
});
},
source_pie: function(data){
// 基本的饼图配置
var myChart = echarts.init(document.getElementById('source_pie'));
var option = {
title: {
text: '来源店铺',
subtext: '',
left: 'right'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
color: [
"#18d1b1",
"#3fb1e3",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
legend: {
orient: 'vertical',
left: 'left',
data: data.map(item => item.name)
},
series: [
{
name: '来源店铺',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
// 监听窗口大小变化,自动重新绘制图表
window.addEventListener('resize', function() {
myChart.resize();
});
},
cancel_order_pie: function(data){
// 基本的饼图配置
var myChart = echarts.init(document.getElementById('cancel_order_pie'));
var option = {
title: {
text: '异常订单占比',
subtext: '',
left: 'right'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
color: [
"#18d1b1",
"#3fb1e3",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
legend: {
orient: 'vertical',
left: 'left',
data: data.map(item => item.name)
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
// 监听窗口大小变化,自动重新绘制图表
window.addEventListener('resize', function() {
myChart.resize();
});
},
money_line: function (data){
var myChart = echarts.init(document.getElementById('money_line'));
var option = {
title: {
text: '总业绩',
subtext: '数据',
left: 'right'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
color: [
"#18d1b1",
"#3fb1e3",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
legend: {
data: ['订单量', '营销额', '收益','收益率'],
left: 'left'
},
xAxis: [
{
type: 'category',
data: data.xAxis,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '金额',
position: 'left'
},
{
type: 'value',
name: '单量/百分比',
position: 'right',
min: 0, // 设置右侧y轴的最小值
max: 100 // 设置右侧y轴的最大值
}
],
series: [
{
name: '订单量',
type: 'bar',
data: data.series.count,
emphasis: {
focus: 'series'
},
yAxisIndex: 1,
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
},
{
name: '营销额',
type: 'bar',
data: data.series.total,
emphasis: {
focus: 'series'
},
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
},
{
name: '收益',
type: 'bar',
data: data.series.performance,
emphasis: {
focus: 'series'
},
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
},
{
name: '收益率',
type: 'line',
yAxisIndex: 1,
data: data.series.rate,
smooth: true,
lineStyle: {
color: '#ff6600'
}
}
]
};
myChart.setOption(option);
// 监听窗口大小变化,自动重新绘制图表
window.addEventListener('resize', function() {
myChart.resize();
});
}
}
};
return Controller;
});