From bfd192a0f909c90b41edb1318e2671b449f092ab Mon Sep 17 00:00:00 2001
From: whycwx <1272078254@qq.com>
Date: 星期一, 22 三月 2021 17:25:09 +0800
Subject: [PATCH] 修改
---
src/components/charts/dischargeCircuit.vue | 136 ++++++++++++++++++++++++++++++++++----------
1 files changed, 104 insertions(+), 32 deletions(-)
diff --git a/src/components/charts/dischargeCircuit.vue b/src/components/charts/dischargeCircuit.vue
index 17bea21..5412f29 100644
--- a/src/components/charts/dischargeCircuit.vue
+++ b/src/components/charts/dischargeCircuit.vue
@@ -12,6 +12,7 @@
export default {
name: "dischargeCircuit",
chart: "",
+ chartData: {},
props: {
id: {
require: true,
@@ -44,18 +45,58 @@
setOption(opt) {
this.$options.discharge.setOption(opt);
},
- setData() {
- var option = {
+ setData(dataList) {
+ let self = this;
+ let xAxisData = [];//['浣庡憡璀︽暟閲�', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鏁版瘮渚�', '鍛婅鎬绘暟','鍛婅鎬绘暟姣斾緥']
+ let maxYAxis = [];
+ let xData =[];
+ let data = [];
+ // 瀛樺��
+ self.$options.chartData = dataList;
+ if(!dataList){
+ self.$axios({
+ method:"get",
+ url:"/batteryAlarm/dischargeAnalysis",
+ params:null
+
+ }).then(res=>{
+ if(res.data.code == 1){
+ let result = res.data.data;
+ for (const key in result) {
+ xAxisData.push(key);
+ xData.push(result[key]);
+ if(typeof(result[key]) == 'string'){
+ data.push(parseFloat(result[key].replace(/%/g,"")));
+ }else{
+ data.push(result[key]);
+ }
+ }
+ let maxInt = Math.max.apply(null,data) + 100;
+ data.forEach(() => {
+ maxYAxis.push(maxInt);
+ });
+ self.optionSet(xAxisData,maxYAxis,xData,data,);
+ console.log(xAxisData,data)
+ }
+ })
+ }else{
+ self.optionSet(dataList.xAxisData,dataList.maxYAxis,dataList.xData,dataList.data);
+ }
+
+ },
+ // 鍥捐〃閰嶇疆
+ optionSet(xAxisData,maxYAxis,xData,data){
+ var option = {
grid: {
- left: '10%',
- right: '5%',
+ left: '15%',
+ right: '15%',
bottom: '10%',
top: '17%',
z: 22
},
xAxis: [
{
- //宸︿晶鏌辩姸鍥剧殑x杞�
+ //宸︿晶鏌辩姸鍥剧殑x杞� 涓媂杞�
type: 'category',
gridIndex: 0,//y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
// boundaryGap: false,
@@ -76,11 +117,11 @@
fontSize: '12'
}
},
- data: ['浣庡憡璀︽暟閲�', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鏁版瘮渚�', '鍛婅鎬绘暟','鍛婅鎬绘暟姣斾緥'],
+ data: xAxisData//['浣庡憡璀︽暟閲�', '鍛婅鏈烘埧鎬绘暟', '鍛婅鏈烘埧鏁版瘮渚�', '鍛婅鎬绘暟','鍛婅鎬绘暟姣斾緥'],
// inverse: true, //鍙嶈浆
},
{
- // 宸︿晶鏌辩姸鍥剧殑Y杞�
+ // 宸︿晶鏌辩姸鍥剧殑Y杞� 涓奨杞�
gridIndex: 0,//y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
splitLine: 'none',
axisTick: 'none',
@@ -99,11 +140,17 @@
return colorList[index];
},
},
- data: [555,444,333,222,666],
+ data: xData//[555,444,333,222,666],
},
],
- yAxis: {
- //鍧愭爣杞�
+ yAxis: [
+ {
+ //鍧愭爣杞� 宸杞�
+ type: 'value',
+ // name: '鏁板��',
+ min: 0,
+ max: maxYAxis[0],
+ // interval: 300,
axisLine: {
show: false,
// y鍧愭爣绾挎牱寮�
@@ -132,15 +179,31 @@
}
}
},
-
-
+ {//鍙砓杞�
+ 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: [555,0,0,0,0],
+ data: [data[0],0,0,0,0],
barWidth: 15,
itemStyle: {
normal: {
@@ -160,7 +223,7 @@
type: 'bar',
xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
yAxisIndex: 0,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,444,0,0,0],
+ data: [0,data[1],0,0,0],
barWidth: 15,
itemStyle: {
normal: {
@@ -179,8 +242,8 @@
name: '鍛婅鏈烘埧鏁版瘮渚�',
type: 'bar',
xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex: 0,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,0,333,0,0],
+ yAxisIndex: 1,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ data: [0,0,data[2],0,0],
barWidth: 15,
itemStyle: {
normal: {
@@ -198,9 +261,9 @@
{
name: '鍛婅鎬绘暟',
type: 'bar',
- xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ // xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
yAxisIndex: 0,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,0,0,222,0],
+ data: [0,0,0,data[3],0],
barWidth: 15,
itemStyle: {
normal: {
@@ -218,9 +281,9 @@
{
name: '鍛婅鎬绘暟姣斾緥',
type: 'bar',
- xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
- yAxisIndex: 0,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
- data: [0,0,0,0,666],
+ // xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
+ yAxisIndex: 1,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
+ data: [0,0,0,0,data[4]],
barWidth: 15,
itemStyle: {
normal: {
@@ -241,7 +304,7 @@
xAxisIndex: 0,//浣跨敤鐨� x 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� x 杞寸殑鏃跺�欐湁鐢ㄣ��
yAxisIndex: 0,//浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢ㄣ��
barGap: '-1',
- data: [1800,1800, 1800,1800,1800],
+ data: maxYAxis,//[1800,1800, 1800,1800,1800],
barWidth: 15,
itemStyle: {
normal: {
@@ -256,6 +319,7 @@
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) => ({
@@ -264,7 +328,7 @@
}))),
z: 12,
data: [{
- value: 555,
+ value: data[0],
symbolPosition: 'end'
},{
value: 0,
@@ -279,9 +343,11 @@
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, [
@@ -295,7 +361,7 @@
value: 0,
symbolPosition: 'end'
},{
- value: 444,
+ value: data[1],
symbolPosition: 'end'
},{
value: 0,
@@ -307,8 +373,10 @@
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],
@@ -326,7 +394,7 @@
value: 0,
symbolPosition: 'end'
},{
- value: 333,
+ value: data[2],
symbolPosition: 'end'
},{
value: 0,
@@ -335,11 +403,13 @@
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) => ({
@@ -357,15 +427,17 @@
value: 0,
symbolPosition: 'end'
},{
- value: 222,
+ 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, [
@@ -388,7 +460,7 @@
value: 0,
symbolPosition: 'end'
},{
- value: 666,
+ value: data[4],
symbolPosition: 'end'
}]
},
@@ -400,7 +472,7 @@
let self = this;
setTimeout(function(){
self.$options.discharge.resize();
- self.setData(null);
+ self.setData(self.$options.chartData);
})
}
},
--
Gitblit v1.9.1