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}
{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(); }; }); });