fix(图表)： 图表完成

pages/monthReport/components/rightBar.vue

 <template>
-  <view class="echartsBar" id="echartsBar"></view>
+  <view>
+    <view class="echartsBar" id="echartsBar"></view>
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<script module="echarts" lang="renderjs">
 import * as echarts from "echarts";
 export default {
   props: {},
@@ -90,7 +99,7 @@ export default {
 
 <style lang="scss" scoped>
 .echartsBar {
-  height: 100%;
+  height: 200px;
   width: 100%;
 }
 </style>

pages/monthReport/components/rightLine.vue

 <template>
-  <view class="echartsBar" id="echartsLine"></view>
+  <view>
+    <view canvas-id="myChart" id="myChart" class="echartsBar"></view>
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {
+     
+    };
+  },
+};
+</script>
+
+<script module="echarts" lang="renderjs">
 import * as echarts from "echarts";
 export default {
-  props: {},
   data() {
     return {
       lists: [
@@ -103,29 +114,34 @@ export default {
       };
     },
   },
-  async mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
+  mounted() {
+    // 初始化图表
+    this.initChart();
+
   },
   methods: {
-    init() {
-      const DOM = document.getElementById("echartsLine");
-      const myChart = echarts.init(DOM);
-      myChart.setOption(this.option);
-      window.addEventListener("resize", () => {
-        myChart.clear();
-        myChart.setOption(this.option);
-        myChart && myChart.resize();
-      });
-    },
-  },
-};
+    initChart() {
+      // 确保ECharts已经加载
+      if (typeof echarts === 'undefined') {
+        // 可以在这里动态加载ECharts库
+        return;
+      }
+
+      // 基于准备好的dom，初始化echarts实例
+      const chart = echarts.init(document.getElementById('myChart'));
+
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      chart.setOption(this.option);
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .echartsBar {
-  height: 100%;
+  height: 200px;
   width: 100%;
 }
 </style>

pages/monthReport/components/rightPie.vue

 <template>
-  <view id="lineTendencyChart"></view>
+  <view>
+    <view id="lineTendencyChart"></view>
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {};
+  },
+  async mounted() {
+  }
+};
+</script>
+
+<script module="echarts" lang="renderjs">
 import * as echarts from "echarts";
 export default {
   props: {

pages/monthReport/index.vue

 <template>
   <view class="padding_all_16 page_box">
-  <!-- 态势分析研判报告 -->
-  <view class="margin_t_16 padding_16_24 background_white">
+    <!-- 态势分析研判报告 -->
+    <view class="margin_t_16 padding_16_24 background_white">
       <common-top-title
         titletext="态势分析研判报告"
         :isTitleNormal="false"
       ></common-top-title>
       <view class="rightOne">
-        <rightPie class="margin_t_16 rightPie" :value="80" />
+        <rightPie class="margin_t_16 rightPie" :value="70" />
         <rightItem class="rightItem" />
       </view>
     </view>
 
-
     <!-- 本月场景告警图 -->
     <view class="margin_t_16 padding_16_24 background_white rightHeight">
       <common-top-title
@@ -37,15 +36,13 @@
       />
     </view>
 
-
-
     <view class="monthReport">
       <view class="margin_t_16 padding_16_24 background_white">
         <common-top-title
           titletext="本月资产监管数据"
           :isTitleNormal="false"
         ></common-top-title>
-        <view :gutter="8" class="margin_t_16 flex-row ">
+        <view :gutter="8" class="margin_t_16 flex-row">
           <view :span="18" class="first-part el-col-18">
             <common-top-title
               titletext="终端"
@@ -79,13 +76,13 @@
             </view>
           </view>
         </view>
-        <view :gutter="8" class="margin_t_16 flex-row ">
+        <view :gutter="8" class="margin_t_16 flex-row">
           <view :span="12" class="el-col-12">
             <common-top-title
               titletext="机房"
               :isTitleNormal="true"
             ></common-top-title>
-            <view :gutter="8" class="margin_t_16 flex-row ">
+            <view :gutter="8" class="margin_t_16 flex-row">
               <view
                 v-for="item in computerData"
                 :key="item.label"
@@ -110,13 +107,12 @@
               titletext="数据中心"
               :isTitleNormal="true"
             ></common-top-title>
-            <view :gutter="8" class="margin_t_16  flex-row ">
+            <view :gutter="8" class="margin_t_16 flex-row">
               <view
                 v-for="item in dataCenter"
                 :key="item.label"
                 :span="item.span"
                 class="flex-average flex-row-gutter-8"
-
               >
                 <view v-if="item.type == 'tem4'" class="baseFlex">
                   <template v-for="child in item.children">
@@ -132,15 +128,25 @@
             </view>
           </view>
         </view>
-        <view  class="margin_t_16">
+        <view class="margin_t_16">
           <view>
             <common-top-title
               titletext="网络"
               :isTitleNormal="true"
             ></common-top-title>
             <view :gutter="8" class="margin_t_16 flex-row">
-              <view v-for="item in netData" :key="item.label" :class="`el-col-${item.span} ${item.type == 'tem3'? 'flex-row-gutter-8': ''}`">
-                <view :gutter="8" v-if="item.type == 'tem2'" class="baseFlex flex-row ">
+              <view
+                v-for="item in netData"
+                :key="item.label"
+                :class="`el-col-${item.span} ${
+                  item.type == 'tem3' ? 'flex-row-gutter-8' : ''
+                }`"
+              >
+                <view
+                  :gutter="8"
+                  v-if="item.type == 'tem2'"
+                  class="baseFlex flex-row"
+                >
                   <view
                     v-for="child in item.children"
                     :key="child.label"
@@ -151,7 +157,6 @@
                 </view>
                 <tem3
                   v-else-if="item.type == 'tem3'"
-            
                   :item="item"
                   style="height: 76px"
                 />
@@ -165,14 +170,12 @@
               titletext="用户"
               :isTitleNormal="true"
             ></common-top-title>
-            <view :gutter="8" class="margin_t_16  flex-row">
+            <view :gutter="8" class="margin_t_16 flex-row">
               <view
                 v-for="item in userData"
                 :key="item.label"
                 :span="item.span"
                 class="el-col-6 flex-row-gutter-8"
-                
-                
               >
                 <tem3 :item="item" style="height: 76px" />
               </view>
@@ -192,7 +195,11 @@
               :isTitleNormal="true"
             ></common-top-title>
             <view :gutter="8" class="margin_t_16 flex-row">
-              <view v-for="item in ywData" :key="item.label" class="el-col-8 flex-row-gutter-8">
+              <view
+                v-for="item in ywData"
+                :key="item.label"
+                class="el-col-8 flex-row-gutter-8"
+              >
                 <tem3 :item="item" style="height: 78px" />
               </view>
             </view>
@@ -203,7 +210,11 @@
               :isTitleNormal="true"
             ></common-top-title>
             <view :gutter="8" class="margin_t_16 flex-row">
-              <view v-for="item in fbData" :key="item.label" class="el-col-8 flex-row-gutter-8">
+              <view
+                v-for="item in fbData"
+                :key="item.label"
+                class="el-col-8 flex-row-gutter-8"
+              >
                 <tem3 :item="item" style="height: 78px" />
               </view>
             </view>
@@ -211,9 +222,6 @@
         </view>
       </view>
     </view>
-
-  
-
   </view>
 </template>
 
@@ -270,7 +278,6 @@ export default {
 <style lang="scss">
 .page_box {
   background: #f2f2f2;
-  .monthReport {
     .rightOne {
       display: flex;
       justify-content: space-between;
@@ -282,12 +289,14 @@ export default {
       .rightItem {
         width: calc(100% - 230px - 16px);
         height: auto;
+
       }
     }
     .rightHeight {
       height: calc((100% - 300px - 32px) / 2);
     }
-  }
+
+
   .baseFlex {
     display: flex;
     flex-wrap: wrap;
@@ -321,16 +330,14 @@ export default {
     width: 75%;
   }
 
-
   .el-col-12 {
     width: 50%;
   }
   .el-col-8 {
     width: 33.33333%;
-}
-.el-col-6 {
+  }
+  .el-col-6 {
     width: 25%;
-}
-  
+  }
 }
 </style>