微调代码，BUG修改

src/components/chart/radar/normal-radar-chart.vue

@@ -24,7 +24,7 @@ export default {
     // 标题
     title: {
       type: Array,
-      default: ["标题","标题"],
+      default: () => ["标题", "标题"],
     },
     // 值
     value: {
@@ -66,26 +66,25 @@ export default {
             borderWidth: 0.5,
           },
         },
-		{
-		  areaStyle: {
-		    color: "rgba(165,228,175, 0.9)",
-		  },
-		  lineStyle: {
-		    color: "rgba(255,255,255, 0.85)",
-		  },
-		  itemStyle: {
-		    color: "rgba(165,228,175, 0.5)",
-		    borderColor: "rgba(255,255,255, 0.5)",
-		    borderWidth: 0.5,
-		  },
-		},
+        {
+          areaStyle: {
+            color: "rgba(165,228,175, 0.9)",
+          },
+          lineStyle: {
+            color: "rgba(255,255,255, 0.85)",
+          },
+          itemStyle: {
+            color: "rgba(165,228,175, 0.5)",
+            borderColor: "rgba(255,255,255, 0.5)",
+            borderWidth: 0.5,
+          },
+        },
       ],
     };
   },
-  computed: {
-    series() {
+  methods: {
+    renderValue() {
       let result = [];
-	  console.log(this.title)
       this.value.forEach((value, index) => {
         result.push({
           name: this.title[index],
@@ -93,11 +92,8 @@ export default {
           data: value.data,
         });
       });
-
       return result;
     },
-  },
-  methods: {
     initChart() {
       let chart = echarts.init(this.$el);
 
@@ -110,9 +106,12 @@ export default {
               maxValue = value;
             }
           });
-          item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
-          item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
-          item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
+          item.areaStyle =
+            this.lineStyles[index % this.lineStyles.length].areaStyle;
+          item.lineStyle =
+            this.lineStyles[index % this.lineStyles.length].lineStyle;
+          item.itemStyle =
+            this.lineStyles[index % this.lineStyles.length].itemStyle;
         });
       maxValue *= 1.5;
 
@@ -354,7 +353,7 @@ export default {
             indicator: indicator,
           },
         ],
-        series: this.series,
+        series: this.renderValue(),
       };
 
       chart.setOption(option);

src/views/Decision/Decision2Cndb.vue

@@ -111,7 +111,7 @@
     >
       <dayinfo
         :radarValue="radarValue"
-		:title="[windNum,windNum2]"
+        :title="[windNum, windNum2]"
         :windNum="windNum"
         :windNum2="windNum2"
         :tabs="tabs"

src/views/Decision/dayinfo.vue

@@ -1,221 +1,271 @@
 <template>
