init: 智能制造工厂平台看板项目首次入库
This commit is contained in:
XingCheng3
658
public/js/mycharts.js
Normal file
658
public/js/mycharts.js
Normal file
@@ -0,0 +1,658 @@
|
||||
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();
|
||||
};
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user