添加jsonpCallback 返回函数，请求方式为 get
function totalEquipment(context){
$.ajax({
type:'get',
async:true,
url:'history/totals',
data:{type:context.type,pre:context.pre},
dataType:'json',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success:function(data){
/*console.log('7.各个类型设备总量 -- 假数据-请求成功');
console.log(data);*/
/* $('.totalT').text(data.alarmCount);*/
},error:function(){
console.log("7.各个类型设备总量 -- 假数据-数据出错");
}
})
}
// JavaScript Document
//隔行换背景色
$(function(){
var item = $(".ghcolor p");
for(var i=0;i<item.length;i++){
if(i%2==0){
item[i].style.backgroundColor="#234777";
}
}
var item = $(".ghcolors p");
for(var i=0;i<item.length;i++){
if(i%2==0){
item[i].style.backgroundColor="#234777";
}
}
});
/*
* 2018-3-7 5、报警最多排名*/
//var httpUrl = "http://118.242.34.6:8078";//这个是外网
var httpUrl = "http://192.168.1.200:8080";//这个是内网
function topWarn(context){
$.ajax({
type:'get',
async:true,
url: httpUrl +'/Topsoft/Func/HisEvent/统计报警KW2.asp',
data:{Pre:context.pre,Type:context.type,Uid:"6.1.;6.2.;6.3.;6.4.;6.5.;6.6.;6.7.;6.8.;6.9.;6.10."},
dataType:'jsonp',
jsonp: 'jsonpCallback',
jsonpCallback: 'jsonpCallback',
success:function(data){
console.log('5.报警最多排名-请求成功');
console.log(data);
var numList = [];
var sortNameMap = new Map();
var sortNameArr = [];//value
for(var key in data.alarms){
var place = getPlace(key);
var alarms = {};
alarms[data.alarms[key].toString()] = place;
console.log(alarms);
sortNameArr.push(alarms);
// sortNameMap.set(data.alarms[key],place);
}
sortNameArr.sort(function(a,b){
return parseInt(Object.keys(a)[0]) < parseInt(Object.keys(b)[0]);
}
);
console.log(sortNameArr);
var tops = [];
for (var i = 0;i < 5; i++){
$('.jzt p').eq(i).text("NO."+(i+1)+" "+Object.values(sortNameArr[i]));
// tops.push(sortNameArr[i].value());
}
// $('.jzt p').each(function(i){
// $('.jzt p').eq(i).text("NO."+(i+1)+" "+tops[i]);
// })
// quickSort(sortNameArr);
// var sortNameWarn = [];
// for (var i = 0;i <sortNameArr.length; i++){
// console.log(sortNameMap.sortNameArr[i]);
// }
// sortNameMap.forEach(function(value,key,sortNameMap){
//
// })
/*
for(var key in data.alarms){
data.alarms[key].on
}*/
},error:function(){
console.log("5.报警最多排名-数据出错");
}
})
}
/*paixu */
/*var quickSort = function(arr) {
if (arr.length <= 1) { return arr; }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};*/
/*=['丁香','灵山','金桥','南码头','川沙','张江','外高桥','周东','惠南','万祥'];*/
function getPlace(uid){
var place = "";
switch (uid){
case '6.1.':{
place = '丁香';
break;
}
case '6.2.':{
place = '灵山';
break;
}
case '6.3.':{
place = '金桥';
break;
}
case '6.4.':{
place = '南码头';
break;
}
case '6.5.':{
place = '川沙';
break;
}
case '6.6.':{
place = '张江';
break;
}
case '6.7.':{
place = '外高桥';
break;
}
case '6.8.':{
place = '周东';
break;
}
case '6.9.':{
place = '惠南';
break;
}
case '6.10.':{
place = '万祥';
break;
}
}
return place;
}
/*
* 2018-3-7 4、报警总数统计*/
/* function totalWarn(context){
$.ajax({
type:'get',
async:true,
url:'history/totals',
data:{type:context.type,pre:context.pre},
dataType:'json',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success:function(data){
console.log('4、报警总数统计-请求成功');
console.log(data);
$('.totalT').text(data.alarmCount);
},error:function(){
console.log("4、报警总数统计-数据出错");
}
})
}*/
function totalWarn(context){
console.log(context);
$.ajax({
type:'get',
async:true,
url:httpUrl +'/Topsoft/Func/HisEvent/统计报警KW2.asp',
data:{Type:context.type,Pre:context.pre},
dataType:'jsonp',
jsonp: 'jsonpCallback',
jsonpCallback: 'jsonpCallback',
success:function(data){
console.log('4、报警总数统计-请求成功-realy');
// var data = JSON.parse(data)
console.log(data);
// console.log(context);
if(data.alarmCount.toString().length >= 5){
$('.totalT').css("fontSize","30px");
}else{
$('.totalT').css("fontSize","60px");
}
$('.totalT').text(data.alarmCount);
},error:function(){
console.log("4、报警总数统计-数据出错-realy");
}
})
}
/*
* 2018-3-7 1、当前报警事件*/
function mostNewEvent(){
$.ajax({
type:'get',
async:true,
url:'realtime/eventsbytime',
data:{},
dataType:'json',
/*jsonp: 'callback',
jsonpCallback: 'jsonpCallback',*/
success:function(data){
console.log('1、当前报警事件-请求成功');
console.log(data);
for(var i = 0; i< $('.listMain1 .list').length;i++){
$('.listMain1 .list').eq(i).find('span').eq(0).text(data.events[i].name);
$('.listMain1 .list').eq(i).find('span').eq(0).attr("title",data.events[i].name);
$('.listMain1 .list').eq(i).find('span').eq(1).text(data.events[i].discripe);
$('.listMain1 .list').eq(i).find('span').eq(1).attr("title",data.events[i].discripe);
$('.listMain1 .list').eq(i).find('span').eq(2).text(data.events[i].time);
$('.listMain1 .list').eq(i).find('span').eq(2).attr("title",data.events[i].time);
}
},error:function(){
console.log("1、当前报警事件-数据出错");
}
})
}
/*最高报警*/
function mostHightEvent(){
$.ajax({
type:'get',
async:true,
url:'realtime/eventsbylevel',
data:{},
dataType:'json',
/*jsonp: 'callback',
jsonpCallback: 'jsonpCallback',*/
success:function(data){
console.log('1、最高报警-请求成功');
console.log(data);
for(var i = 0; i< $('.listMain2 .list').length;i++){
$('.listMain2 .list').eq(i).find('span').eq(0).text(data.events[i].name);
$('.listMain2 .list').eq(i).find('span').eq(0).attr("title",data.events[i].name);
$('.listMain2 .list').eq(i).find('span').eq(1).text(data.events[i].discripe);
$('.listMain2 .list').eq(i).find('span').eq(1).attr("title",data.events[i].discripe);
$('.listMain2 .list').eq(i).find('span').eq(2).text(data.events[i].time);
$('.listMain2 .list').eq(i).find('span').eq(2).attr("title",data.events[i].time);
}
},error:function(){
console.log("1、当前报警事件-数据出错");
}
})
}
/*clearInterval(timer1);
clearInterval(timer2);*/
var timer1 = setInterval(mostHightEvent,3000);
var timer2 = setInterval(mostNewEvent,3000);
/*
* 2017-3-12 6. 供应商分析 假数据*/
function supplierAnalysis(context){
$.ajax({
type:'get',
async:true,
url:'history/totals',
data:{type:context.type,pre:context.pre},
dataType:'json',
/*jsonp: 'callback',
jsonpCallback: 'jsonpCallback',*/
success:function(data){
/* console.log('6. 供应商分析 假数据计-请求成功');
console.log(data);*/
/* $('.totalT').text(data.alarmCount);*/
},error:function(){
console.log("6. 供应商分析 假数据-数据出错");
}
})
}
/*
* 2017-3-12 7.各个类型设备总量 -- 假数据*/
function totalEquipment(context){
$.ajax({
type:'get',
async:true,
url:'history/totals',
data:{type:context.type,pre:context.pre},
dataType:'json',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success:function(data){
/*console.log('7.各个类型设备总量 -- 假数据-请求成功');
console.log(data);*/
/* $('.totalT').text(data.alarmCount);*/
},error:function(){
console.log("7.各个类型设备总量 -- 假数据-数据出错");
}
})
}
/*
* 2018-3-7 2、区域报警*/
var optionXaxisData = [],
optionSeriesData = [];
var selectedMap = new Map();
function selectInitiaize(){
for(var i in $('select')){
if(i%2 == 0){
console.log("................",$($('select')[i]).attr('id'));
selectedMap.set($($('select')[i]).attr('id'), new Object());
}
}
}
var functionMap = new Map();
function functionInitialize(){
functionMap.set('mySelect1', areaWarning);
functionMap.set('mySelect3', deviceWarn);
functionMap.set('mySelect5', totalWarn);
functionMap.set('mySelect7', topWarn);
functionMap.set('mySelect11', supplierAnalysis);
functionMap.set('mySelect13', totalEquipment);
}
$(document).ready(function(){
selectInitiaize();
functionInitialize();
console.log("................");
console.log("................");
var functionIndex = 1;
selectedMap.forEach(function (context, select, selectedMap) {
if(1 == $('#' + select).find("option").val()){
context.pre = 0;
}
else if(2 == $('#' + select).find("option").val()){
context.pre = 1;
}
context.type = parseInt($('#' + select).find('option:selected').val()) - 1;
context.element = $('#' + select);
context.slibing = $('#' + select).next();
console.log(context.uids,
context.pre,
context.type,
context.element);
if(functionMap.has($('#' + select).attr('id'))){
setTimeout(function(){
setInterval(functionMap.get($('#' + select).attr('id'))(context),3000)
/*functionMap.get($('#' + select).attr('id'))(context);*/
},functionIndex*3000);
functionIndex += 1;
$('#' + select).on('change',function(){
areaChange(selectedMap.get($('#' + $(this).attr('id')).attr('id')));
functionMap.get($(this).attr('id'))(selectedMap.get($('#' + $(this).attr('id')).attr('id')));
})
$(context.slibing).on('change',function(){
selectedMap.get($('#' + $(this).prev().attr('id')).attr('id')).pre = (0 == selectedMap.get($('#' + $(this).prev().attr('id')).attr('id')).pre)?1:0;//parseInt($(this).find("option:selected").val()) - 1? : ;
functionMap.get($(this).prev().attr('id'))(selectedMap.get($('#' + $(this).prev().attr('id')).attr('id')));
})
}
});
// areaWarning(stru);
// $('select.selecty1 ').on('change',function(){
// stru.element = $(this);
// areaChange(stru);
// console.log("1....." + stru.type + "........." + stru.pre);
// areaWarning(stru);
// })
// /*区域报警，点击事件*/
// $('select.selecty2 ').on('change',function(){
// stru.pre = $(this).find("option").val();
// console.log("1....." + stru.type + "........." + stru.pre);
// areaWarning(stru);
// })
})
//var stru = new Object();
//stru.uids = 1.2;
//stru.pre = false;
//stru.type = $('select.selecty1 option:selected').val();
//stru.element = null;
//$(document).ready(function(){
// areaWarning(stru);
// $('select.selecty1 ').on('change',function(){
// stru.element = $(this);
// areaChange(stru);
// console.log("1....." + stru.type + "........." + stru.pre);
// areaWarning(stru);
// })
// /*区域报警，点击事件*/
// $('select.selecty2 ').on('change',function(){
// stru.pre = $(this).find("option").val();
// console.log("1....." + stru.type + "........." + stru.pre);
// areaWarning(stru);
// })
//})
/*日期选择*/
function areaChange(stru){
stru.type = parseInt(stru.element.val()) - 1;
console.log("stru.type = ",stru.type);
var html = "";
switch(stru.type)
{
case 0:{
html = "<option value = 1>本周</option><option value=2 >上周</option>";
break;
}
case 1:{
html = "<option value = 1>本月</option><option value=2 >上月</option>"
break;
}
case 2:{
html = "<option value = 1>本季度</option><option value=2 >上季度</option>"
break;
}
case 3:{
html = "<option value = 1>本年</option><option value=2 >上年</option>"
break;
}
}
stru.element.next().find("option").remove();
stru.element.next().append(html);
stru.pre = parseInt(stru.element.next().find("option").val()) - 1;
// $('select.selecty2 option').remove();
// $('select.selecty2').append(html);
// stru.pre = $('select.selecty2 option').val();
}
/*区域报警*/
function areaWarning(context){
console.log("3....." + context.type + "........." + context.pre);
$.ajax({
type:'get',
async:true,
url:httpUrl +'/Topsoft/Func/HisEvent/统计报警KW2.asp',
data:{Pre:context.pre,Type:context.type,Uid:"6.1.;6.2.;6.3.;6.4.;6.5.;6.6.;6.7.;6.8.;6.9.;6.10."},
dataType:'jsonp',
jsonp: 'jsonpCallback',
jsonpCallback: 'jsonpCallback',
success:function(data){
myChart.clear();
console.log('2.区域报警-请求成功');
console.log(data);
var xAxiesData =['丁香','灵山','金桥','南码头','川沙','张江','外高桥','周东','惠南','万祥'];
option.xAxis.data = optionXaxisData;
option.series.data = optionSeriesData;
/*for(var i = 0 ; i<Object.values(data.alarms).length;i++){
optionSeriesData[i] = Object.values(data.alarms)[i];
optionXaxisData[i] = xAxiesData[i]
}*/
optionSeriesData[0] = data.alarms['6.1.'];
optionXaxisData[0] = xAxiesData[0];
optionSeriesData[1] = data.alarms['6.2.'];
optionXaxisData[1] = xAxiesData[1];
optionSeriesData[2] = data.alarms['6.3.'];
optionXaxisData[2] = xAxiesData[2];
optionSeriesData[3] = data.alarms['6.4.'];
optionXaxisData[3] = xAxiesData[3];
optionSeriesData[4] = data.alarms['6.5.'];
optionXaxisData[4] = xAxiesData[4];
optionSeriesData[5] = data.alarms['6.6.'];
optionXaxisData[5] = xAxiesData[5];
optionSeriesData[6] = data.alarms['6.7.'];
optionXaxisData[6] = xAxiesData[6];
optionSeriesData[7] = data.alarms['6.8.'];
optionXaxisData[7] = xAxiesData[7];
optionSeriesData[8] = data.alarms['6.9.'];
optionXaxisData[8] = xAxiesData[8];
optionSeriesData[9] = data.alarms['6.10.'];
optionXaxisData[9] = xAxiesData[9];
/*option.xAxis.data = ['丁香','灵山','金桥','南码头','川沙','张江','外高桥','周东','惠南','万祥'];*/
myChart.setOption(option);
window.onresize = myChart.resize;
// option.xAxis.data = optionXaxisData;
// option.series.data = optionSeriesData;
//
// for(var i = 0; i < data.places.length; ++ i){
// optionXaxisData[i] = data.places[i];
// optionSeriesData[i] = parseInt(data.datas[i]);
// }
//
// myChart.setOption(option);
// window.onresize = myChart.resize;
},error:function(){
console.log("2.区域报警-数据出错");
}
})
}
/*$('.selecty1').on('click',function(){
if($('select.selecty1 option:select').val() == 1){
}
})*/
//各区域报警数
var myChart = echarts.init(document.getElementById('region'));
// 指定图表的配置项和数据
option = {
/*
title: {
text: '>>各区域报警数'
},
*/
backgroundColor:'',
tooltip: {
trigger: 'axis'
},
grid: {
left: '2.5%',
right: '0%',
top: '13%',
bottom: '5%',
containLabel: true
},
xAxis: [{
type: 'category',
data:optionXaxisData,
/*data: ['丁香','灵山','金桥','南码头','川沙','张江','外高桥','周东','惠南','万祥'],*/
splitLine: {
show: false
},
axisLine:{
lineStyle:{
color:'#515f74',
}
},
axisTick: {
show: false,
alignWithLabel: true
}
}],
yAxis: [{
name :'( 次 )',
nameTextStyle:{
padding: [0,35,-5,0]
},
/*max : 120,*/
type: 'value',
axisLine:{
lineStyle:{
color:'#515f74'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#515f74'
}
},
splitArea: {
show: false,
}
},
{
axisLine:{
lineStyle:{
color:'#515f74'
}
},
}
],
series: [{
type: 'bar',
label: {
normal: {
show: true,
position: 'top'
}
},
barWidth: '30%',
itemStyle: {
normal: {
// 随机显示
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
// 定制显示（按顺序）
color: function(params) {
var colorList = ['#157aae','#15af37','#39c6f1','#AC1DC5','#159795', '#AD8815','#76F3A5','#20B3FF','#5CBB2B'];
return colorList[params.dataIndex]
}
},
},
/*data: [90, 70, 59, 63, 83, 67,51,82,70],*/
data: optionSeriesData,
barMaxWidth: 300,
barGap:'100%'
}]
};
myChart.setOption(option);
window.onresize = myChart.resize;
window.addEventListener("resize",function() {
myChart.resize();
});
var option1SeriesData=[/* {name: "空调2次", value: 2},*/],
option1LegendData=[/*// "空调2次",*/ ];
/*
* 2018-3-71. 设备报警占比*/
function deviceWarn(context){
$.ajax({
type:'get',
async:true,
url:httpUrl +'/Topsoft/Func/HisEvent/统计报警KW2.asp',
data:{Source:"UPS;空调;温湿度",Type:context.type,Pre:context.pre},
/* url:'history/device',
data:{uids:context.uids,type:context.type,pre:context.pre},*/
// dataType:'json',
dataType:'jsonp',
jsonp: 'jsonpCallback',
jsonpCallback: 'jsonpCallback',
success:function(data){
console.log('3.设备报警-请求成功');
console.log(data);
for(var i = 0; i<data.alarms.discribes.length;++i){
/*option1LegendData[i] =*/
/*console.log(data.alarms.discribes[i]);*/
for(var key in data.alarms.discribes[i]){
/*console.log(key+data.alarms.discribes[i][key]);*/
option1LegendData[i] = key+data.alarms.discribes[i][key];
option1SeriesData[i] = {name:key+data.alarms.discribes[i][key],value:data.alarms.datas[i]}
}
}
// for ( var i in Object.keys(data.alarms)) {
// option1LegendData[i] = data.alarms[i].name;
// option1SeriesData[i] = {name : data.alarms[i].name,value : data.alarms[i].value};
// /*option1LegendData.push(data.alarms[i].name);
// option1SeriesData.push({name : data.alarms[i].name,value : data.alarms[i].value}); */
// }
//
annular.setOption(option1);
},error:function(){
console.log("3.设备报警-数据出错");
}
})
}
//各设备报警占比
var annular = echarts.init(document.getElementById('equipment'));
var option1 = {
legend: {
orient: 'vertical',
x: '64%',
y: '11%',
data:option1LegendData,
/*data:['空调 14次','温湿度 11次','ups 7次','配电 22次','消防 21次','漏水 25次'],*/
// data:[/*'空调14次','温湿度11次','ups7次','配电 22次','消防 21次','漏水 25次'*/],
itemWidth: 13,
itemHeight: 13,
itemGap: 15,
textStyle: {
fontSize: 14,
color: '#96A8BF'
}
},
series: [
{
/*label : {
normal : {
formatter: '{b}:{c}: ({d}%)',
textStyle : {
fontWeight : 'normal',
fontSize : 15
}
}
}, */
name:'访问来源',
center : ['30%', '50%'],
type:'pie',
radius: ['40%', '65%'],
label: {
normal: {
formatter: '{d}%',
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#fff'
}
}
},
itemStyle: {
color:function(params) {
var colorList = ['#0D9996','#D28A11','#C03C47','#6F7AE4','#B9C3CC', '#1B6FAB'];
return colorList[params.dataIndex]
},
normal: {
labelLine:{
color:'#fff',
},
areaStyle:{
color: '#fff'
}
}
},
data:option1SeriesData
/*data:[
{value:14, name:'空调 14次'},
{value:11, name:'温湿度 11次'},
{value:7, name:'ups 7次'},
{value:22, name:'配电 22次'},
{value:21, name:'消防 21次'},
{value:25, name:'漏水 25次'}
{value:14, name:'空调14次'},
{value:11, name:'温湿度11次'},
{value:7, name:'ups7次'},
{value:22, name:'配电 22次'},
{value:21, name:'消防 21次'},
{value:25, name:'漏水 25次'}
]*/
}
],color: ['#0D9996','#D28A11','#C03C47','#6F7AE4','#B9C3CC','#1B6FAB']
};
annular.setOption(option1);
window.onresize = annular.resize;
window.addEventListener("resize",function() {
annular.resize();
});
//工单分布
var order = echarts.init(document.getElementById('order'));
var odata = ['50% (50个)','25% (25个)','15% (15个)','10% (10个)'];
var cdata =['#139E8B','#0A60B6'];
i =0;
orders = {
tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b}: {c} ({d}%)"
formatter:function(ds){
//console.log(ds);
if(ds.color =='#213347'){
return '';
}else{
return ds.name+':'+ds.percent+'% ('+ds.value+'个)';
}
}
},
color: ['#59667A','#139E8B'],
legend: {
orient: 'vertical',
data:['已完成','已接单','进行中','未完成'],
x:'left',
itemWidth: 0,
itemHeight: 0,
itemGap: 14,
textStyle: {
fontSize: 15,
color: 'auto',
padding:[10,0,10,28]
},
formatter: function (name) {
if(i>=4)i=0;
return name +'\n\n'+ odata[i++];
}
},
series: [
{
center: ['80%','48%'],
type:'pie',
radius: ['14%', '20%'],
avoidLabelOverlap: false,
hoverAnimation:false,
itemStyle:{
color:['#6F7AE4']
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:90, name:'1',
itemStyle:{
normal : {
color: '#213347',
}
}
},
{value:10, name:'未完成',
itemStyle:{
normal : {
color: '#CE430A',
}
}
}
]
},
{
center: ['80%','48%'],
type:'pie',
radius: ['34%', '40%'],
avoidLabelOverlap: false,
hoverAnimation:false,
itemStyle:{
color:['#6F7AE4']
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:75, name:'1',
itemStyle:{
normal : {
color: '#213347',
}
}
},
{value:15, name:'进行中',
itemStyle:{
normal : {
color: '#0FBB14',
}
}
},
{value:10, name:'2',
itemStyle:{
normal : {
color: '#213347',
}
}
}
]
},
{
center: ['80%','48%'],
type:'pie',
radius: ['54%', '60%'],
avoidLabelOverlap: false,
hoverAnimation:false,
itemStyle:{
color:['#f00']
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:50, name:'1',
itemStyle:{
normal : {
color: '#213347',
}
}
},
{value:25, name:'已接单',
itemStyle:{
normal : {
color: '#0D67BF',
}
}
},
{value:25, name:'2',
itemStyle:{
normal : {
color: '#213347',
}
}
}
]
},
{
center: ['80%','48%'],
type:'pie',
radius: ['74%', '80%'],
avoidLabelOverlap: false,
hoverAnimation:false,
itemStyle:{
color:['#000']
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:50, name:'已完成',
itemStyle:{
normal : {
color: '#13A590',
}
}
},
{value:50, name:'1',
itemStyle:{
normal : {
color: '#213347',
}
}
}
]
}
],
/*color: ['#23334A','#139E8B']*/
};
var series = orders.series;
order.setOption(orders);
window.addEventListener("resize",function() {
order.resize();
});
//供应商分析
var supplier = echarts.init(document.getElementById('supplier'));
var supplieroption = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['负责的设备总量','工程师效率值','处理工单量'],
itemWidth: 13,
itemHeight: 3,
itemGap: 15,
textStyle: {
fontSize: 12,
color: '#59667A'
}
},
grid: {
left: '2.5%',
right: '2.5%',
top: '20%',
bottom: '8%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['供应商1','供应商2','供应商3','供应商4'],
axisPointer: {
type: 'shadow'
},
axisLine:{
lineStyle:{
color:'#515f74'
}
},
axisTick: {
show: false,
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value',
name: '(个)',
nameTextStyle:{
padding: [0,30,-5,0]
},
min: 0,
max: 40,
interval: 10,
axisLine:{
lineStyle:{
color:'#515f74'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#515f74'
}
}
},
{
type : 'value',
name: '(h)',
nameTextStyle:{
padding: [0,0,-5,30]
},
min: 0,
max: 160,
interval: 40,
axisLine:{
lineStyle:{
color:'#515f74'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#1B3977'
}
},
}
],
color: ['#2e78b7','#80c269','#eb6100'],
barWidth: '7%',
series : [
{
label: {
normal: {
show: true,
position: 'top'
}
},
name:'负责的设备总量',
type:'bar',
data:[35, 28, 30, 20],
barGap:'150%'
},
{
label: {
normal: {
show: true,
position: 'top'
}
},
name:'处理工单量',
type:'bar',
data:[26, 29, 24, 24]
},
{
label: {
normal: {
show: true,
position: 'top'
}
},
name:'工程师效率值',
type:'bar',
yAxisIndex: 1,
data:[79, 90, 80, 105]
}
]
};
supplier.setOption( supplieroption );
window.addEventListener("resize",function() {
supplier.resize();
});
//各设备类型的设备总量
var number = echarts.init(document.getElementById('number'));
// 指定图表的配置项和数据
numberoption = {
title: {
text: ' '
},
backgroundColor:'',
tooltip: {
trigger: 'axis'
},
grid: {
left: '2.5%',
right: '4%',
top: '13%',
bottom: '6%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['空调','温湿度','UPS','配电','消防','漏水'],
splitLine: {
show: false
},
axisLine:{
lineStyle:{
color:'#515f74'
}
},
axisTick: {
show: false,
alignWithLabel: true
}
}],
yAxis: [{
name :'(个)',
nameTextStyle:{
padding: [0,30,-5,0]
},
type: 'value',
axisLine:{
lineStyle:{
color:'#515f74'
},
show: false,
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle:{
color:'#1B3977'
}
},
splitArea: {
show: false,
}
}
],
series: [{
type: 'bar',
label: {
normal: {
show: true,
position: 'top'
}
},
barWidth: '22%',
itemStyle: {
normal: {
// 随机显示
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
// 定制显示（按顺序）
color: function(params) {
var colorList = ['#157AAE','#15AF37','#39C6F1','#AC1DC5','#159795', '#AD8815' ];
return colorList[params.dataIndex]
}
},
},
data: [47, 36, 30, 33, 42, 38],
}]
};
number.setOption(numberoption);
window.addEventListener("resize",function() {
number.resize();
});
//状态设备总量
$(function(){
var total = 0;
$.each($(".colorLump span"),function(index, element) {
total += parseInt($(this).html());
});
var color = ['#157AAE','#15AF37','#39C6F1', '#AC1DC5' ,'#159795' ,'#AD8815' ];
$.each($(".colorLump span"),function(index, element) {
$(this).css({'text-align':'center','float':'left','display':'block','width':parseInt($(this).html())/total*100+'%'});
$(".describe span").eq(index).css({'text-align':'center','float':'left','margin-top':'6px','display':'block','width':parseInt($(this).html())/total*100+'%'});
});
$(".describe span").on('click',function(e){
$(this).eq($(this).index()).css('opacity')
if(1 == $(".colorLump span").eq($(this).index()).css('opacity')){
$(".colorLump span").eq($(this).index()).css({'opacity': 0, 'filter':'Alpha(opacity=0)' }).hide();
$(this).css({'color': '#666' });
}else{
$(".colorLump span").eq($(this).index()).css({'opacity': 1, 'filter':'Alpha(opacity=100)' }).show();
$(this).css({'color':color[$(this).index()]});
}
}) ;
})
777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
