 $(window).load(function(){  
             $(".loading").fadeOut();
})  
			

$(document).ready(function(){
	var whei=$(window).width();
	$("html").css({fontSize:whei/20});
	$(window).resize(function(){
	var whei=$(window).width();
	 $("html").css({fontSize:whei/20});
	});
	wbzl();
	yqbj();
	wxyg();
	wwbzl();
	sbj();
	dbj();
});

function wbzl(){
	var wbzl = echarts.init(document.getElementById('wbzl'));
	var hours = [ '做饭', '误报', '粉尘', '其它'];
	var days = ['12月', '10月', '9月', '8月'];
	var data = [
		[0, 0, 5],
		[0, 1, 1],
		[0, 2, 2],
		[0, 3, 8],
		[1, 0, 3],
		[1, 1, 5],
		[1, 2, 1],
		[1, 3, 9],
		[2, 0, 4],
		[2, 1, 8],
		[2, 2, 4],
		[2, 3, 8],
		[3, 0, 6],
		[3, 1, 7],
		[3, 2, 4],
		[3, 3, 9],
	];
	option = {
		title: {
			text: '',
			textStyle: {
				fontSize: 18,
				fontWeight: 600,
				fontFamily: 'siyuanheiti_Thin'
			},
			subtext: '',
			subtextStyle: {
				fontSize: 16,
			}
		},
		tooltip: {
			show: false
		},
		visualMap: {
			show: false,
			max: 20,
			inRange: {
				color: ['#FF4500', '#FF6347', '#CD5C5C', '#B22222', '#CD5C5C', '#F08080', '#FA8072']
			}
		},
		xAxis3D: {
			name: '',
			type: 'category',
			data: hours
		},
		yAxis3D: {
			name: '',
			type: 'category',
			data: days
		},
		zAxis3D: {
			name: '',
			type: 'value'
		},
		grid3D: {
			boxWidth: 200,
			boxDepth: 120,
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1
				}
			},
			axisLabel: {
				color: "rgba(255,255,255,.6)",
                    fontSize: '12',
			},
			light: {
				main: {
					intensity: 1.2,
					shadow: true
				},
				ambient: {
					intensity: 0.7,
					shadow: true
				}
			},
			viewControl: {
				alpha: 15,
				beta: 40,
				autoRotate: true,
				zoomSensitivity: 0,
				autoRotateAfterStill: 5,
				distance: 250
			}
		},
		series: [{
			type: 'bar3D',
			name: '数量',
			data: data.map(function(item) {
				return {
					value: [item[0], item[1], item[2]]
				}
			}),
			shading: 'lambert',
			label: {
				show: true,
				distance: 1,
				textStyle: {
					color: '#32CD32',
					fontSize: 18,
					borderWidth: 0,
					borderColor: 'none',
					backgroundColor: 'rgba(255,255,255,0)',
					fontFamily: 'impact, Simhei'
				},
			},
			itemStyle: {
				opacity: 1
			},
			/*emphasis: {
				label: {
					textStyle: {
						fontSize: 20,
						color: '#900'
					}
				},
				itemStyle: {
					color: '#900'
				}
			}*/
		}]
	}
	 // 使用刚指定的配置项和数据显示图表。
        wbzl.setOption(option);
        window.addEventListener("resize",function(){
            wbzl.resize();
        });
}
//无线烟感
function wxyg() {
        // 基于准备好的dom，初始化echarts实例
        var wxyg = echarts.init(document.getElementById('wxyg'));

       option = {
  //  backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow'}
    },
    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '4%',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
      		data: ['设备数量', '本月报警', '上月报警'],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
		
        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
		{
       
        type: 'bar',
        data: [ 600, 200, 900],
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#27d08a',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }
		
	]
};
      
        // 使用刚指定的配置项和数据显示图表。
        wxyg.setOption(option);
        window.addEventListener("resize",function(){
            wxyg.resize();
        });
}


