658 lines
17 KiB
JavaScript
658 lines
17 KiB
JavaScript
if($(window).width() > 991) {
|
||
var total = window.innerHeight;
|
||
document.getElementById("title").style.height = total * 0.1 + "px";
|
||
document.getElementById("main").style.height = total * 0.9 + "px";
|
||
title = document.getElementById("title");
|
||
main = document.getElementById("main");
|
||
|
||
box02 = document.getElementById("box02");
|
||
box03 = document.getElementById("box03");
|
||
box04 = document.getElementById("box04");
|
||
title_h = title.offsetHeight;
|
||
main_h = main.offsetHeight;
|
||
|
||
box02_h = box02.offsetHeight;
|
||
box03_h = box03.offsetHeight;
|
||
box04_h = box04.offsetHeight;
|
||
document.getElementById("box01").style.height = '400px';
|
||
document.getElementById("box8-box").style.height ='236px';
|
||
box02.style.height = main_h * 0.62 + "px";
|
||
document.getElementById("box9-box").style.height = main_h * 0.25 + "px";
|
||
box03.style.height = main_h * 0.425 + "px";
|
||
box04.style.height = main_h * 0.475 + "px";
|
||
box01 = document.getElementById("box01");
|
||
box01_h = box01.offsetHeight;
|
||
document.getElementById("live-box").style.height = box01_h * 0.05 + "px";
|
||
document.getElementById("ym-menu").style.height = box03_h * 0.1 + "px";
|
||
};
|
||
var app = angular.module('myApp', []);
|
||
app.controller('customersCtrl', function($scope, $http) {
|
||
$http({
|
||
method: 'get',
|
||
url: 'data/da.json'
|
||
}).then(function(res) {
|
||
$scope.listHead = res.data.listHead; //数据列表-头
|
||
$scope.listContent = res.data.listContent; //数据列表
|
||
$scope.listData1 = res.data.listData1; //数据列表
|
||
//日均额
|
||
var worldMapContainer2 = document.getElementById('box2');
|
||
var worldMapContainer6 = document.getElementById('box6');
|
||
var box01 = document.getElementById("box01");
|
||
var box01_h = box01.offsetHeight;
|
||
var box01_w = box01.offsetWidth;
|
||
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
|
||
var resizeWorldMapContainer2 = function() {
|
||
worldMapContainer2.style.width = box01_w * 0.96 + 'px';
|
||
worldMapContainer2.style.height = '280px';
|
||
};
|
||
var resizeWorldMapContainer6 = function() {
|
||
worldMapContainer6.style.width = box01_w * 0.96 + 'px';
|
||
worldMapContainer6.style.height = '280px';
|
||
};
|
||
resizeWorldMapContainer6()
|
||
//设置容器高宽
|
||
resizeWorldMapContainer2();
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(worldMapContainer2);
|
||
worldMapContainer6.style.height = '280px';
|
||
var myChart6 = echarts.init(worldMapContainer6);
|
||
var option = {
|
||
color: ['#38b3f1'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#ccc'
|
||
},
|
||
grid: {
|
||
top: '10%',
|
||
left: '3%',
|
||
right: '3%',
|
||
bottom: '6%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: res.data.titleList,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value'
|
||
}],
|
||
series: [{
|
||
name: 'SPC',
|
||
type: 'line',
|
||
barWidth: '60%',
|
||
data: res.data.dataList,
|
||
markLine: {
|
||
data: [{
|
||
name: 'UCL',
|
||
yAxis: 0.275
|
||
}, {
|
||
name: 'CL',
|
||
yAxis: 0.132
|
||
}, {
|
||
name: 'LCL',
|
||
yAxis: 0
|
||
}],
|
||
label: {
|
||
normal: {
|
||
formatter: '{b} : {c}',
|
||
position: 'middle'
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
var option6 = {
|
||
color:['#fc0000','#ff7d4e'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['极差控制图','均值控制图'],
|
||
textStyle:{//图例文字的样式
|
||
color:'#ccc',
|
||
fontSize:16
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#ccc'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name:'极差控制图',
|
||
type:'line',
|
||
data:[14, 12, 12, 11, 13, 13, 14, 12, 13, 16, 11,14,13,12,12,13,15,12,11,15,16,14,12,14],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#cccccc",
|
||
lineStyle: {
|
||
color: "#fc0000"
|
||
}
|
||
}
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name:'均值控制图',
|
||
type:'line',
|
||
data:[92, 90, 87,100,78, 72, 89, 75,88,74,89,91,92,89,78,84,82,83,81,92,94,91,92,80],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#cccccc",
|
||
lineStyle: {
|
||
color: "#ff7d4e"
|
||
}
|
||
}
|
||
},
|
||
markPoint: {
|
||
data: [
|
||
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'},
|
||
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
var a = ['#c7353a', '#f5b91e', '#2455d0', '#ff7d4e', '#049cfa']
|
||
myChart.setOption(option);
|
||
myChart6.setOption(option6);
|
||
//用于使chart自适应高度和宽度
|
||
window.onresize = function() {
|
||
//重置容器高宽
|
||
resizeWorldMapContainer2();
|
||
myChart.resize();
|
||
// myChart6.resize();
|
||
};
|
||
|
||
//资产在贷余额
|
||
var worldMapContainer4 = document.getElementById('box4');
|
||
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
|
||
var resizeWorldMapContainer4 = function() {
|
||
worldMapContainer4.style.width = box01_w * 0.96 + 'px';
|
||
worldMapContainer4.style.height = '280px';
|
||
};
|
||
//设置容器高宽
|
||
resizeWorldMapContainer4();
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(worldMapContainer4);
|
||
// 指定图表的配置项和数据
|
||
|
||
var option = {
|
||
title : {
|
||
subtext: 'Cp=1.25,Cpk=1.68',
|
||
x:'center',
|
||
color: "#fff"
|
||
},
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'value',
|
||
min:0,
|
||
max:20,
|
||
interval:2
|
||
|
||
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
min: 0,
|
||
max: 0.25,
|
||
interval: 50,
|
||
axisLabel: {
|
||
formatter: '{value} '
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
min: 0,
|
||
max: 0.25,
|
||
interval: 50,
|
||
axisLabel: {
|
||
formatter: '{value} '
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type:'bar',
|
||
barCategoryGap : "30%",
|
||
markLine: {
|
||
data: [
|
||
{xAxis: '8', name: 'SL',seriesName: '95.65'},
|
||
{xAxis: '8.9', name: 'LSL',seriesName: '108.25'},
|
||
{xAxis: '9.3', name: 'USL',seriesName: '108.25'}
|
||
],
|
||
symbol: 'pin',
|
||
label: {
|
||
normal: {
|
||
formatter: '{b}',
|
||
position: 'middle'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
data:[[0,0.001],[0.5,0.0001],[1,0.002],[1.5,0],[2,0.005],[2.5,0.007],[3,0.01],[3.5,0],[4,0.035],[4.5,0.055],[5,0.07],[5.5,0],[6,0.12],[6.5,0.15],[7,0.17],[7.5,0],[8,0.19],[8.5,0.175],[9,0.17],[10,0.12],[10.5,0.10],[11,0.07],[12,0.035],[12.5,0.02],[13,0.01],[14,0.005],[14.5,0.004],[15,0.004],[16,0.003],[17,0.002],[18,0.001]]
|
||
},
|
||
{
|
||
type:'line',
|
||
yAxisIndex: 1,
|
||
markLine: {
|
||
data: [
|
||
{xAxis: '9.1', name: 'QU',seriesName: '108.25'},
|
||
{xAxis: '3.1', name: 'QL',seriesName: '108.25'}
|
||
],
|
||
symbol: 'pin',
|
||
label: {
|
||
normal: {
|
||
formatter: '{b}',
|
||
position: 'middle'
|
||
}
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
type: 'dotted',
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
data:[[0,0.001],[1,0.002],[2,0.005],[3,0.01],[4,0.035],[5,0.07],[6,0.12],[7,0.17],[8,0.19],[9,0.17],[10,0.12],[11,0.07],[12,0.035],[13,0.01],[14,0.005],[15,0.004],[16,0.003],[17,0.002],[18,0.001]]
|
||
}
|
||
]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
//用于使chart自适应高度和宽度
|
||
window.onresize = function() {
|
||
//重置容器高宽
|
||
resizeWorldMapContainer4();
|
||
myChart.resize();
|
||
};
|
||
// 所贷金额用途
|
||
var worldMapContainer8 = document.getElementById('box8');
|
||
box8_box = document.getElementById("box8-box");
|
||
box8_box_h = box8_box.offsetHeight;
|
||
box8_box_w = box8_box.offsetWidth;
|
||
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
|
||
var resizeWorldMapContainer8 = function() {
|
||
worldMapContainer8.style.width = box8_box_w * 0.96 + 'px';
|
||
worldMapContainer8.style.height = box8_box_h * 0.87 + 'px';
|
||
console.log(box8_box_h * 0.87)
|
||
};
|
||
//设置容器高宽
|
||
resizeWorldMapContainer8();
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(worldMapContainer8);
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c}%"
|
||
},
|
||
|
||
legend: {
|
||
data: res.data.titleList6,
|
||
x: 'center',
|
||
y: 'bottom',
|
||
textStyle: {
|
||
color: '#ccc'
|
||
}
|
||
},
|
||
calculable: true,
|
||
series: [{
|
||
name: '所贷金额用途',
|
||
type: 'funnel',
|
||
left: '10%',
|
||
top: '5%',
|
||
//x2: 80,
|
||
bottom: '17%',
|
||
width: '80%',
|
||
// height: {totalHeight} - y - y2,
|
||
min: 0,
|
||
max: 100,
|
||
minSize: '0%',
|
||
maxSize: '100%',
|
||
sort: 'descending',
|
||
gap: 2,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'inside'
|
||
},
|
||
emphasis: {
|
||
textStyle: {
|
||
fontSize: 24
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
length: 10,
|
||
lineStyle: {
|
||
width: 1,
|
||
type: 'solid'
|
||
}
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: '#ccc',
|
||
borderWidth: 1
|
||
}
|
||
},
|
||
color: ['#c7353a', '#f5b91e', '#2455d0', '#ff7d4e', '#049cfa'],
|
||
data: function() {
|
||
var serie = [];
|
||
for(var i = 0; i < res.data.titleList6.length; i++) {
|
||
var item = {
|
||
name: res.data.titleList6[i],
|
||
value: res.data.dataList6[i]
|
||
};
|
||
serie.push(item);
|
||
}
|
||
return serie;
|
||
}()
|
||
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
//用于使chart自适应高度和宽度
|
||
window.onresize = function() {
|
||
//重置容器高宽
|
||
resizeWorldMapContainer8();
|
||
myChart.resize();
|
||
};
|
||
|
||
var worldMapContainer5 = document.getElementById('box5');
|
||
box04 = document.getElementById("box04");
|
||
box04_h = box04.offsetHeight;
|
||
box04_w = box04.offsetWidth;
|
||
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
|
||
var resizeWorldMapContainer5 = function() {
|
||
worldMapContainer5.style.width = box04_w * 0.96 + 'px';
|
||
worldMapContainer5.style.height = box04_h * 0.96 + 'px';
|
||
};
|
||
//设置容器高宽
|
||
resizeWorldMapContainer5();
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart9 = echarts.init(worldMapContainer5);
|
||
|
||
// 指定图表的配置项和数据
|
||
|
||
var option9 = {
|
||
// title : {
|
||
// text: '某地区蒸发量和降水量',
|
||
// subtext: '纯属虚构'
|
||
// },
|
||
color: ['#38b5f4', '#ff7d4e'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: res.data.legendList5,
|
||
textStyle: {
|
||
color: '#ccc'
|
||
}
|
||
},
|
||
grid: {
|
||
top: '10%',
|
||
left: '3%',
|
||
right: '3%',
|
||
bottom: '6%',
|
||
containLabel: true
|
||
},
|
||
calculable: true,
|
||
textStyle: {
|
||
color: '#ccc'
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: res.data.titleList5,
|
||
}],
|
||
yAxis: [{
|
||
type: 'value'
|
||
}],
|
||
series: function() {
|
||
var serie = [];
|
||
for(var i = 0; i < res.data.legendList5.length; i++) {
|
||
var item = {
|
||
name: res.data.legendList5[i],
|
||
type: 'bar',
|
||
data: function() {
|
||
var list = []
|
||
for(var i = 0; i < 7;i++) {
|
||
list.push(Math.floor(Math.random() * 1000))
|
||
}
|
||
return list
|
||
}()
|
||
};
|
||
serie.push(item);
|
||
}
|
||
return serie;
|
||
}()
|
||
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart9.setOption(option9);
|
||
setInterval(function () {
|
||
option9.series = function() {
|
||
var serie = [];
|
||
for(var i = 0; i < res.data.legendList5.length; i++) {
|
||
var item = {
|
||
name: res.data.legendList5[i],
|
||
type: 'bar',
|
||
data: function() {
|
||
var list = []
|
||
for(var i = 0; i < 7;i++) {
|
||
list.push(Math.floor(Math.random() * 1000))
|
||
}
|
||
return list
|
||
}()
|
||
};
|
||
serie.push(item);
|
||
}
|
||
return serie;
|
||
}()
|
||
myChart9.setOption(option9, true);
|
||
},3000);
|
||
|
||
//用于使chart自适应高度和宽度
|
||
window.onresize = function() {
|
||
//重置容器高宽
|
||
resizeWorldMapContainer5();
|
||
myChart9.resize();
|
||
};
|
||
// 业务数据分布
|
||
var worldMapContainer1 = document.getElementById('box1');
|
||
box02 = document.getElementById("box02");
|
||
box02_h = box02.offsetHeight;
|
||
box02_w = box02.offsetWidth;
|
||
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
|
||
var resizeWorldMapContainer1 = function() {
|
||
worldMapContainer1.style.width = box02_w * 0.9 + 'px';
|
||
worldMapContainer1.style.height = box02_h * 0.82 + 'px';
|
||
};
|
||
//设置容器高宽
|
||
resizeWorldMapContainer1();
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(worldMapContainer1);
|
||
// 指定图表的配置项和数据
|
||
function randomData() {
|
||
return Math.round(Math.random() * 2000);
|
||
}
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x: 'left',
|
||
y: 'bottom',
|
||
data: [
|
||
'专机',
|
||
'机加线',
|
||
'其他'
|
||
],
|
||
textStyle: {
|
||
color: '#ccc'
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 0,
|
||
max: 2500,
|
||
left: 'right',
|
||
top: 'bottom',
|
||
text: ['高', '低'], // 文本，默认为数值文本
|
||
calculable: true,
|
||
// color: ['#26cfe4', '#f2b600', '#ec5845'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: [{
|
||
name: '专机',
|
||
type: 'map',
|
||
aspectScale: 0.75,
|
||
zoom: 1.2,
|
||
mapType: 'china',
|
||
roam: false,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
data: function() {
|
||
var serie = [];
|
||
for(var i = 0; i < res.data.titleList7.length; i++) {
|
||
var item = {
|
||
name: res.data.titleList7[i],
|
||
value: randomData()
|
||
};
|
||
serie.push(item);
|
||
}
|
||
return serie;
|
||
}()
|
||
|
||
},
|
||
{
|
||
name: '机加线',
|
||
type: 'map',
|
||
mapType: 'china',
|
||
label: {
|
||
normal: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
data: function() {
|
||
var serie = [];
|
||
for(var i = 0; i < res.data.titleList8.length; i++) {
|
||
var item = {
|
||
name: res.data.titleList8[i],
|
||
value: randomData()
|
||
};
|
||
serie.push(item);
|
||
}
|
||
return serie;
|
||
}()
|
||
|
||
},
|
||
{
|
||
name: '其他',
|
||
type: 'map',
|
||
mapType: 'china',
|
||
label: {
|
||
normal: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
data: function() {
|
||
var serie = [];
|
||
for(var i = 0; i < res.data.titleList9.length; i++) {
|
||
var item = {
|
||
name: res.data.titleList9[i],
|
||
value: randomData()
|
||
};
|
||
serie.push(item);
|
||
}
|
||
return serie;
|
||
}()
|
||
|
||
}
|
||
]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
tools.loopShowTooltip(myChart, option, {
|
||
loopSeries: true
|
||
} );
|
||
|
||
//用于使chart自适应高度和宽度
|
||
window.onresize = function() {
|
||
//重置容器高宽
|
||
resizeWorldMapContainer1();
|
||
myChart.resize();
|
||
};
|
||
});
|
||
}); |