331 lines
12 KiB
JavaScript
331 lines
12 KiB
JavaScript
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme'], function ($, undefined, Backend, Table, Form,echarts) {
|
|
|
|
var Controller = {
|
|
dashboard: function () {
|
|
|
|
Controller.api.bindevent();
|
|
Controller.echarts.item_pie();
|
|
Controller.echarts.area_pie();
|
|
Controller.echarts.source_pie();
|
|
Controller.echarts.cancel_order_pie();
|
|
Controller.echarts.money_line();
|
|
console.log(123);
|
|
|
|
},
|
|
add: function () {
|
|
Controller.api.bindevent();
|
|
},
|
|
edit: function () {
|
|
Controller.api.bindevent();
|
|
},
|
|
api: {
|
|
bindevent: function () {
|
|
Form.api.bindevent($("form[role=form]"));
|
|
}
|
|
},
|
|
echarts: {
|
|
item_pie: function(){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('item_pie'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '取消订单类型',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
},
|
|
series: [
|
|
{
|
|
name: '服务项目',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{ value: 335, name: '直接访问' },
|
|
{ value: 310, name: '邮件营销' },
|
|
{ value: 234, name: '联盟广告' },
|
|
{ value: 135, name: '视频广告' },
|
|
{ value: 1548, name: '搜索引擎' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
area_pie: function(){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('area_pie'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '取消订单类型',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
series: [
|
|
{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{ value: 335, name: '直接访问' },
|
|
{ value: 310, name: '邮件营销' },
|
|
{ value: 234, name: '联盟广告' },
|
|
{ value: 135, name: '视频广告' },
|
|
{ value: 1548, name: '搜索引擎' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
source_pie: function(){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('source_pie'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '订单地区',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
},
|
|
series: [
|
|
{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{ value: 335, name: '直接访问' },
|
|
{ value: 310, name: '邮件营销' },
|
|
{ value: 234, name: '联盟广告' },
|
|
{ value: 135, name: '视频广告' },
|
|
{ value: 1548, name: '搜索引擎' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
cancel_order_pie: function(){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('cancel_order_pie'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '订单来源',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
},
|
|
series: [
|
|
{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{ value: 335, name: '直接访问' },
|
|
{ value: 310, name: '邮件营销' },
|
|
{ value: 234, name: '联盟广告' },
|
|
{ value: 135, name: '视频广告' },
|
|
{ value: 1548, name: '搜索引擎' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
money_line: function (){
|
|
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: ['柱状图1', '柱状图2', '折线图'],
|
|
left: 'left'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '柱状图数值',
|
|
position: 'left'
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '折线图数值',
|
|
position: 'right',
|
|
min: 0, // 设置右侧y轴的最小值
|
|
max: 1 // 设置右侧y轴的最大值
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '柱状图1',
|
|
type: 'bar',
|
|
data: [120, 132, 101, 134, 90, 230],
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '柱状图2',
|
|
type: 'bar',
|
|
data: [220, 182, 191, 234, 290, 330],
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '折线图',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: [0.2, 0.3, 0.4, 0.6, 0.5, 0.8],
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#ff6600'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
}
|
|
};
|
|
return Controller;
|
|
});
|