function yqbj() {
	var yqbj = echarts.init(document.getElementById('yqbj'));
	option = {
    //backgroundColor: '#000',
    color: ["#37b70c", "#fae521", "#d0a00e"],
    
    tooltip: {
        show: false,
        backgroundColor: 'rgba(0,0,0,0.9)',
    },
    xAxis3D: {
        type: 'category',
        data: ['设备数量', '本月报警', '上月报警'],
       axisLine: {
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
        axisLabel: {
            interval: 0,
            rotate: 45,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            }
        },
    },
    yAxis3D: {
		
        type: 'category',
        data: [''],
         axisLine: {
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
    },
    zAxis3D: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#0f0',
                width: 1
            }
        },
    },
    grid3D: {
        boxWidth: 250,
        boxDepth: 2,
        axisPointer: {
            show: false
        },
        light: {
            main: {
                intensity: 1.2
            },
            ambient: {
                intensity: 0.3
            }
        },
        viewControl: {
            alpha: 20,
            beta: 0,
            autoRotate: true,
            zoomSensitivity: 0,
            autoRotateAfterStill: 10,
            distance: 200
        }
    },
    series: [{
        type: 'bar3D',
        name: '1',
        barSize: 15,
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = [
                        "#37b70c",  "#dd3f36", "#d0a00e"
                    ];
                    return colorList[params.dataIndex]
                },
            }
        },
        data: [
            [0, 0, 100],
            [1, 0, 20],
            [2, 0, 60],
        ],
        stack: 'stack',
        shading: 'lambert',
        emphasis: {
            label: {
                show: true
            }
        }

    }]
};

	 yqbj.setOption(option);
	  window.addEventListener("resize",function(){
            yqbj.resize();
        });
}