-	<div class="health-day-info">
-		<div class="body">
-			<div class="left">
-				<div class="header">
-					<span class="herder-info">
-						对标排名分析
-					</span>
-				</div>
-				<div class="chart-body">
-					<normal-radar-chart :height="'500px'" :value="radarValue" />
-				</div>
-			</div>
-			<div class="left">
-				<div class="header">
-					<span class="herder-info">
-						基础指标
-					</span>
-				</div>
-				<table class="table-form">
-					<tr>
-						<td class="white">指标</td>
-						<td class="white">{{windNum}}</td>
-						<td class="white">{{windNum2}}</td>
-					</tr>
-					<tr v-for="item in tabs">
-						<td class="white">{{item.name}}</td>
-						<td class="white">{{item.windData1}}</td>
-						<td class="white">{{item.windData2}}</td>
-					</tr>
-				</table>
-			</div>
-
-		</div>
-		<div class="body">
-			<div style="width: 100%;">
-				<div class="header">
-					<span class="herder-info">
-						损失电量分析
-					</span>
-				</div>
-				<div class="chart-body">
-					<multiple-bar-chart height="240px" :list="analyisDialog" :customerTooltip="true" @tooltip="tooltip"
-						:units='["(万KWh)"]' />
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="health-day-info">
+    <div class="body">
+      <div class="left">
+        <div class="header">
+          <span class="herder-info"> 对标排名分析 </span>
+        </div>
+        <div class="chart-body">
+          <normal-radar-chart
+            :title="['这是title1', '这是title2']"
+            :height="'500px'"
+            :value="chartData"
+          />
+        </div>
+      </div>
+      <div class="left">
+        <div class="header">
+          <span class="herder-info"> 基础指标 </span>
+        </div>
+        <table class="table-form">
+          <tr>
+            <td class="white">指标</td>
+            <td class="white">{{ windNum }}</td>
+            <td class="white">{{ windNum2 }}</td>
+          </tr>
+          <tr v-for="(item,index) in tabs" :key="index">
+            <td class="white">{{ item.name }}</td>
+            <td class="white">{{ item.windData1 }}</td>
+            <td class="white">{{ item.windData2 }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="body">
+      <div style="width: 100%">
+        <div class="header">
+          <span class="herder-info"> 损失电量分析 </span>
+        </div>
+        <div class="chart-body">
+          <multiple-bar-chart
+            height="240px"
+            :list="analyisDialog"
+            :customerTooltip="true"
+            @tooltip="tooltip"
+            :units="['(万KWh)']"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
-	import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
-	export default {
-		components: {
-			NormalRadarChart,
-			MultipleBarChart
-		},
-		props: {
-			windNum: {
-				type: String,
-				default: '麻黄山24号风机',
-			},
-			windNum2: {
-				type: String,
-				default: '麻黄山2号风机',
-			},
-			radarValue: {
-				type: Array,
-				default: () => [{
-					indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率", "复位及时率", "消缺及时率", "状态转换率"],
-					data: [{
-						value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000]
-					}],
-				}],
-			},
-			tabs: {
-				type: Array,
-				default: () => [{
-					name: "发电量",
-					windData1: 1,
-					windData2: 14
-				}, {
-					name: "故障损失电量",
-					windData1: 2,
-					windData2: 13
-				}, {
-					name: "检修损失电量",
-					windData1: 3,
-					windData2: 12
-				}, {
-					name: "性能未达标损失电量",
-					windData1: 4,
-					windData2: 11
-				}, {
-					name: "受累损失电量",
-					windData1: 5,
-					windData2: 10
-				}, {
-					name: "风能利用率",
-					windData1: 6,
-					windData2: 9
-				}, {
-					name: "故障损失率",
-					windData1: 7,
-					windData2: 8
-				}, {
-					name: "检修损失率",
-					windData1: 8,
-					windData2: 7
-				}, {
-					name: "弃风率",
-					windData1: 9,
-					windData2: 6
-				}, {
-					name: "性能损失率",
-					windData1: 10,
-					windData2: 5
-				}, {
-					name: "受累损失率",
-					windData1: 11,
-					windData2: 4
-				}, {
-					name: "复位及时率",
-					windData1: 12,
-					windData2: 3
-				}, {
-					name: "消缺及时率",
-					windData1: 13,
-					windData2: 2
-				}, {
-					name: "状态转换率",
-					windData1: 14,
-					windData2: 1
-				}],
-			},
-			analyisDialog: {
-				type: Array,
-				default: () => [{
-					title: "故障损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "检修损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "性能损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "限电损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}, {
-					title: "受累损失电量",
-					yAxisIndex: 0,
-					value: [11, 22]
-				}]
-			},
-		},
-		methods: {
-			tooltip(param, callback) {
-				var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
+import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
+import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+export default {
+  components: {
+    NormalRadarChart,
+    MultipleBarChart,
+  },
+  props: {
+    windNum: {
+      type: String,
+      default: "麻黄山24号风机",
+    },
+    windNum2: {
+      type: String,
+      default: "麻黄山2号风机",
+    },
+    radarValue: {
+      type: Array,
+      default: () => [
+        {
+          indicator: [
+            "风能利用率",
+            "故障损失率",
+            "检修损失率",
+            "弃风率",
+            "性能损失率",
+            "受累损失率",
+            "复位及时率",
+            "消缺及时率",
+            "状态转换率",
+          ],
+          data: [
+            {
+              value: [
+                44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    tabs: {
+      type: Array,
+      default: () => [
+        {
+          name: "发电量",
+          windData1: 1,
+          windData2: 14,
+        },
+        {
+          name: "故障损失电量",
+          windData1: 2,
+          windData2: 13,
+        },
+        {
+          name: "检修损失电量",
+          windData1: 3,
+          windData2: 12,
+        },
+        {
+          name: "性能未达标损失电量",
+          windData1: 4,
+          windData2: 11,
+        },
+        {
+          name: "受累损失电量",
+          windData1: 5,
+          windData2: 10,
+        },
+        {
+          name: "风能利用率",
+          windData1: 6,
+          windData2: 9,
+        },
+        {
+          name: "故障损失率",
+          windData1: 7,
+          windData2: 8,
+        },
+        {
+          name: "检修损失率",
+          windData1: 8,
+          windData2: 7,
+        },
+        {
+          name: "弃风率",
+          windData1: 9,
+          windData2: 6,
+        },
+        {
+          name: "性能损失率",
+          windData1: 10,
+          windData2: 5,
+        },
+        {
+          name: "受累损失率",
+          windData1: 11,
+          windData2: 4,
+        },
+        {
+          name: "复位及时率",
+          windData1: 12,
+          windData2: 3,
+        },
+        {
+          name: "消缺及时率",
+          windData1: 13,
+          windData2: 2,
+        },
+        {
+          name: "状态转换率",
+          windData1: 14,
+          windData2: 1,
+        },
+      ],
+    },
+    analyisDialog: {
+      type: Array,
+      default: () => [
+        {
+          title: "故障损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "检修损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "性能损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "限电损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+        {
+          title: "受累损失电量",
+          yAxisIndex: 0,
+          value: [11, 22],
+        },
+      ],
+    },
+  },
+  methods: {
+    tooltip(param, callback) {
+      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
 
-				var result = param[0].axisValue;
-				param.forEach((value, index) => {
-					result += "<br />" +
-						`<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
-						value.seriesName + "：" + value.value;
-				});
-				callback(result);
-				return true;
-			},
-		}
-	};
+      var result = param[0].axisValue;
+      param.forEach((value, index) => {
+        result +=
+          "<br />" +
+          `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
+          value.seriesName +
+          "：" +
+          value.value;
+      });
+      callback(result);
+      return true;
+    },
+  },
+  mounted() {
+    this.chartData = this.radarValue;
+  },
+  watch: {
+    radarValue(res) {
+      this.chartData = res;
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.health-day-info {
-		.header {
-			display: flex;
-			width: 100%;
-			height: 40px;
-			line-height: 40px;
-			background: fade(@gray, 60);
-			color: @white;
+.health-day-info {
+  .header {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background: fade(@gray, 60);
+    color: @white;
 
-			.herder-info {
-				flex: 1 0 25%;
-				text-align: center;
-				font-size: @fontsize-s;
+    .herder-info {
+      flex: 1 0 25%;
+      text-align: center;
+      font-size: @fontsize-s;
 
-				&:last-child {
-					flex: 1 0 50%;
-				}
-			}
-		}
+      &:last-child {
+        flex: 1 0 50%;
+      }
+    }
+  }
 
-		.body {
-			display: flex;
+  .body {
+    display: flex;
 
-			.left {
-				flex: 0 0 50%;
+    .left {
+      flex: 0 0 50%;
 
-				display: flex;
-				flex-direction: column;
+      display: flex;
+      flex-direction: column;
 
-				.chart-body {
-					flex-grow: 1;
-					display: flex;
-					align-items: center;
-				}
-			}
+      .chart-body {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
 
-			.right {
-				flex: 0 0 50%;
-			}
-		}
-	}
+    .right {
+      flex: 0 0 50%;
+    }
+  }
+}
 </style>