|
@@ -7,7 +7,7 @@ layui.use('form', function() { |
|
|
// form.render() |
|
|
// form.render() |
|
|
//监听select选择 专业总览 |
|
|
//监听select选择 专业总览 |
|
|
form.on('select', function(data) { |
|
|
form.on('select', function(data) { |
|
|
console.log(data); |
|
|
|
|
|
|
|
|
//console.log(data); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
// console.log(11) |
|
|
// console.log(11) |
|
@@ -74,9 +74,9 @@ $(window).load(function() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//办公业务流量 |
|
|
//办公业务流量 |
|
|
serviceEchart() |
|
|
|
|
|
|
|
|
//serviceEchart() |
|
|
//专业总览 |
|
|
//专业总览 |
|
|
majorEchart() |
|
|
|
|
|
|
|
|
//majorEchart() |
|
|
}).resize(function() { |
|
|
}).resize(function() { |
|
|
resizes() |
|
|
resizes() |
|
|
}) |
|
|
}) |
|
@@ -88,158 +88,158 @@ function resizes() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//专业总览 |
|
|
//专业总览 |
|
|
function majorEchart() { |
|
|
|
|
|
var myChart5 = echarts.init(document.getElementById('major')); |
|
|
|
|
|
|
|
|
|
|
|
option = { |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
trigger: 'item', |
|
|
|
|
|
formatter: '{b} : {c}' |
|
|
|
|
|
}, |
|
|
|
|
|
series: [{ |
|
|
|
|
|
name: '专业学生', |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: [60, 75], |
|
|
|
|
|
center: ['50%', '50%'], |
|
|
|
|
|
label: { |
|
|
|
|
|
// show: true |
|
|
|
|
|
show: false |
|
|
|
|
|
}, |
|
|
|
|
|
color: ['#6C5CEA', '#57C5F5', '#E7C900', '#FF9C95', '#59D078', '#C97FEF', '#ECBD02', '#DF59B8', '#F6685E', |
|
|
|
|
|
'#00E7B9', '#7A74F1', '#4A9ADE', '#33F0E5', '#ECBD02', '#DF59B8' |
|
|
|
|
|
], |
|
|
|
|
|
// hoverAnimation: false, |
|
|
|
|
|
data: [{ |
|
|
|
|
|
value: 10, |
|
|
|
|
|
name: '物理', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: 5, |
|
|
|
|
|
name: '数学', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: 15, |
|
|
|
|
|
name: '化学', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: 15, |
|
|
|
|
|
name: '历史', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: 5, |
|
|
|
|
|
name: '医学', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: 15, |
|
|
|
|
|
name: '计算机', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: 15, |
|
|
|
|
|
name: '矿业', |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '班级总数', |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: [50, 65], |
|
|
|
|
|
center: ['17%', '50%'], |
|
|
|
|
|
label: { |
|
|
|
|
|
// show: true |
|
|
|
|
|
show: false |
|
|
|
|
|
}, |
|
|
|
|
|
color: ['#59D078', '#57C5F5', '#E7C900'], |
|
|
|
|
|
// hoverAnimation: false, |
|
|
|
|
|
data: [{ |
|
|
|
|
|
value: 10, |
|
|
|
|
|
name: '班级总数', |
|
|
|
|
|
}] |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '专业教室', |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: [50, 65], |
|
|
|
|
|
center: ['83%', '50%'], |
|
|
|
|
|
label: { |
|
|
|
|
|
// show: true |
|
|
|
|
|
show: false |
|
|
|
|
|
}, |
|
|
|
|
|
color: ['#3E49E2', '#677BF5', '#67A0F5', '#E7C900'], |
|
|
|
|
|
// hoverAnimation: false, |
|
|
|
|
|
data: [{ |
|
|
|
|
|
value: 10, |
|
|
|
|
|
name: '教室1', |
|
|
|
|
|
}, { |
|
|
|
|
|
value: 5, |
|
|
|
|
|
name: '教室2', |
|
|
|
|
|
}, { |
|
|
|
|
|
value: 20, |
|
|
|
|
|
name: '教室3', |
|
|
|
|
|
}, { |
|
|
|
|
|
value: 30, |
|
|
|
|
|
name: '教室4', |
|
|
|
|
|
}] |
|
|
|
|
|
}, ] |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
|
|
myChart5.setOption(option); |
|
|
|
|
|
window.addEventListener("resize", function() { |
|
|
|
|
|
myChart5.resize(); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
//function majorEchart() { |
|
|
|
|
|
// var myChart5 = echarts.init(document.getElementById('major')); |
|
|
|
|
|
|
|
|
|
|
|
// option = { |
|
|
|
|
|
// tooltip: { |
|
|
|
|
|
// trigger: 'item', |
|
|
|
|
|
// formatter: '{b} : {c}' |
|
|
|
|
|
// }, |
|
|
|
|
|
// series: [{ |
|
|
|
|
|
// name: '专业学生', |
|
|
|
|
|
// type: 'pie', |
|
|
|
|
|
// radius: [60, 75], |
|
|
|
|
|
// center: ['50%', '50%'], |
|
|
|
|
|
// label: { |
|
|
|
|
|
// // show: true |
|
|
|
|
|
// show: false |
|
|
|
|
|
// }, |
|
|
|
|
|
// color: ['#6C5CEA', '#57C5F5', '#E7C900', '#FF9C95', '#59D078', '#C97FEF', '#ECBD02', '#DF59B8', '#F6685E', |
|
|
|
|
|
// '#00E7B9', '#7A74F1', '#4A9ADE', '#33F0E5', '#ECBD02', '#DF59B8' |
|
|
|
|
|
// ], |
|
|
|
|
|
// // hoverAnimation: false, |
|
|
|
|
|
// data: [{ |
|
|
|
|
|
// value: 10, |
|
|
|
|
|
// name: '物理', |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// value: 5, |
|
|
|
|
|
// name: '数学', |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// value: 15, |
|
|
|
|
|
// name: '化学', |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// value: 15, |
|
|
|
|
|
// name: '历史', |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// value: 5, |
|
|
|
|
|
// name: '医学', |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// value: 15, |
|
|
|
|
|
// name: '计算机', |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// value: 15, |
|
|
|
|
|
// name: '矿业', |
|
|
|
|
|
// } |
|
|
|
|
|
// ] |
|
|
|
|
|
// }, { |
|
|
|
|
|
// name: '班级总数', |
|
|
|
|
|
// type: 'pie', |
|
|
|
|
|
// radius: [50, 65], |
|
|
|
|
|
// center: ['17%', '50%'], |
|
|
|
|
|
// label: { |
|
|
|
|
|
// // show: true |
|
|
|
|
|
// show: false |
|
|
|
|
|
// }, |
|
|
|
|
|
// color: ['#59D078', '#57C5F5', '#E7C900'], |
|
|
|
|
|
// // hoverAnimation: false, |
|
|
|
|
|
// data: [{ |
|
|
|
|
|
// value: 10, |
|
|
|
|
|
// name: '班级总数', |
|
|
|
|
|
// }] |
|
|
|
|
|
// }, { |
|
|
|
|
|
// name: '专业教室', |
|
|
|
|
|
// type: 'pie', |
|
|
|
|
|
// radius: [50, 65], |
|
|
|
|
|
// center: ['83%', '50%'], |
|
|
|
|
|
// label: { |
|
|
|
|
|
// // show: true |
|
|
|
|
|
// show: false |
|
|
|
|
|
// }, |
|
|
|
|
|
// color: ['#3E49E2', '#677BF5', '#67A0F5', '#E7C900'], |
|
|
|
|
|
// // hoverAnimation: false, |
|
|
|
|
|
// data: [{ |
|
|
|
|
|
// value: 10, |
|
|
|
|
|
// name: '教室1', |
|
|
|
|
|
// }, { |
|
|
|
|
|
// value: 5, |
|
|
|
|
|
// name: '教室2', |
|
|
|
|
|
// }, { |
|
|
|
|
|
// value: 20, |
|
|
|
|
|
// name: '教室3', |
|
|
|
|
|
// }, { |
|
|
|
|
|
// value: 30, |
|
|
|
|
|
// name: '教室4', |
|
|
|
|
|
// }] |
|
|
|
|
|
// }, ] |
|
|
|
|
|
// }; |
|
|
|
|
|
|
|
|
|
|
|
// // 使用刚指定的配置项和数据显示图表。 |
|
|
|
|
|
// myChart5.setOption(option); |
|
|
|
|
|
// window.addEventListener("resize", function() { |
|
|
|
|
|
// myChart5.resize(); |
|
|
|
|
|
// }); |
|
|
|
|
|
//} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//办公业务流量 |
|
|
//办公业务流量 |
|
|
function serviceEchart() { |
|
|
|
|
|
// 基于准备好的dom,初始化echarts实例 |
|
|
|
|
|
myChart2 = echarts.init(document.getElementById('serviceEchart')); |
|
|
|
|
|
|
|
|
|
|
|
option = { |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
trigger: 'axis' |
|
|
|
|
|
}, |
|
|
|
|
|
color: ['#CB0005', '#EF9116', '#466AD2', '#7408A6', '#0CB5C4', '#DEBC03', '#0BB56C', '#CB1FA1'], |
|
|
|
|
|
legend: { |
|
|
|
|
|
data: ['语文'], |
|
|
|
|
|
icon: "circle", |
|
|
|
|
|
itemWidth: 7, |
|
|
|
|
|
right: '40px', |
|
|
|
|
|
top: '20px' |
|
|
|
|
|
}, |
|
|
|
|
|
grid: { |
|
|
|
|
|
left: '3%', |
|
|
|
|
|
right: '3%', |
|
|
|
|
|
bottom: '3%', |
|
|
|
|
|
top: '23%', |
|
|
|
|
|
containLabel: true |
|
|
|
|
|
}, |
|
|
|
|
|
xAxis: { |
|
|
|
|
|
type: 'category', |
|
|
|
|
|
name: '星期', |
|
|
|
|
|
boundaryGap: false, |
|
|
|
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
|
|
|
|
|
formatter: function(params) { |
|
|
|
|
|
console.log(params) |
|
|
|
|
|
// return params[0].name + ' : ' + params[0].value + ' 小时'; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
yAxis: { |
|
|
|
|
|
type: 'value', |
|
|
|
|
|
name: '办公量', |
|
|
|
|
|
}, |
|
|
|
|
|
series: [{ |
|
|
|
|
|
name: '办公量', |
|
|
|
|
|
type: 'line', |
|
|
|
|
|
stack: '总量', |
|
|
|
|
|
// lineStyle: { |
|
|
|
|
|
// color: '#000' |
|
|
|
|
|
// }, |
|
|
|
|
|
data: [120, 132, 101, 134, 90, 230, 210] |
|
|
|
|
|
}] |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
|
|
myChart2.setOption(option); |
|
|
|
|
|
window.addEventListener("resize", function() { |
|
|
|
|
|
myChart2.resize(); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
//function serviceEchart() { |
|
|
|
|
|
// // 基于准备好的dom,初始化echarts实例 |
|
|
|
|
|
// myChart2 = echarts.init(document.getElementById('serviceEchart')); |
|
|
|
|
|
|
|
|
|
|
|
// option = { |
|
|
|
|
|
// tooltip: { |
|
|
|
|
|
// trigger: 'axis' |
|
|
|
|
|
// }, |
|
|
|
|
|
// color: ['#CB0005', '#EF9116', '#466AD2', '#7408A6', '#0CB5C4', '#DEBC03', '#0BB56C', '#CB1FA1'], |
|
|
|
|
|
// legend: { |
|
|
|
|
|
// data: ['语文'], |
|
|
|
|
|
// icon: "circle", |
|
|
|
|
|
// itemWidth: 7, |
|
|
|
|
|
// right: '40px', |
|
|
|
|
|
// top: '20px' |
|
|
|
|
|
// }, |
|
|
|
|
|
// grid: { |
|
|
|
|
|
// left: '3%', |
|
|
|
|
|
// right: '3%', |
|
|
|
|
|
// bottom: '3%', |
|
|
|
|
|
// top: '23%', |
|
|
|
|
|
// containLabel: true |
|
|
|
|
|
// }, |
|
|
|
|
|
// xAxis: { |
|
|
|
|
|
// type: 'category', |
|
|
|
|
|
// name: '星期', |
|
|
|
|
|
// boundaryGap: false, |
|
|
|
|
|
// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
|
|
|
|
|
// formatter: function(params) { |
|
|
|
|
|
// console.log(params) |
|
|
|
|
|
// // return params[0].name + ' : ' + params[0].value + ' 小时'; |
|
|
|
|
|
// }, |
|
|
|
|
|
// }, |
|
|
|
|
|
// yAxis: { |
|
|
|
|
|
// type: 'value', |
|
|
|
|
|
// name: '办公量', |
|
|
|
|
|
// }, |
|
|
|
|
|
// series: [{ |
|
|
|
|
|
// name: '办公量', |
|
|
|
|
|
// type: 'line', |
|
|
|
|
|
// stack: '总量', |
|
|
|
|
|
// // lineStyle: { |
|
|
|
|
|
// // color: '#000' |
|
|
|
|
|
// // }, |
|
|
|
|
|
// data: [120, 132, 101, 134, 90, 230, 210] |
|
|
|
|
|
// }] |
|
|
|
|
|
// }; |
|
|
|
|
|
|
|
|
|
|
|
// // 使用刚指定的配置项和数据显示图表。 |
|
|
|
|
|
// myChart2.setOption(option); |
|
|
|
|
|
// window.addEventListener("resize", function() { |
|
|
|
|
|
// myChart2.resize(); |
|
|
|
|
|
// }); |
|
|
|
|
|
//} |