//无线烟感
function wwbzl() {
        // 基于准备好的dom，初始化echarts实例
        var wwbzl = echarts.init(document.getElementById('wwbzl'));

	// 小气泡
	var img = 'data:image/png;base64,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';
	var img2 = 'data:image/png;base64,[encoded data, 45436 characters]'
	//字符串截取
	var wordLength = (value) => {
		var ret = ""; //拼接加\n返回的类目项
		var maxLength = 4; //每项显示文字个数
		var valLength = value.length; //X轴类目项的文字个数
		var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
		if (rowN > 1) //如果类目项的文字大于3,
		{
			for (var i = 0; i < rowN; i++) {
				var temp = ""; //每次截取的字符串
				var start = i * maxLength; //开始截取的位置
				var end = start + maxLength; //结束截取的位置
				//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
				temp = value.substring(start, end) + "\n";
				ret += temp; //凭借最终的字符串
			}
			return ret;
		} else {
			return value;
		}
	}
	//
	var data = [{
			name: "做饭",
			value: "355"
		},
		{
			name: "粉尘",
			value: "193"
		},
		{
			name: "误报",
			value: "874"
		},
		{
			name: "其它",
			value: "427"
		},
		{
			name: "吸烟",
			value: "308"
		},

	];
	//偏移量
	var offsetData = [
		[80, 53],
		[35, 73],
		[30, 33],
		[60, 33],
		[10, 48]
	];
	//symbolSize 散点气泡大小
	var symbolSizeData = [100, 85, 75, 65, 35];
	//
	//循环定义series的data值
	var datas = [];
	for (var i = 0; i < data.length; i++) {
		var item = data[i];
		//var itemToStyle = datalist[i];

		datas.push({
			name: wordLength(item.name) + "\n" + item.value + "人",
			value: offsetData[i],
			symbolSize: symbolSizeData[i],
			label: {
				normal: {
					textStyle: {
						fontSize: 12
					}
				}
			},
			itemStyle: {
				normal: {
					color: new echarts.graphic.RadialGradient(0.3, 0.5, 0.7, [{
							offset: 0,
							color: "#8B0000"
						},
						{
							offset: 1,
							color: "#FF0000"
						}
					]),
					opacity: 0.8,
					shadowColor: '#2e78eca8',
					shadowBlur: 10,
					shadowOffsetX: 1,
					shadowOffsetY: 1,
				},

			}
		});
	}

	var option = {
		//   backgroundColor: "transparent",
		//backgroundColor: '#0e2147',
		grid: {
			show: false,
			top: 10,
			bottom: 10
		},
		xAxis: [{
			gridIndex: 0,
			type: "value",
			show: false,
			min: 0,
			max: 100,
			nameLocation: "middle",
			nameGap: 5
		}],
		yAxis: [{
			gridIndex: 0,
			min: 0,
			show: false,
			max: 100,
			nameLocation: "middle",
			nameGap: 30
		}],
	   
		series: [{
			type: "scatter",
			symbol: "circle",
			symbolSize: 120,
			label: {
				normal: {
					show: true,
					formatter: "{b}",
					color: "#fff",
					textStyle: {
						fontSize: "20"
					}
				}
			},
			animationDurationUpdate: 1000,
			animationEasingUpdate: 1000,
			animationDelay: function(idx) {
				// 越往后的数据延迟越大
				return  100;
			},
			itemStyle: {
				normal: {
					color: "#00acea"
				}
			},
			data: datas
		}],
		 graphic: [
			{
				type: 'image',
				id: 'logo',
				left: '45%',
				bottom: '30%',
				z: -10,
				bounding: 'raw',
				origin: [675, 5],
				//  position: [100, 0], // 平移，默认值为 [0, 0]。
				style: {
					image: img2,
					width: 120,
					height: 120,
					opacity: 0.4
				}
			},
			{
				type: 'image',
				id: 'logo1',
				right: '14%',
				bottom: '0',
				z: -10,
				bounding: 'raw',
				origin: [275, 5],
				style: {
					image: img2,
					width: 80,
					height: 80,
					opacity: 0.4
				}
			},
			 {
				type: 'image',
				id: 'logo2',
				left: '10%',
				bottom: '2%',
				z: -10,
				bounding: 'raw',
				origin: [875, 15],
				style: {
					image: img2,
					width: 60,
					height: 60,
					opacity: 0.4
				}
			}, {
				type: 'image',
				id: 'logo3',
				left: '36%',
				bottom: 0,
				z: -10,
				bounding: 'raw',
				origin: [975, 5],
				style: {
					image: img2,
					width: 40,
					height: 40,
					opacity: 0.4
				}
			},
			 {
				type: 'image',
				id: 'logo4',
				left: '32%',
				bottom: '10%',
				z: -10,
				bounding: 'raw',
				origin: [76, 76],
				style: {
					image: img2,
					width: 50,
					height: 50,
					opacity: 0.4
				}
			},
			 {
				type: 'image',
				id: 'logo5',
				left: '40%',
				bottom: '35%',
				z: -10,
				bounding: 'raw',
				origin: [76, 76],
				style: {
					image: img2,
					width: 90,
					height: 90,
					opacity: 0.4
				}
			},
			],
	};

	var rotation = 0;
	setInterval(function () {
		wwbzl.setOption({
			graphic:[
				 {
				id: 'logo',
				rotation: -(rotation += Math.PI / 860) % (Math.PI * 2),
				},
				{
				id: 'logo1',
				rotation: -(rotation += Math.PI / 640) % (Math.PI * 2),
				},
				{
				 id: 'logo2',
				rotation: -(rotation += Math.PI / 360) % (Math.PI * 2),
				},
				 {
				id: 'logo3',
				rotation: -(rotation += Math.PI / 720) % (Math.PI * 2),
				},
				]
		});
	}, 30);


// 使用刚指定的配置项和数据显示图表。
        wwbzl.setOption(option);
        window.addEventListener("resize",function(){
            wwbzl.resize();
        });
}


