cockpit.git - Gitblit

			@@ -38,7 +38,7 @@
			},
			data() {
			return {

			userId:""
			}
			},
			methods: {
			@@ -57,7 +57,9 @@
			self.$axios({
			method:"get",
			url:"/batteryAlarm/dischargeAnalysis",
			params:null
			params:{
			userId:self.userId
			}

			}).then(res=>{
			if(res.data.code == 1){
			@@ -75,7 +77,7 @@
			data.forEach(() => {
			maxYAxis.push(maxInt);
			});
			self.optionSet(xAxisData,maxYAxis,xData,data,);
			self.optionSet(xAxisData,maxYAxis,xData,data);
			console.log(xAxisData,data)
			}
			})
			@@ -84,389 +86,412 @@
			}

			},
			// 获取对应数据
			getArrValue(value){
			let test = 0;
			if(value == "告警总数比例" \|\| value == "告警机房数比例"){
			test = 1;
			}
			return test;
			},
			// 图表配置
			optionSet(xAxisData,maxYAxis,xData,data){
			let self = this;
			var option = {
			grid: {
			left: '15%',
			right: '15%',
			bottom: '10%',
			top: '17%',
			z: 22
			},
			xAxis: [
			{
			//左侧柱状图的x轴下X轴
			type: 'category',
			gridIndex: 0,//y轴所在的 grid 的索引
			// boundaryGap: false,
			splitLine: 'none',
			axisTick: 'none',
			axisLine: {
			show:true,
			lineStyle: {
			width:2,
			color: 'rgba(117,103,244,1)',
			}
			grid: {
			left: '15%',
			right: '15%',
			bottom: '10%',
			top: '17%',
			z: 22
			},
			xAxis: [
			{
			//左侧柱状图的x轴下X轴
			type: 'category',
			gridIndex: 0,//y轴所在的 grid 的索引
			// boundaryGap: false,
			splitLine: 'none',
			axisTick: 'none',
			axisLine: {
			show:true,
			lineStyle: {
			width:2,
			color: 'rgba(117,103,244,1)',
			}
			},
			axisLabel: {
			// verticalAlign: 'bottom',
			align: 'center',
			textStyle: {
			color: '#FFFFFF',
			fontSize: '12'
			}
			},
			data: xAxisData,//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
			// inverse: true, //反转
			},
			{
			// 左侧柱状图的Y轴上X轴
			gridIndex: 0,//y轴所在的 grid 的索引
			splitLine: 'none',
			axisTick: 'none',
			axisLine: {
			show:false
			},
			axisLabel:{
			color:function (params,index) {
			let colorList = [
			"#EB6F49",
			"#757EFA",
			"#1A6AEF",
			"#67E0E3",
			"#FED601"
			];
			return colorList[index];
			},
			},
			// inverse: true, //反转
			data: xData//[555,444,333,222,666],
			},
			],
			yAxis: [
			{
			//坐标轴左Y轴
			type: 'value',
			// name: '数值',
			min: 0,
			max: maxYAxis[0],
			// interval: 300,
			axisLine: {
			show: false,
			// y坐标线样式
			lineStyle:{
			width:3
			},
			// y坐标文字样式
			itemStyle:{
			width:3,
			color:"#ffffff"
			}

			},
			//坐标值标注
			axisLabel: {
			// verticalAlign: 'bottom',
			align: 'center',
			show: true,
			textStyle: {
			color: '#FFFFFF',
			fontSize: '12'
			color: '#ffffff',
			}
			},
			data: xAxisData//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
			// inverse: true, //反转
			//分格线
			splitLine: {
			show:false,
			lineStyle: {
			color: '#000'
			}
			}
			},
			{
			// 左侧柱状图的Y轴上X轴
			gridIndex: 0,//y轴所在的 grid 的索引
			splitLine: 'none',
			axisTick: 'none',
			axisLine: {
			show:false
			{//右Y轴
			type: 'value',
			// name: '比例',
			min: 0,
			max: 100,
			// interval: 10,
			axisLabel: {
			formatter: '{value} %'
			},
			axisLabel:{
			color:function (params,index) {
			let colorList = [
			"#EB6F49",
			"#67E0E3",
			"#FED601",
			"#757EFA",
			"#1A6AEF"
			];
			return colorList[index];
			},
			},
			data: xData//[555,444,333,222,666],
			},
			//分格线
			splitLine: {
			show:false,
			lineStyle: {
			color: '#000'
			}
			}
			}
			],
			yAxis: [
			{
			//坐标轴左Y轴
			type: 'value',
			// name: '数值',
			min: 0,
			max: maxYAxis[0],
			// interval: 300,
			axisLine: {
			show: false,
			// y坐标线样式
			lineStyle:{
			width:3
			series: [
			// 低告警数量
			{
			name: xAxisData[0],
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [data[0],0,0,0,0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			// y坐标文字样式
			itemStyle:{
			width:3,
			color:"#ffffff"
			}
			// 告警总数
			{
			name: xAxisData[1],
			type: 'bar',
			// xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: self.getArrValue(xAxisData[1]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,data[1],0,0,0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			// 告警总数比例
			{
			name: xAxisData[2],
			type: 'bar',
			// xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: self.getArrValue(xAxisData[2]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,0,data[2],0,0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			// 告警机房总数
			{
			name: xAxisData[3],
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex:self.getArrValue(xAxisData[3]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,0,0,data[3],0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			// 告警机房数比例
			{
			name: xAxisData[4],
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: self.getArrValue(xAxisData[4]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,0,0,0,data[4]],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			// 外框
			{
			name: '外框',
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			barGap: '-1',
			data: maxYAxis,//[1800,1800, 1800,1800,1800],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: 'rgba(255, 255, 255, 0.15)',
			barBorderRadius: 6,
			}
			},
			z: 0
			},
			// 低告警数量
			{
			name: xAxisData[0],
			type: 'pictorialBar',
			// symbol: '../../assets/logo copy.png',
			symbolSize: [30,-30],
			yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: data[0],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			// 告警总数
			{
			name: xAxisData[1],
			type: 'pictorialBar',
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			yAxisIndex: self.getArrValue(xAxisData[1]),
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[1],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			// 告警总数比例
			{
			name: xAxisData[2],
			type: 'pictorialBar',
			yAxisIndex: self.getArrValue(xAxisData[2]),
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[2],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			// 告警机房总数
			{
			name: xAxisData[3],
			type: 'pictorialBar',
			yAxisIndex: self.getArrValue(xAxisData[3]),
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[3],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			// 告警机房数比例
			{
			name: xAxisData[4],
			yAxisIndex: self.getArrValue(xAxisData[4]),
			type: 'pictorialBar',
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[4],
			symbolPosition: 'end'
			}]
			},

			},
			//坐标值标注
			axisLabel: {
			show: true,
			textStyle: {
			color: '#ffffff',
			}
			},
			//分格线
			splitLine: {
			show:false,
			lineStyle: {
			color: '#000'
			}
			}
			},
			{//右Y轴
			type: 'value',
			// name: '比例',
			min: 0,
			max: 100,
			// interval: 10,
			axisLabel: {
			formatter: '{value} %'
			},
			//分格线
			splitLine: {
			show:false,
			lineStyle: {
			color: '#000'
			}
			}
			}
			],
			series: [
			{
			name: '低告警数量',
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [data[0],0,0,0,0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,58,123,1)', 'rgba(234,167,116,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			{
			name: '告警机房总数',
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,data[1],0,0,0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			{
			name: '告警机房数比例',
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,0,data[2],0,0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			{
			name: '告警总数',
			type: 'bar',
			// xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,0,0,data[3],0],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(117,103,244,1)', 'rgba(156,178,255,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			{
			name: '告警总数比例',
			type: 'bar',
			// xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			data: [0,0,0,0,data[4]],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(0,55,236,1)', 'rgba(0,123,196,1)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			barBorderRadius:6
			},
			},
			z: 2
			},
			{
			name: '外框',
			type: 'bar',
			xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
			yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
			barGap: '-1',
			data: maxYAxis,//[1800,1800, 1800,1800,1800],
			barWidth: 15,
			itemStyle: {
			normal: {
			color: 'rgba(255, 255, 255, 0.15)',
			barBorderRadius: 6,
			}
			},
			z: 0
			},
			{
			name: '低告警数量',
			type: 'pictorialBar',
			// symbol: '../../assets/logo copy.png',
			symbolSize: [30,-30],
			yAxisIndex: 0,
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: data[0],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			{
			name: '告警机房总数',
			type: 'pictorialBar',
			yAxisIndex: 0,
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[1],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			{
			name: '告警机房数比例',
			yAxisIndex: 1,
			type: 'pictorialBar',
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[2],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			{
			name: '告警总数',
			type: 'pictorialBar',
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			yAxisIndex: 0,
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[3],
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			}]
			},
			{
			name: '告警总数比例',
			type: 'pictorialBar',
			yAxisIndex: 1,
			// symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
			symbolSize: [30,-30],
			color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
			].map((color, offset) => ({
			color,
			offset
			}))),
			z: 12,
			data: [{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: 0,
			symbolPosition: 'end'
			},{
			value: data[4],
			symbolPosition: 'end'
			}]
			},
			]
			};
			this.setOption(option);

			]
			};
			this.setOption(option);
			},
			resize() {
			let self = this;
			@@ -477,6 +502,8 @@
			}
			},
			mounted() {
			// 获取userId
			this.userId = localStorage.getItem("userId");
			// 基于准备好的dom，初始化echarts实例
			this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);

	src/components/charts/dischargeCircuit.vue	773 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/histogramAlternating.vue	7 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/monomerVoltage.vue	7 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -43,7 +43,8 @@
			data() {
			return {
			gjjfzs:0,
			gjjfsbl:0
			gjjfsbl:0,
			userId:""
			}
			},
			methods: {
			@@ -62,7 +63,7 @@
			method:"get",
			url:"/powerAlarm/acABC",
			params:{
			userId:"1001"
			userId:self.userId
			}
			}).then(res=>{
			if(res.data.code == 1){
			@@ -300,6 +301,8 @@
			}
			},
			mounted() {
			// 获取userId
			this.userId = localStorage.getItem("userId");
			// 基于准备好的dom，初始化echarts实例
			this.$options.chart = echarts.init(this.$refs.alternating);

			@@ -38,6 +38,7 @@
			},
			data() {
			return {
			userId:""
			}
			},
			methods: {
			@@ -55,7 +56,9 @@
			self.$axios({
			method:"get",
			url:"/batteryAlarm/monVRTAnalysis",
			params:null
			params:{
			userId:self.userId
			}
			}).then(res=>{
			if(res.data.code == 1){
			let result = res.data.data;
			@@ -188,6 +191,8 @@
			}
			},
			mounted() {
			// 获取userId
			this.userId = localStorage.getItem("userId");
			// 基于准备好的dom，初始化echarts实例
			this.$options.chart = echarts.init(this.$refs.monomerVoltage);