Browse Source

温度图的修改

zhulizhen 5 years ago
parent
commit
dc24d3c13c
1 changed files with 180 additions and 268 deletions
  1. 180 268
      src/views/evaluate/evIndoorTemperature.vue

+ 180 - 268
src/views/evaluate/evIndoorTemperature.vue

@@ -1,5 +1,14 @@
 <template>
-  <div id="pCharts2"></div>
+  <div class="p-echarts">
+    <div class="pLegend">
+      <i class="icon1"></i>按照策略执行
+      <i class="icon2"></i>未按照策略执行
+      <i class="icon3"></i>未按照策略执行,申诉通过
+      <i class="icon4"></i>室内温度满足率
+      <i class="icon5"></i>节能率
+    </div>
+    <div id="pCharts2" style="width: 100%;height: 100%;"></div>
+  </div>
 </template>
 
 <script>
@@ -15,232 +24,8 @@ export default {
   methods: {
     drawIt() {
       let myCharts = echarts.init(document.getElementById("pCharts2"));
-      var colors = ["#5793f3", "#d14a61", "#675bba"];
+      var colors = ["#34C724", "#8D9399", "#F54E45",'#00D6B9','#0091FF'];
       var option = {
-        // title: {
-        //   text: "",
-        //   x: "center",
-        //   y: "top"
-        // },
-        // legend: {
-        //   data: ["室内温度满足率", "节能率", "策略执行"],
-        //   y: "26"
-        // },
-        // tooltip: {
-        //   trigger: "axis",
-        //   textStyle: {
-        //     align: "left"
-        //   }
-        // },
-        // grid: {
-        //   top: "22%",
-        //   left: "1%",
-        //   right: "1%",
-        //   bottom: "10%",
-        //   containLabel: true
-        // },
-        // xAxis: {
-        //   type: "category",
-        //   data: [
-        //     `${this.date}.1`,
-        //     `${this.date}.2`,
-        //     `${this.date}.3`,
-        //     `${this.date}.4`,
-        //     `${this.date}.5`,
-        //     `${this.date}.6`,
-        //     `${this.date}.7`,
-        //     `${this.date}.8`,
-        //     `${this.date}.9`,
-        //     `${this.date}.10`,
-        //     `${this.date}.11`,
-        //     `${this.date}.12`,
-        //     `${this.date}.13`,
-        //     `${this.date}.14`,
-        //     `${this.date}.15`,
-        //     `${this.date}.16`,
-        //     `${this.date}.17`,
-        //     `${this.date}.18`,
-        //     `${this.date}.19`,
-        //     `${this.date}.20`,
-        //     `${this.date}.21`,
-        //     `${this.date}.22`,
-        //     `${this.date}.23`,
-        //     `${this.date}.24`,
-        //     `${this.date}.25`,
-        //     `${this.date}.26`,
-        //     `${this.date}.27`,
-        //     `${this.date}.28`,
-        //     `${this.date}.29`,
-        //     `${this.date}.30`,
-        //     `${this.date}.31`
-        //   ]
-        // },
-        // yAxis: [
-        //   {
-        //     name: "室内温度满足率",
-        //     type: "value",
-        //     max: 100,
-        //     splitLine: {
-        //       show: false
-        //     }
-        //   },
-        //   {
-        //     name: "节能率",
-        //     nameLocation: "start",
-        //     max: 50,
-        //     type: "value",
-        //     splitLine: {
-        //       show: false
-        //     }
-        //   }
-        // ],
-        // series: [
-        //   {
-        //     name: "室内温度满足率",
-        //     type: "line",
-        //     data: [
-        //       80,
-        //       85,
-        //       90,
-        //       85,
-        //       80,
-        //       85,
-        //       90,
-        //       85,
-        //       80,
-        //       85,
-        //       90,
-        //       85,
-        //       80,
-        //       85,
-        //       90,
-        //       85,
-        //       80,
-        //       85,
-        //       90,
-        //       85,
-        //       80,
-        //       85,
-        //       90,
-        //       85,
-        //       80,
-        //       85,
-        //       90,
-        //       85,
-        //       80,
-        //       85,
-        //       90
-        //     ],
-        //     itemStyle: {
-        //       normal: {
-        //         label: {
-        //           show: true,
-        //           position: "top",
-        //           textStyle: {
-        //             color: "#B42E29"
-        //           }
-        //         }
-        //       }
-        //     }
-        //   },
-        //   {
-        //     name: "节能率",
-        //     type: "line",
-        //     data: [
-        //       50,
-        //       77,
-        //       88,
-        //       76,
-        //       50,
-        //       77,
-        //       88,
-        //       76,
-        //       50,
-        //       77,
-        //       88,
-        //       76,
-        //       50,
-        //       77,
-        //       88,
-        //       76,
-        //       50,
-        //       77,
-        //       88,
-        //       76,
-        //       50,
-        //       77,
-        //       88,
-        //       76,
-        //       50,
-        //       77,
-        //       88,
-        //       76,
-        //       50,
-        //       77,
-        //       88
-        //     ],
-        //     itemStyle: {
-        //       normal: {
-        //         label: {
-        //           show: true,
-        //           position: "bottom",
-        //           textStyle: {
-        //             color: "#2D3E4C"
-        //           }
-        //         }
-        //       }
-        //     }
-        //   },
-        //   {
-        //     name: "策略执行",
-        //     type: "line",
-        //     yAxisIndex: 1,
-        //     data: [
-        //       5,
-        //       3,
-        //       3,
-        //       2,
-        //       5,
-        //       3,
-        //       3,
-        //       2,
-        //       5,
-        //       3,
-        //       3,
-        //       2,
-        //       5,
-        //       3,
-        //       3,
-        //       2,
-        //       5,
-        //       3,
-        //       3,
-        //       2,
-        //       5,
-        //       3,
-        //       3,
-        //       2,
-        //       5,
-        //       3,
-        //       3,
-        //       2,
-        //       5,
-        //       3,
-        //       3
-        //     ],
-        //     itemStyle: {
-        //       normal: {
-        //         label: {
-        //           show: true,
-        //           position: "top",
-        //           textStyle: {
-        //           color: "#5F97A0"
-        //         }
-        //       }
-        //     }
-        //   }
-        // }
-        // ]
         color: colors,
         tooltip: {
           trigger: "axis",
@@ -251,40 +36,69 @@ export default {
         grid: {
           right: "20%"
         },
-        toolbox: {
-          feature: {
-            // dataView: { show: true, readOnly: false },
-            // restore: { show: true },
-            // saveAsImage: { show: true }
-          }
-        },
-
         xAxis: [
           {
             type: "category",
             axisTick: {
               alignWithLabel: true
             },
+            splitLine:{
+            show:false
+          },
+            axisLine:{
+              lineStyle:{
+                  color:'#8D9399',
+              }
+            },
+            axisLabel: {
+                interval:0,//代表显示所有x轴标签显示
+            },
             data: [
-              "1月",
-              "2月",
-              "3月",
-              "4月",
-              "5月",
-              "6月",
-              "7月",
-              "8月",
-              "9月",
-              "10月",
-              "11月",
-              "12月"
+              "11.01",
+              "11.02",
+              "11.03",
+              "11.04",
+              "11.05",
+              "11.06",
+              "11.07",
+              "11.08",
+              "11.09",
+              "11.10",
+              "11.12",
+              "11.13",
+              "11.14",
+              '11.15',
+              '11.16',
+              '11.17',
+              '11.18',
+              '11.19',
+              '11.20',
+              '11.21',
+              '11.22',
+              '11.23',
+              '11.24',
+              '11.25',
+              '11.26',
+              '11.27',
+              '11.28',
+              '11.29',
+              '11.30',
+              '11.31'
             ]
           }
         ],
         yAxis: [
           {
             type: "value",
-            name: "蒸发量",
+            name: "节能率",
+            axisLine:{
+              lineStyle:{
+                  color:'#8D9399',
+              }
+            },
+            splitLine:{
+            show:false
+          },
             min: 0,
             max: 25,
             position: "right",
@@ -294,17 +108,15 @@ export default {
           },
           {
             type: "value",
+            show:false,
             name: "",
             min: 0,
-            max: 25,
+            max: 1,
             position: "right",
             offset: 80,
             axisLine: {
               show: false
             },
-            axisTick: {
-              show: false
-            },
             axisLabel: {
               formatter: function() {
                 return "";
@@ -313,15 +125,19 @@ export default {
           },
           {
             type: "value",
-            name: "温度",
+            name: "室内温度满足率",
+            axisLine:{
+              lineStyle:{
+                  color:'#8D9399',
+              }
+            },
+            splitLine:{
+            show:false
+          },
             min: 0,
             max: 25,
             position: "left",
-            axisLine: {
-              lineStyle: {
-                color: colors[2]
-              }
-            },
+           
             axisLabel: {
               formatter: "{value} °C"
             }
@@ -329,22 +145,25 @@ export default {
         ],
         series: [
           {
-            name: "蒸发量",
+            name: "按照策略执行",
             type: "bar",
-            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+            barWidth : 30,
+            data: [1, null, null, 1, null, null, 1, null, null, 1, null, null,1, null, null, 1, null, null, 1, null, null, 1, null, null,1, null, null,1, null, null,null]
           },
           {
-            name: "降水量",
+            name: "未按照策略执行",
             type: "bar",
-            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+            barWidth : 30,
+            data: [null,1, 1, null,1, null, null,1, null, null,1, null,null,1, null,null,1, null,null,1, null,null,1, null,null,1, null,null,1, null,null]
           },
           {
-            name: "降雨量",
+            name: "未按照策略执行,申诉通过",
             type: "bar",
-            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+            barWidth : 30,
+            data: [null, null, null, null, null, 1, null, null, 1, null, null, 1,null, null, 1,null, null, 1,null, null, 1,null, null, 1,null, null, 1,null, null, 1,1]
           },
           {
-            name: "平均温度",
+            name: "室内温度满足率",
             type: "line",
             yAxisIndex: 2,
             data: [
@@ -359,11 +178,30 @@ export default {
               23.0,
               16.5,
               12.0,
-              6.2
+              6.2,
+              2.0,
+              2.2,
+              3.3,
+              4.5,
+              6.3,
+              10.2,
+              20.3,
+              23.4,
+              23.0,
+              16.5,
+              12.0,
+              6.2,
+              2.0,
+              2.2,
+              3.3,
+              4.5,
+              6.3,
+              10.2,
+              20.3
             ]
           },
           {
-            name: "平均co2",
+            name: "节能率",
             type: "line",
             yAxisIndex: 2,
             data: [
@@ -378,7 +216,26 @@ export default {
               16.5,
               12.0,
               6.2,
-              14.0
+              14.0,
+              2.2,
+              3.0,
+              4.5,
+              6.3,
+              10.2,
+              20.3,
+              23.4,
+              23.0,
+              16.5,
+              12.0,
+              6.2,
+              14.0,
+              2.2,
+              3.0,
+              4.5,
+              6.3,
+              10.2,
+              20.3,
+              23.4
             ]
           }
         ]
@@ -411,8 +268,63 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-#pCharts2 {
+.p-echarts{
+  width: 100%;
+  height: 100%;
+  #pCharts2 {
   width: 100%;
   height: 100%;
 }
+.pLegend{
+  font-size: 12px;
+  color: #000000;
+  text-align:center;
+  .icon1{
+    display: inline-block;
+    width:12px;
+    height:12px;
+    background:rgba(52,199,36,1);
+    vertical-align: middle;
+    margin-right: 3px;
+  }
+  .icon2{
+    display: inline-block;
+    width:12px;
+    height:12px;
+    background:#F54E45;
+    vertical-align: middle;
+    margin-right: 3px;
+    margin-left: 20px;
+  }
+  .icon3{
+    display: inline-block;
+    width:12px;
+    height:12px;
+    background:#8D9399;
+    vertical-align: middle;
+    margin-right: 3px;
+    margin-left: 20px;
+  }
+  .icon4{
+    display: inline-block;
+    height:6px;
+    width: 16px;
+    background:rgba(0,145,255,1);
+    border-radius:3px;
+    vertical-align: middle;
+    margin-right: 3px;
+    margin-left: 20px;
+  }
+  .icon5{
+    display: inline-block;
+    height:6px;
+    width: 16px;
+    background:#00D6B9;
+    border-radius:3px;
+    vertical-align: middle;
+    margin-right: 3px;
+    margin-left: 20px;
+  }
+}
+}
 </style>