function test(){
var myChart = echarts.init(document.getElementById('echarts4'));
        var plantCap = [{
            name: '工业',
            value: '222'
        }, {
            name: '农业',
            value: '115'
        }, {
            name: '互联网',
            value: '113'
        }, {
            name: '医疗',
            value: '95'
        }, {
            name: '文学',
            value: '92'
        }, {
            name: '服装',
            value: '87'
        }];
        var datalist = [{
            offset: [56, 48],
            symbolSize: 110,
   
            color: 'rgba(73,188,247,.14)',

        }, {

            offset: [30, 70],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [0, 43],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }, {
            offset: [93, 30],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [26, 19],
            symbolSize: 65,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [75, 75],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }];

        var datas = [];
        for (var i = 0; i < plantCap.length; i++) {
            var item = plantCap[i];
            var itemToStyle = datalist[i];
            datas.push({
                name: item.value + '\n' + item.name,
                value: itemToStyle.offset,
                symbolSize: itemToStyle.symbolSize,
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },

                itemStyle: {
                    normal: {
                        color: itemToStyle.color,
                        opacity: itemToStyle.opacity
                    }
                },
            })
        }
        option = {
            grid: {
                show: false,
                top: 10,
                bottom: 10
            },

            xAxis: [{
                gridIndex: 0,
                type: 'value',
                show: false,
                min: 0,
                max: 100,
                nameLocation: 'middle',
                nameGap: 5
            }],

            yAxis: [{
                gridIndex: 0,
                min: 0,
                show: false,
                max: 100,
                nameLocation: 'middle',
                nameGap: 30
            }],
            series: [{
                type: 'scatter',
                symbol: 'circle',
                symbolSize: 120,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        color: '#FFF',
                        textStyle: {
                            fontSize: '30'
                        }
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#F30'
                    }
                },
                data: datas
            }]

        };
        myChart.setOption(option);
        $(document).ready(function () {
            myChart.resize();

        })
        window.addEventListener("resize", function () {
            myChart.resize();
        });
}

//水报警
function sbj(){
	var myChart = echarts.init(document.getElementById('sbj'));
	let [in_new, in_min, in_max, in_avg] = ['0', '0', '0', '0', ]
	let [out_new, out_min, out_max, out_avg] = ['0', '0', '0', '0', ]
	let {
		date,
		in_data,
		out_data
	} = {
		date: [],
		in_data: [],
		out_data: []
	}
	// 格式化时间
	function getTime() {
		var ts = arguments[0] || 0;
		var t, h, i, s;
		t = ts ? new Date(ts * 1000) : new Date();
		h = t.getHours();
		i = t.getMinutes();
		s = t.getSeconds();
		// 可根据需要在这里定义时间格式
		return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
	}
	// 生成初始数据
	for (var i = 0; i < 100; i++) {
		in_data.push(Math.ceil(Math.random() * 500));
		out_data.push(Math.ceil(Math.random() * 800));
		date.push(getTime(Math.round(new Date().getTime() / 1000) - i))
	}
	option = {
		title: [{
			text: '',
			x: 15,
			y: '20',
			textBaseline: 'middle',
			textStyle: {
				fontSize: 20,
				fontWeight: '500'
			}
		}, {
			text: '',
			x: 15,
			y: '40',
			textBaseline: 'middle',
			textStyle: {
				color:'#cccccc',
				fontSize: 16,
				fontWeight: '100'
			}
		}, {
			text: '最新',
			x2: 215,
			y: '10',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: '最小',
			x2: 145,
			y: '10',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: '最大',
			x2: 75,
			y: '10',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: '平均',
			x2: 5,
			y: '10',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: in_new,
			x2: 215,
			y: '26',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: in_min,
			x2: 145,
			y: '26',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: in_max,
			x2: 75,
			y: '25',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: in_avg,
			x2: 5,
			y: '25',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: out_new,
			x2: 215,
			y: '40',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: out_min,
			x2: 145,
			y: '40',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {
			text: out_max,
			x2: 75,
			y: '40',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}, {

			text: out_avg,
			x2: 5,
			y: '40',
			textBaseline: 'middle',
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: '100'
			}
		}],
		legend: [{
			x2: 260,
			y: 20,
			icon: 'rect',
			itemGap: 3,
			itemWidth: 11,
			textStyle: {
 					color: "#fff",
                    fontSize: '12',
                },

			itemHeight: 11,
			orient: 'vertical',
			data: ['压力', '液压']
		}],
		grid: [{
			left: 20,
			right: 20,
			top: 80,
			bottom: 20,
			containLabel: true
		}],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#57617B'
				}
			}
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			axisLine: {
				lineStyle: {
					color: '#57617B'
				}
			},
			axisLabel:  {
               // rotate:50,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
			data: date
		}],
		yAxis: [{
			type: 'value',
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#57617B'
				}
			},
			axisLabel: {
				formatter: '{value}MPa',
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: 12
				}
			},
			splitLine: {
				lineStyle: {
					color: '#cccccc'
				}
			}
		}],
		series: [{
			name: '压力',
			type: 'line',
			showSymbol: false,
			lineStyle: {
				normal: {
					width: 0
				}
			},
			itemStyle: {
				normal: {
					color: 'rgba(0,0,255)'
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(0,0,255, 1)'
					}, {
						offset: 0.8,
						color: 'rgba(0,0,255, 0.5)'
					}])
				},
			},
			data: out_data
		}, {
			name: '液压',
			type: 'line',
			showSymbol: false,
			lineStyle: {
				normal: {
					width: 0
				}
			},
			itemStyle: {
				normal: {
					color: 'rgba(0,255,0)'
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(0,255,0,1)'
					}, {
						offset: 0.8,
						color: 'rgba(0,255,0, 0.5)'
					}])
				},
			},
			data: in_data
		}]
	};
	setInterval(function() {
		date.shift()
		in_data.shift();
		out_data.shift();
		in_data.push(Math.ceil(Math.random() * 500));
		out_data.push(Math.ceil(Math.random() * 800));
		date.push(getTime(Math.round(new Date().getTime() / 1000)))

		in_new = in_data[in_data.length - 1]
		out_new = out_data[out_data.length - 1]
		in_min = Math.min.apply(null, in_data);
		in_max = Math.max.apply(null, in_data);
		out_min = Math.min.apply(null, out_data);
		out_max = Math.max.apply(null, out_data);
		in_avg = in_data.reduce(function(tmp, item, index) {
			if (index != in_data.length - 1) {
				return tmp + item;
			} else {
				return (tmp + item) / out_data.length;
			}
		});
		out_avg = out_data.reduce(function(tmp, item, index) {
			if (index != out_data.length - 1) {
				return tmp + item;
			} else {
				return (tmp + item) / out_data.length;
			}
		});

		myChart.setOption({
			title: [{
				text: ''
			}, {
				text: ''
			}, {
				text: '最新'
			}, {
				text: '最小',
			}, {
				text: '最大'
			}, {
				text: '平均'
			}, {
				text: in_new 
			}, {
				text: in_min
			}, {
				text: in_max
			}, {
				text: in_avg
			}, {
				text: out_new
			}, {
				text: out_min
			}, {
				text: out_max
			}, {
				text: out_avg
			}],
			series: [{
				data: out_data
			}, {
				data: in_data
			}],
			xAxis: [{
				data: date
			}],
		});
	}, 1000)
	
	 myChart.setOption(option);
        $(document).ready(function () {
            myChart.resize();

        })
        window.addEventListener("resize", function () {
            myChart.resize();
        });
}

