<div class="data-column" height="66%" style="background-color: #0d2840;width: 100%;height: 100%;border-radius: 10px;border: 1px #0174f5 solid;padding: 1px;box-sizing: border-box;">
<div style="width: 100%;height: 100%;box-sizing: border-box;border:2px solid #016ae0;border-radius: 10px;">
<div class="data-title" style="height: 10%;" th:style="'background-image:url(' +@{/css/console/images/monitor/second_title.png} + ');background-size:100% 60%;height:10%;background-repeat: no-repeat;margin:0 28%;'">
<i class="fa fa-server" aria-hidden="true" style="padding-left: 13%;padding-top:3%;font-size: medium"> 各乡镇减排概览</i>
</div>
<div class="box9-1 data-content" style="margin-top: 7%">
<div class="order panel">
<div class="inner">
<!-- 筛选 -->
<div class="filter" id="filter">
<a href="javascript:;" data-key="electric" class="active">用电情况</a>
<a href="javascript:;" data-key="voc" style="border-right: 0.0rem solid #0d2840">总排放量</a>
<a href="javascript:;" data-key="devAlarm" style="margin-left: 38%">设备违规</a>
<a href="javascript:;" data-key="envAlarm">减排违规</a>
</div>
<!-- 数据 -->
<div class="data" id="echart" style="height: 97%;margin-right: 8%"></div>
</div>
</div>
</div>
</div>
</div>initfilter:function () {
var me=this;
var mychart = echarts.init(document.getElementById('echart'));
me.mychart=mychart;
var data = {
townName:[],
prodElectric:[],
envpElectric:[],
devAlarm: [],
envAlarm: [],
voc:[],
};
var url=__ctx+"/platform/home/getTownList";
$.post(url,function(result) {
$(result).each(function () {
var town = this;
data['townName'].push(town.name);
data['devAlarm'].push((Math.random() * 100).toFixed(2));
data['envAlarm'].push((Math.random() * 100).toFixed(2));
data['voc'].push((Math.random() * 100).toFixed(2));
data['prodElectric'].push((Math.random() * 100).toFixed(2));
data['envpElectric'].push((Math.random() * 100).toFixed(2));
});
});
$('.order').on('click', '.filter a', function (){
//点击之后加类名
$(this).addClass('active').siblings().removeClass('active');
var key = $(this).attr('data-key');
var series=new Array;
if(key==="devAlarm"){
series.push({
type: 'bar',
data: data[key],
itemStyle:{
normal:{color:'#8715F9'}
},
});
}else if(key==="envAlarm"){
series.push({
type: 'bar',
data: data[key],
itemStyle:{
normal:{color:'#FF00FF'}
},
});
}else if(key==="voc"){
series.push({
type: 'bar',
data: data[key],
barWidth : 10,
itemStyle:{
normal:{color:'#3DD1F9'}
},
});
}else if(key==="electric"){
series.push({
type: 'bar',
data: data['prodElectric'],
stack: 'power',
itemStyle:{
normal:{color:'#FE5656'}
},
});
series.push({
type: 'bar',
data: data['envpElectric'],
stack: 'power',
itemStyle:{
normal:{color:'#01E17E'}
},
});
};
me.data=data;
me.series=series;
me.showChart();
});
var index=0;
var timer=setInterval(autochange,3000);
document.getElementById("echart").onmouseover=function () {
clearInterval(timer);
};
document.getElementById("echart").onmouseout=function () {
timer=setInterval(autochange,3000);
};
function autochange(){
var aclick = $('.order a');
index++;
if (index > 3) {
index = 0;
}
aclick.eq(index).click();
};
},
showChart:function(){
var me=this;
var townName=me.data['townName'];
var series=me.series;
me.mychart.clear();
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '2%',
right: '5%',
bottom: '6%',
containLabel: true
},
yAxis: {
splitLine:{show: false},
type: 'category',
boundaryGap: true,
data: townName,
axisLabel: {
textStyle:{
color:"#FFF",
},
interval:0,
rotate: -10,
},
},
xAxis: {
splitLine:{show:true,
lineStyle:{
color: '#48b',
width: 1,
type: 'dotted'
}
},
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color:"#FFF",
},
},
},
series:series
};
var myChart = echarts.init(document.getElementById('echart'));
myChart.setOption(option);
},/* 订单 */
.order {
height: 6.167rem;
}
.order .filter {
display: flex;
}
.order .filter a {
display: block;
height: 1.00rem;
line-height: 1;
padding: 0 0.75rem;
color: #1950c4;
font-size: 1.00rem;
border-right: 0.083rem solid #00f2f1;
}
.order .filter a:first-child {
padding-left: 0;
}
.order .filter a:last-child {
border-right: none;
}
.order .filter a.active {
color: #fff;
font-size: 1.12rem;
}
.order .data {
display: flex;
/* margin-top: -1.167rem;*/
}
.order .item {
width: 50%;
}
.order h4 {
font-size: 1.167rem;
color: #fff;
margin-bottom: 0.417rem;
}
.order span {
display: block;
color: #4c9bfd;
font-size: 0.667rem;
}