|
...
|
...
|
@@ -12,7 +12,8 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
$('#sum2').text(data.sum2);
|
|
|
|
$('#count3').text(data.count3);
|
|
|
|
$('#count4').text(data.count4);
|
|
|
|
lineChart.setOption(
|
|
|
|
// 已付款订单总数量
|
|
|
|
orderTotalChart.setOption(
|
|
|
|
{
|
|
|
|
xAxis: {
|
|
|
|
data: data.line.month
|
|
...
|
...
|
@@ -22,7 +23,8 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
}]
|
|
|
|
}
|
|
|
|
);
|
|
|
|
areaChart.setOption(
|
|
|
|
// 已付款订单总金额
|
|
|
|
orderTotalPriceChart.setOption(
|
|
|
|
{
|
|
|
|
xAxis: {
|
|
|
|
data: data.line.month
|
|
...
|
...
|
@@ -32,26 +34,53 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
}]
|
|
|
|
}
|
|
|
|
);
|
|
|
|
pieChart.setOption(
|
|
|
|
{
|
|
|
|
legend: {
|
|
|
|
data: data.package_rate_name
|
|
|
|
},
|
|
|
|
series: [{
|
|
|
|
data: data.package_rate,
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
);
|
|
|
|
myChart.setOption(
|
|
|
|
// 延保套餐销售占比图
|
|
|
|
var packageRateChartOption = {
|
|
|
|
legend: {
|
|
|
|
data: data.package_rate_name,
|
|
|
|
formatter: function(name) {
|
|
|
|
var data = packageRateChartOption.series[0].data;
|
|
|
|
console.log(data);
|
|
|
|
var total = 0;
|
|
|
|
var tarValue;
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
total += data[i].value;
|
|
|
|
if (data[i].name == name) {
|
|
|
|
tarValue = data[i].value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var v = tarValue;
|
|
|
|
var p = Math.round(((tarValue / total) * 100));
|
|
|
|
return `${name} ${v}订单 ${p}%`;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: [{
|
|
|
|
data: data.package_rate,
|
|
|
|
}]
|
|
|
|
};
|
|
|
|
packageRateChart.setOption(packageRateChartOption);
|
|
|
|
// 销售代表业绩排名（TOP10）(订单数量)
|
|
|
|
TopTenTotalChart.setOption(
|
|
|
|
{
|
|
|
|
yAxis: [{
|
|
|
|
data: data.top10.name,
|
|
|
|
data: data.top_ten.name,
|
|
|
|
}],
|
|
|
|
series: [{
|
|
|
|
data: data.top10.value,
|
|
|
|
data: data.top_ten.total,
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
)
|
|
|
|
);
|
|
|
|
// 销售代表业绩排名（TOP10）(订单金额)
|
|
|
|
TopTenTotalPriceChart.setOption(
|
|
|
|
{
|
|
|
|
yAxis: [{
|
|
|
|
data: data.top_ten.name,
|
|
|
|
}],
|
|
|
|
series: [{
|
|
|
|
data: data.top_ten.total_price,
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
console.log(Echarts.version);
|
|
...
|
...
|
@@ -67,7 +96,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
|
|
|
|
/*---------------------已付款订单总数量-------------------------*/
|
|
|
|
// 基于准备好的dom，初始化echarts实例(订单数量)
|
|
|
|
var lineChart = Echarts.init(document.getElementById('line-chart'), 'walden');
|
|
|
|
var orderTotalChart = Echarts.init(document.getElementById('order-total-chart'), 'walden');
|
|
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
var option = {
|
|
...
|
...
|
@@ -100,11 +129,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
};
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
lineChart.setOption(option);
|
|
|
|
orderTotalChart.setOption(option);
|
|
|
|
|
|
|
|
/*---------------------已付款订单总金额-------------------------*/
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var areaChart = Echarts.init(document.getElementById('area-chart'), 'walden');
|
|
|
|
var orderTotalPriceChart = Echarts.init(document.getElementById('order-total-price-chart'), 'walden');
|
|
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
var option = {
|
|
...
|
...
|
@@ -137,34 +166,35 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
};
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
areaChart.setOption(option);
|
|
|
|
orderTotalPriceChart.setOption(option);
|
|
|
|
|
|
|
|
/*---------------------延保套餐销售占比图-------------------------*/
|
|
|
|
var pieChart = Echarts.init(document.getElementById('pie-chart'), 'walden');
|
|
|
|
var option = {
|
|
|
|
var packageRateChart = Echarts.init(document.getElementById('package-rate-chart'), 'walden');
|
|
|
|
var packageRateChartOption = {
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'item',
|
|
|
|
formatter: '{b} {c}订单 {d}%'
|
|
|
|
},
|
|
|
|
// legend: {
|
|
|
|
// orient: 'vertical',
|
|
|
|
// left: 10,
|
|
|
|
// data: package_rate_name,
|
|
|
|
// formatter: function(name) {
|
|
|
|
// var data = option.series[0].data;
|
|
|
|
// var total = 0;
|
|
|
|
// var tarValue;
|
|
|
|
// for (var i = 0; i < data.length; i++) {
|
|
|
|
// total += data[i].value;
|
|
|
|
// if (data[i].name == name) {
|
|
|
|
// tarValue = data[i].value;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// var v = tarValue;
|
|
|
|
// var p = Math.round(((tarValue / total) * 100));
|
|
|
|
// return `${name} ${v}订单 ${p}%`;
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
legend: {
|
|
|
|
orient: 'vertical',
|
|
|
|
left: 10,
|
|
|
|
data: package_rate_name,
|
|
|
|
formatter: function(name) {
|
|
|
|
var data = packageRateChartOption.series[0].data;
|
|
|
|
console.log(data);
|
|
|
|
var total = 0;
|
|
|
|
var tarValue;
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
total += data[i].value;
|
|
|
|
if (data[i].name == name) {
|
|
|
|
tarValue = data[i].value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var v = tarValue;
|
|
|
|
var p = Math.round(((tarValue / total) * 100));
|
|
|
|
return `${name} ${v}订单 ${p}%`;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
name: '访问来源',
|
|
...
|
...
|
@@ -173,8 +203,8 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
avoidLabelOverlap: false,
|
|
|
|
label: {
|
|
|
|
normal: {
|
|
|
|
show: true,
|
|
|
|
formatter: '{b} {c}订单 {d}%'
|
|
|
|
show: false,
|
|
|
|
position: 'center'
|
|
|
|
},
|
|
|
|
emphasis: {
|
|
|
|
show: true,
|
|
...
|
...
|
@@ -194,57 +224,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
]
|
|
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
pieChart.setOption(option);
|
|
|
|
|
|
|
|
|
|
|
|
// var barChart = Echarts.init(document.getElementById('simplebar-chart'));
|
|
|
|
// option = {
|
|
|
|
// grid: {
|
|
|
|
// // 间距是 根据x、y轴计算的；假如都是0，x、y轴的label汉字就隐藏掉了。
|
|
|
|
// left: '25%', // 默认10%，给24就挺合适的。
|
|
|
|
// top: '10%',
|
|
|
|
// },
|
|
|
|
// xAxis: {
|
|
|
|
// type: 'value',
|
|
|
|
// axisLine: {
|
|
|
|
// lineStyle: {
|
|
|
|
// color: "#fff"
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// yAxis: {
|
|
|
|
// type: 'category',
|
|
|
|
// axisLine: {
|
|
|
|
// lineStyle: {
|
|
|
|
// color: "#fff"
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// data: top10.name
|
|
|
|
// },
|
|
|
|
// series: [{
|
|
|
|
// data: top10.value,
|
|
|
|
// type: 'bar',
|
|
|
|
// itemStyle: {
|
|
|
|
// normal: {
|
|
|
|
// color: "#fff",
|
|
|
|
// opacity: 0.6,
|
|
|
|
// label: {
|
|
|
|
// show: true, //开启显示
|
|
|
|
// position: 'right', //在上方显示
|
|
|
|
// textStyle: { //数值样式
|
|
|
|
// color: "#fff",
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// }]
|
|
|
|
// };
|
|
|
|
// // 使用刚指定的配置项和数据显示图表。
|
|
|
|
// barChart.setOption(option);
|
|
|
|
packageRateChart.setOption(packageRateChartOption);
|
|
|
|
|
|
|
|
/*---------------------销售代表业绩排名（TOP10）-------------------------*/
|
|
|
|
/*---------------------销售代表业绩排名（TOP10）(订单数量)-------------------------*/
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var myChart = Echarts.init(document.getElementById('simplebar-chart'));
|
|
|
|
var TopTenTotalChart = Echarts.init(document.getElementById('top-ten-total-chart'));
|
|
|
|
|
|
|
|
var option = {
|
|
|
|
tooltip: {
|
|
...
|
...
|
@@ -267,7 +251,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
yAxis: [
|
|
|
|
{
|
|
|
|
type: 'category',
|
|
|
|
data: top10.name,
|
|
|
|
data: top_ten.name,
|
|
|
|
axisTick:{show:false}, //不显示刻度线
|
|
|
|
axisLabel:{
|
|
|
|
color:"#000"
|
|
...
|
...
|
@@ -286,7 +270,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
{
|
|
|
|
yAxisIndex:0,
|
|
|
|
type: 'bar',
|
|
|
|
data: top10.value,
|
|
|
|
data: top_ten.total,
|
|
|
|
// 修改第一条柱子的圆角
|
|
|
|
itemStyle:{
|
|
|
|
normal:{
|
|
...
|
...
|
@@ -311,7 +295,78 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts' |
|
|
|
};
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
myChart.setOption(option);
|
|
|
|
TopTenTotalChart.setOption(option);
|
|
|
|
|
|
|
|
/*---------------------销售代表业绩排名（TOP10）(订单金额)-------------------------*/
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var TopTenTotalPriceChart = Echarts.init(document.getElementById('top-ten-total-price-chart'));
|
|
|
|
|
|
|
|
var option = {
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
axisPointer: {
|
|
|
|
type: 'shadow'
|
|
|
|
},
|
|
|
|
formatter: '{b} <br> {c} 元'
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
left: '1%',
|
|
|
|
top: '5%',
|
|
|
|
right: '10%',
|
|
|
|
bottom: '5%',
|
|
|
|
containLabel: true
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
show:false, //不显示x轴相关信息
|
|
|
|
},
|
|
|
|
yAxis: [
|
|
|
|
{
|
|
|
|
type: 'category',
|
|
|
|
data: top_ten.name,
|
|
|
|
axisTick:{show:false}, //不显示刻度线
|
|
|
|
axisLabel:{
|
|
|
|
color:"#000"
|
|
|
|
},
|
|
|
|
axisTick:{
|
|
|
|
show:false
|
|
|
|
},
|
|
|
|
axisLine:{
|
|
|
|
show:false
|
|
|
|
},
|
|
|
|
inverse:true
|
|
|
|
|
|
|
|
},
|
|
|
|
],
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
yAxisIndex:0,
|
|
|
|
type: 'bar',
|
|
|
|
data: top_ten.total_price,
|
|
|
|
// 修改第一条柱子的圆角
|
|
|
|
itemStyle:{
|
|
|
|
normal:{
|
|
|
|
barBorderRadius:20,
|
|
|
|
color: '#0772E3'
|
|
|
|
},
|
|
|
|
// color 可以修改柱子的颜色
|
|
|
|
// color:"orange"
|
|
|
|
},
|
|
|
|
// 柱子之间的间距
|
|
|
|
barCategoryGap:5,
|
|
|
|
// 柱子之间的宽度
|
|
|
|
barWidth:20,
|
|
|
|
// 显示柱子内的文字
|
|
|
|
label:{
|
|
|
|
show:true,
|
|
|
|
position:"right",
|
|
|
|
// {c} 会自动解析为data中的数据
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
TopTenTotalPriceChart.setOption(option);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
return Controller;
|
...
|
...
|
|