function dbj(){
	var dbj = echarts.init(document.getElementById('dbj'));
option = {
tooltip : {
	formatter: "{a} <br/>{c} {b}"
},
toolbox: {
	show: false,
	feature: {
		restore: {show: true},
		saveAsImage: {show: true}
	}
},
series : [
	{
		name: '温度1',
		type: 'gauge',
		center: ['30%', '31%'], 
		z: 3,
		min: 0,
		max: 20,
		splitNumber: 10,
		radius: '60%',
		axisLine: {            // 坐标轴线
			lineStyle: {       // 属性lineStyle控制线条样式
				color: [[0.2, '#7FFF00'], [0.8, '#00FFFF'], [1, '#FF0000']],
				width: 6
			}
		},
		axisTick: {            // 坐标轴小标记
			length: 5,        // 属性length控制线长
			lineStyle: {       // 属性lineStyle控制线条样式
				color: 'auto'
			}
		},
		splitLine: {           // 分隔线
			length: 20,         // 属性length控制线长
			lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
				color: 'auto'
			}
		},
		pointer: {
			width:2
		},
		title : {
			textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				fontWeight: 'normal',
				color: '#fff',
				fontSize: 12,
				offsetCenter: ['15%', '-20%'],       // x, y，单位px
				// fontStyle: 'italic'
			}
		},
		detail : {
			textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				fontWeight: 'normal',
				fontSize: 12
			}
		},
		data:[{value: 1, name: '温度1'}]
	},
	{
		name: 'A相电流',
		type: 'gauge',
		center: ['60%', '31%'], 
		z: 3,
		min: 0,
		max: 8,
		splitNumber:8,
		radius: '60%',
		axisLine: {            // 坐标轴线
			lineStyle: {       // 属性lineStyle控制线条样式
				color: [[0.2, '#7CFC00'], [0.8, '#00FFFF'], [1, '#FF0000']],
				width: 6
			}
		},
		axisTick: {            // 坐标轴小标记
			length: 15,        // 属性length控制线长
			lineStyle: {       // 属性lineStyle控制线条样式
				color: 'auto'
			}
		},
		splitLine: {           // 分隔线
			length: 20,         // 属性length控制线长
			lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
				color: 'auto'
			}
		},
		pointer: {
			width:4
		},
		title : {
			textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				fontWeight: 'normal',
				color: '#fff',
				fontSize: 12,
				// fontStyle: 'italic'
			}
		},
		detail : {
			textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				fontWeight: 'normal',
				fontSize: 12
			}
		},
		data:[{value: 4, name: 'A相电流'}]
	},
	{
		name: 'A相电压',
		type: 'gauge',
		center: ['10%', '60%'],    // 默认全局居中
		radius: '35%',
		min:0,
		max:540,
		startAngle: 180,
		endAngle: 0,
		splitNumber:2,
		axisLine: {            // 坐标轴线
			lineStyle: {       // 属性lineStyle控制线条样式
				color: [[0.2, '#7CFC00'], [0.8, '#00FFFF'], [1, '#FF0000']],
				width: 4
			}
		},
		axisTick: {            // 坐标轴小标记
			length:12,        // 属性length控制线长
			lineStyle: {       // 属性lineStyle控制线条样式
				color: 'auto'
			}
		},
		splitLine: {           // 分隔线
			length:20,         // 属性length控制线长
			lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
				color: 'auto'
			}
		},
		pointer: {
			width:3
		},
		title: {
			offsetCenter: ['5%', '-20%'],       // x, y，单位px
			color: '#fff',
				fontSize: 12,
		},
		detail: {
			textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
				fontSize: 12,
				fontWeight: 'normal'
			}
		},
		data:[{value:270, name: 'A相电压'}]
	},
	{
		name: '剩余电流',
		type: 'gauge',
		center: ['80%', '60%'],    // 默认全局居中
		radius: '35%',
		min: 0,
		max: 2,
		startAngle: 180,
		endAngle: 0,
		splitNumber: 2,
		axisLine: {            // 坐标轴线
			lineStyle: {       // 属性lineStyle控制线条样式
				color: [[0.2, '#7CFC00'], [0.8, '#00FFFF'], [1, '#FF0000']],
				width: 4
			}
		},
		axisTick: {            // 坐标轴小标记
			splitNumber: 5,
			length: 10,        // 属性length控制线长
			lineStyle: {       // 属性lineStyle控制线条样式
				color: 'auto'
			}
		},
		axisLabel: {
			formatter:function(v){
				switch (v + '') {
					case '0' : return 'E';
					case '1' : return '1/2';
					case '2' : return 'F';
				}
			}
		},
		splitLine: {           // 分隔线
			length: 15,         // 属性length控制线长
			lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
				color: 'auto'
			}
		},
		pointer: {
			width:2
		},
	   title: {
			offsetCenter: ['5%', '35%'],       // x, y，单位px
			color: '#fff',
				fontSize: 12,
		},
		detail : {
			show: false
		},
		data:[{value: 270, name: '剩余电流'}]
	}
]
};
setInterval(function (){
option.series[0].data[0].value = (Math.random()*30).toFixed(2) - 0;
option.series[1].data[0].value = (Math.random()*8).toFixed(2) - 0;
option.series[2].data[0].value = (Math.random()*300).toFixed(2) - 0;
option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
dbj.setOption(option,true);
},2000);	
   dbj.setOption(option);
        $(document).ready(function () {
            dbj.resize();

        })
        window.addEventListener("resize", function () {
            dbj.resize();
        });
}

