You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
404 lines
14 KiB
404 lines
14 KiB
define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
|
|
var series=[];
|
|
$.each(Orderdata.sourcedata,function(index){
|
|
if(index != 0){
|
|
series.push({type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}});
|
|
}
|
|
|
|
});
|
|
var length=Orderdata.sourcedata[0].length;
|
|
length=length-1;
|
|
series.push({
|
|
type: 'pie',
|
|
id: 'pie',
|
|
radius: '30%',
|
|
center: ['50%', '28%'],
|
|
emphasis: {focus: 'data'},
|
|
label: {
|
|
formatter: '{b}: {@'+Orderdata.sourcedata[0][length]+'} ({d}%)'
|
|
},
|
|
encode: {
|
|
itemName: Orderdata.sourcedata[0][0],
|
|
value: Orderdata.sourcedata[0][length],
|
|
tooltip: Orderdata.sourcedata[0][length]
|
|
}
|
|
});
|
|
var Controller = {
|
|
index: function () {
|
|
// 初始化表格参数配置
|
|
Table.api.init();
|
|
|
|
//绑定事件
|
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
var panel = $($(this).attr("href"));
|
|
if (panel.length > 0) {
|
|
Controller.table[panel.attr("id")].call(this);
|
|
$(this).on('click', function (e) {
|
|
$($(this).attr("href")).find(".btn-refresh").trigger("click");
|
|
});
|
|
}
|
|
//移除绑定的事件
|
|
$(this).unbind('shown.bs.tab');
|
|
});
|
|
|
|
//必须默认触发shown.bs.tab事件
|
|
$('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");
|
|
|
|
},
|
|
table: {
|
|
one: function () {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = Echarts.init(document.getElementById('echart'), 'walden');
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: false
|
|
},
|
|
dataset: {
|
|
source: Orderdata.Personsourcedata
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {gridIndex: 0},
|
|
grid: {top: '55%'},
|
|
series:series
|
|
};
|
|
|
|
myChart.on('updateAxisPointer', function (event) {
|
|
var xAxisInfo = event.axesInfo[0];
|
|
if (xAxisInfo) {
|
|
var dimension = xAxisInfo.value + 1;
|
|
myChart.setOption({
|
|
series: {
|
|
id: 'pie',
|
|
label: {
|
|
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
|
|
},
|
|
encode: {
|
|
value: dimension,
|
|
tooltip: dimension
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
|
|
var myChart2=Echarts.init(document.getElementById('echart2'), 'walden');
|
|
var option2 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: {show: true, readOnly: false},
|
|
magicType: {show: true, type: ['line', 'bar']},
|
|
restore: {show: true},
|
|
saveAsImage: {show: true}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['合同金额', '合同份数']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: Orderdata.personcontactdata.date,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '金额',
|
|
|
|
axisLabel: {
|
|
formatter: '{value} 元'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '合同数',
|
|
|
|
axisLabel: {
|
|
formatter: '{value} 份'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '合同金额',
|
|
type: 'bar',
|
|
data: Orderdata.personcontactdata.contract
|
|
},
|
|
|
|
{
|
|
name: '合同份数',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: Orderdata.personcontactdata.num
|
|
}
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart2.setOption(option2);
|
|
|
|
var myChart3=Echarts.init(document.getElementById('echart3'), 'walden');
|
|
var option3 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: {show: true, readOnly: false},
|
|
magicType: {show: true, type: ['line', 'bar']},
|
|
restore: {show: true},
|
|
saveAsImage: {show: true}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['回款金额']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: Orderdata.personcontactdata.date,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '金额',
|
|
|
|
axisLabel: {
|
|
formatter: '{value} 元'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
|
|
{
|
|
name: '回款金额',
|
|
type: 'bar',
|
|
data: Orderdata.personcontactdata.receivables
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart3.setOption(option3);
|
|
|
|
$(window).resize(function () {
|
|
myChart.resize();
|
|
});
|
|
|
|
$(document).on("click", ".btn-refresh", function () {
|
|
setTimeout(function () {
|
|
myChart.resize();
|
|
}, 0);
|
|
});
|
|
},
|
|
two: function () {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = Echarts.init(document.getElementById('echart6'), 'walden');
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
legend: {},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: false
|
|
},
|
|
dataset: {
|
|
source: Orderdata.sourcedata
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {gridIndex: 0},
|
|
grid: {top: '55%'},
|
|
series:series
|
|
};
|
|
|
|
myChart.on('updateAxisPointer', function (event) {
|
|
var xAxisInfo = event.axesInfo[0];
|
|
if (xAxisInfo) {
|
|
var dimension = xAxisInfo.value + 1;
|
|
myChart.setOption({
|
|
series: {
|
|
id: 'pie',
|
|
label: {
|
|
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
|
|
},
|
|
encode: {
|
|
value: dimension,
|
|
tooltip: dimension
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
|
|
var myChart2=Echarts.init(document.getElementById('echart7'), 'walden');
|
|
var option2 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: {show: true, readOnly: false},
|
|
magicType: {show: true, type: ['line', 'bar']},
|
|
restore: {show: true},
|
|
saveAsImage: {show: true}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['合同金额', '合同份数']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: Orderdata.contactdata.date,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '金额',
|
|
|
|
axisLabel: {
|
|
formatter: '{value} 元'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '合同数',
|
|
|
|
axisLabel: {
|
|
formatter: '{value} 份'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '合同金额',
|
|
type: 'bar',
|
|
data: Orderdata.contactdata.contract
|
|
},
|
|
|
|
{
|
|
name: '合同份数',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: Orderdata.contactdata.num
|
|
}
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart2.setOption(option2);
|
|
|
|
var myChart3=Echarts.init(document.getElementById('echart5'), 'walden');
|
|
var option3 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: {show: true, readOnly: false},
|
|
magicType: {show: true, type: ['line', 'bar']},
|
|
restore: {show: true},
|
|
saveAsImage: {show: true}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['回款金额']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: Orderdata.contactdata.date,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '金额',
|
|
|
|
axisLabel: {
|
|
formatter: '{value} 元'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
|
|
{
|
|
name: '回款金额',
|
|
type: 'bar',
|
|
data: Orderdata.contactdata.receivables
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart3.setOption(option3);
|
|
|
|
$(window).resize(function () {
|
|
myChart.resize();
|
|
});
|
|
|
|
$(document).on("click", ".btn-refresh", function () {
|
|
setTimeout(function () {
|
|
myChart.resize();
|
|
}, 0);
|
|
});
|
|
},
|
|
|
|
},
|
|
};
|
|
|
|
return Controller;
|
|
});
|
|
|