$(function () {
// var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
var whdef = 100/916;// 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight;// 当前窗口的高度
var wW = window.innerWidth;// 当前窗口的宽度
// var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
var rem = wH * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
//加载统计图1---能耗饼图
loadoOption1();
//加载统计图2---能耗条形图
loadoOption2();
//加载统计图3----能耗折线图
loadoOption3();
//加载统计图4----6个月能耗
loadoOption4();
//loadOptionYibiao1();
// loadOptionRiLi();
}) ;
function loadOptionBaojingbar(){
}
function getVirtulData() {
var currDate = new Date();
var currMonth = echarts.format.formatTime('yyyy-MM', currDate);
var date = +echarts.number.parseDate(currMonth+"-01");
var end = +echarts.number.parseDate(new Date());
var dayTime = 3600 * 24 * 1000;
var data = [];
for (var time = date; time < end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 100)
]);
}
return data;
}
function getPieSeries(scatterData, chart) {
return echarts.util.map(scatterData, function (item, index) {
var center = chart.convertToPixel('calendar', item);
return {
id: index + 'pie',
type: 'pie',
center: center,
label: {
normal: {
formatter: '{c}',
position: 'inside'
}
},
radius: 25 ,
data: []
};
});
}
function getPieSeriesUpdate(scatterData, chart) {
return echarts.util.map(scatterData, function (item, index) {
var center = chart.convertToPixel('calendar', item);
return {
id: index + 'pie',
type: 'pie',
center: center,
label: {
normal: {
formatter: '{c}',
position: 'inside'
}
},
radius: 25 ,
data: [ ]
};
});
}
function loadOptionRiLi(){
// var dom = document.getElementById("container");
// var myChart = echarts.init(dom);
var app = {};
option = null;
var cellSize = [120, 80];
var pieRadius = 30;
var scatterData = getVirtulData();
if(myChartRiLi){
myChartRiLi.clear();
}
option = {
tooltip : {},
legend: {
data: [ {
name: '正常',
// 设置文本为红色
textStyle: {
color: 'white'
}
},{
name: '报警',
// 设置文本为红色
textStyle: {
color: 'white'
}
},{
name: '设备离线',
// 设置文本为红色
textStyle: {
color: 'white'
}
}],
top: 1,
color:'red'
},
calendar: {
top: 45,
left: 'center',
height:'auto',
orient: 'vertical',
cellSize: cellSize,
splitLine: {
show: true,
lineStyle: {
color: 'rgb(0,136,212)',
width: 1,
type: 'solid'
}
},
yearLabel: {
show: false,
textStyle: {
fontSize: 30
}
},
dayLabel: {
margin: 7,
firstDay: 1,
nameMap: ['日', '一', '二', '三', '四', '五', '六'],
color:'white',
fontSize:13
},
monthLabel: {
show: true
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,0)',
borderWidth: 1,
borderColor: 'rgb(0,136,212)'
}
},
range: ['2018-07']
},
series: [{
id: 'label',
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.formatTime('dd', params.value[0]);
},
offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
textStyle: {
color: 'white',
fontSize: 14
},
}
},
data: scatterData
}]
};
if (!app.inNode) {
var pieInitialized;
setTimeout(function () {
pieInitialized = true;
myChartRiLi.setOption({
series: getPieSeriesUpdate(scatterData, myChartRiLi)
});
}, 10);
app.onresize = function () {
if (pieInitialized) {
myChartRiLi.setOption({
series: getPieSeriesUpdate(scatterData, myChartRiLi)
});
}
};
};
if (option && typeof option === "object") {
myChartRiLi.setOption(option, true);
}
}
function loadOptionYibiao1(){
option = {
tooltip : {
formatter: "{a}
{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'业务指标',
type:'gauge',
startAngle: 180,
endAngle: 0,
center : ['50%', '90%'], // 默认全局居中
radius : 320,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 200
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :12, // 属性length控制线长
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
formatter: function(v){
switch (v+''){
case '10': return '低';
case '50': return '中';
case '90': return '高';
default: return '';
}
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 15,
fontWeight: 'bolder'
}
},
pointer: {
width:50,
length: '90%',
color: 'rgba(255, 255, 255, 0.8)'
},
title : {
show : true,
offsetCenter: [0, '-60%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 30
}
},
detail : {
show : true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: [0, -40], // x, y，单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontSize : 50
}
},
data:[{value: 50, name: '完成率'}]
}
]
};
//yibiao1.setOption(option);
}
//加载统计图1数据
function loadoOption1(){
myChart1.clear();
var data = [{
value:92,
name: '室内灯'
},{
value:132,
name: '室外灯'
}, {
value: 181,
name: '水泵'
}, {
value: 142,
name: '空调'
}, {
value: 212,
name: '电梯'
}, {
value: 28,
name: '周边设施'
}, {
value: 382,
name: '音响'
}, {
value: 41,
name: '网络设施'
}];
var option = {
title: {
text:'1000',
subtext: '总功率',
left:'center',
top:'50%',
padding:[24,0],
textStyle:{
color:'#fff',
fontSize:18,
align:'center'
}
},
backgroundColor: 'rgba(255,255,255,0)',
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)",
extraCssText:'height:60px;',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
}
},
legend: {
orient: 'horizontal',
top: '2%',
left: 'center',
data: ['室内灯','室外灯','空调','水泵','电梯','周边设施','音响','网络设施'],
textStyle:{
fontSize: 11,
color: '#6cbbe6'
}
},
series: [{
name: '受理数',
type: 'pie',
selectedMode: 'single',
center : ['50%', '60%'],
radius: ['40%', '58%'],
color: ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'],
label: {
normal: {
show: false,
position: 'outside',
formatter: '{b}',
textStyle: {
color: '#3db3cb',
fontSize: 12
}
}
},
labelLine: {
normal: {
show: false,
lineStyle: {
color: '#3db3cb'
}
}
},
animationDuration: function (idx) {
// 越往后的数据延迟越大
return 10000;
},
data: data
}]
};
myChart1.setOption(option);
}
//加载统计图2数据
function loadoOption2(){
myChart2.clear();
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top:'5%',
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true,
},
xAxis: {
type: 'value',
splitLine: {show: false},
boundaryGap: [0, 0.01],
axisLabel:{
textStyle:{
color: '#6cbbe6'
}
},
},
yAxis: {
type: 'category',
splitLine: {show: false},
data: ['室内灯','室外灯','空调','水泵','电梯','周边设施','音响','网络设施'],
axisLabel:{
textStyle:{
fontSize: 15,
color: '#6cbbe6'
}
},
},
series: [
{
name: '办理数',
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
shadowBlur:100,
shadowColor: 'rgba(0, 0, 0, 0.5)',
label : {
show : false //隐藏标示文字
},
labelLine : {
show : false //隐藏标示线
}
}
},
barWidth:20,
barGap:40,
type: 'bar',
data: [92,132,142,181,212,28,382,41]
}
]
};
myChart2.setOption(option);
}
//加载统计图3数据
function loadoOption3(){
myChart3.clear();
var option = {
title: {
text: '最近6个月能耗统计',
show: true,
textStyle: {
fontWeight: 'normal',
fontSize: 22,
color: '#3db3cb'
},
left: '2%',
top: '2%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#3db3cb'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(128, 128, 128, 0.5)'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#999'
}
},
data: ['2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12']
}],
yAxis: [{
type: 'value',
name: '',
axisTick: {
show: false
},
axisLine: {
show:false,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(121, 157, 255, 0.5)'
}
}
}],
series: [{
name: '能耗统计',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.2)'
}, {
offset: 1,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [120, 110, 145, 122, 165, 150]
}, ]
}
myChart3.setOption(option);
}
//热门事项排行
function loadoOption4(){
myChart4.clear();
// var option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
// grid: {
// top:'5%',
// left: '5%',
// right: '5%',
// bottom: '5%',
// containLabel: true,
// },
// yAxis: {
// type: 'value',
//
// splitLine: {show: false},
// boundaryGap: [0, 0.01],
// axisLabel:{
// textStyle:{
// color: '#6cbbe6'
// }
// },
// },
// xAxis: {
// type: 'category',
// splitLine: {show: false},
// data: ['价格','护士','再生育证审批','社会团体登记','医师执业注册','印刷企业设立','污染物排放','教师资格认定'],
// axisLabel:{
// textStyle:{
// fontSize: 10,
// color: '#6cbbe6'
// }
// },
// },
// series: [
// {
// name: '办理数',
// itemStyle: {
// normal: {
// color: function(params) {
// // build a color map as your need.
// var colorList = [
// '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
// '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
// '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
// ];
// return colorList[params.dataIndex]
// },
// shadowBlur:100,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// },
// barWidth:10,
// barGap:40,
// type: 'bar',
// data: [92,132,142,181,212,28,382,41]
// }
// ]
// };
option = {
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['集水井','变压器','备变压器','消防泵','水泵'],
axisLabel:{
textStyle:{
color: '#6cbbe6'
}
}
}
],
yAxis : [
{
type : 'value',
axisLabel:{
textStyle:{
color: '#6cbbe6'
}
}
}
],
series : [
{
name:'报警统计',
type:'bar',
data:[2, 4, 7, 23, 9],
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'
];
return colorList[params.dataIndex]
},
shadowBlur:100,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
barWidth:80,
barGap:40,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
myChart4.setOption(option);
}