修改echarts不显示问题

zhsq_qk-ui/src/views/fusion/aqyj.vue

@@ -40,7 +40,7 @@
           </div>
 
         </div>
-     
+
 
       </div>
       <!-- 设备tab结束-->
@@ -58,71 +58,71 @@
         <div class="qkq_tdzy">
           <div class="qkq_tit ">今日安全承诺</div>
           <div class="qkq_aqcn">
-			  <div id="qkq_aqcn_chart"></div>
-			  <div class="qkq_aqcn_txt">
-				  <p>应承诺数<span>162家</span></p>
-				  <p>已承诺数<span>162家</span></p>
-				  <p>未承诺数<span>0家</span></p>
-			  </div>
-		  </div>
-		<div class="qkq_aqcn_col">
-			<p>
-				<span>高风险</span>
-				<b>0</b>
-			</p>
-			<p>
-				<span>较大风险</span>
-				<b>1</b>
-			</p>
-			<p>
-				<span>一般风险</span>
-				<b>31</b>
-			</p>
-			<p>
-				<span>低风险</span>
-				<b>129</b>
-			</p>
-		</div>
+            <div id="qkq_aqcn_chart"></div>
+            <div class="qkq_aqcn_txt">
+              <p>应承诺数<span>162家</span></p>
+              <p>已承诺数<span>162家</span></p>
+              <p>未承诺数<span>0家</span></p>
+            </div>
+          </div>
+          <div class="qkq_aqcn_col">
+            <p>
+              <span>高风险</span>
+              <b>0</b>
+            </p>
+            <p>
+              <span>较大风险</span>
+              <b>1</b>
+            </p>
+            <p>
+              <span>一般风险</span>
+              <b>31</b>
+            </p>
+            <p>
+              <span>低风险</span>
+              <b>129</b>
+            </p>
+          </div>
         </div>
         <div class="qkq_tdzy">
           <div class="qkq_tit">监测预警</div>
           <ul class="qkq_csnl scrollbar">
-			  <li>
-				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
-				  <p>预警事件：内涝点积水</p>
-				  <p>预警时间：2024年8月2日09:51:53</p>
-			  </li>
-			  <li>
-			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
-			  				  <p>预警事件：内涝点积水</p>
-			  				  <p>预警时间：2024年8月2日09:51:53</p>
-			  </li>
-			  <li>
-			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
-			  				  <p>预警事件：内涝点积水</p>
-			  				  <p>预警时间：2024年8月2日09:51:53</p>
-			  </li>
-			  <li>
-			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
-			  				  <p>预警事件：内涝点积水</p>
-			  				  <p>预警时间：2024年8月2日09:51:53</p>
-			  </li>
-			  <li>
-			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
-			  				  <p>预警事件：内涝点积水</p>
-			  				  <p>预警时间：2024年8月2日09:51:53</p>
-			  </li>
-			  <li>
-			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
-			  				  <p>预警事件：内涝点积水</p>
-			  				  <p>预警时间：2024年8月2日09:51:53</p>
-			  </li>
-			  <li>
-			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
-			  				  <p>预警事件：内涝点积水</p>
-			  				  <p>预警时间：2024年8月2日09:51:53</p>
-			  </li>
-		  </ul>
+            <li>
+              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+              <p>预警事件：内涝点积水</p>
+              <p>预警时间：2024年8月2日09:51:53</p>
+            </li>
+            <li>
+              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+              <p>预警事件：内涝点积水</p>
+              <p>预警时间：2024年8月2日09:51:53</p>
+            </li>
+            <li>
+              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+              <p>预警事件：内涝点积水</p>
+              <p>预警时间：2024年8月2日09:51:53</p>
+            </li>
+            <li>
+              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+              <p>预警事件：内涝点积水</p>
+              <p>预警时间：2024年8月2日09:51:53</p>
+            </li>
+            <li>
+              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+              <p>预警事件：内涝点积水</p>
+              <p>预警时间：2024年8月2日09:51:53</p>
+            </li>
+            <li>
+              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+              <p>预警事件：内涝点积水</p>
+              <p>预警时间：2024年8月2日09:51:53</p>
+            </li>
+            <li>
+              <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+              <p>预警事件：内涝点积水</p>
+              <p>预警时间：2024年8月2日09:51:53</p>
+            </li>
+          </ul>
         </div>
 
       </div>
@@ -232,12 +232,12 @@ export default {
     this.selectQkEmergencyRescueTeamAllList();
     this.selectQkEmergencyShelterAllList();
     this.selectQkRescueSuppliesAllList();
-    this.resourceDistribution();
-    this.deviceOnline();
-    this.deviceOffline();
+    // this.resourceDistribution();
+    // this.deviceOnline();
+    // this.deviceOffline();
     this.cameraList();
-    this.regionTop();
-	this.qkq_aqcn_chart();
+    // this.regionTop();
+    this.qkq_aqcn_chart();
     // 每秒刷新时间
     setInterval(() => {
       this.getCurrentTime();
@@ -1229,179 +1229,179 @@ export default {
       myChart.setOption(option);
     }
     ,
-   qkq_aqcn_chart(){
-	  var myChart = echarts.init(document.getElementById('qkq_aqcn_chart'));
-	 // mock数据
- const obj = {
-    startAngle: 220,
-    endAngle: -40,
-    pointer: {
-        // 指针
-        show: false,
-    },
-    axisLabel: {
-        // 刻度值
-        show:false,
-    },
-    axisTick: {
-        show:false,
-    },
-};
-var option = {
-    series: [
-        {
-            type: 'gauge',
-            splitNumber: 95,
-            splitLine: {
-                // 分割线
-                distance: -50,
-                length: 20,
-                lineStyle: {
-                    width: 10,
-                    color: '#3ff0a3'
-                }
-            },
-            axisLine: {
-                // 轴线
-                    lineStyle:{
-                       width:4,
-                       color: [[1, '#3300ee11']],
-                   }
-            },
-            itemStyle: {
-                show:false,
-                color: '#FFAB91'
-            },
-            axisLabel: {
-                // 刻度值
-                show:false,
-            },
-            ...obj,
-        },
-        // {
-        //     type: 'gauge',
-        //     startAngle: 220,
-        //     endAngle: -40,
-        //     splitNumber: 45,
-        //     splitLine: {
-        //         length: 30,
-        //         lineStyle: {
-        //             width: 14,
-        //             color: {
-        //               type: 'linear',
-        //                 x: 0,
-        //                 y: 0.25,
-        //                 // r: 0.5,
-        //                 x2: 0,
-        //                 y2: 0,
-        //                 colorStops: [{
-        //                     offset: 0, color: 'gray' // 0% 处的颜色
-        //                 }, {
-        //                     // offset: 1, color: '#52D5F2' // 100% 处的颜色
-        //                     offset: 1, color: 'red' // 100% 处的颜色
-        //                 }],
-        //                 global: false 
-        //             }
-        //         }
-        //     },
-        //     pointer: {
-        //         // 指针
-        //         show: false,
-        //     },
-        //     axisLabel: {
-        //         // 刻度值
-        //         show:false,
-        //     },
-        //     axisTick: {
-        //         show:false,
-        //     },
-        //     axisLine: {
-        //       lineStyle:{
-        //           width:4,
-        //           color: [[1, '#153839']],
-        //       }
-        //     }
-        // },
-        {
-            type:'pie',
-            radius: ['62%', '70%'],
-            startAngle: 220,
-            endAngle: -40,
-            color:['cyan','blue','transparent'],
-            label: {
-                show: false
-            },
-            data:[
-                {value: 120, name: '搜索引擎'},
-                {value: 140, name: '直接访问'},
-                {value: 100, name: '邮件营销'},
-            ],
-        },
-        {
-            type: 'gauge',
-            radius: '58%',
-            startAngle: 220,
-            endAngle: -40,
-            splitNumber: 25,
-            splitLine: {
-                length: 5,
-                lineStyle: {
-                    width: 5,
-                    color: '#4dcbe78f',
-                    type:'dotted',
-                }
-            },
-            pointer: {
-                // 指针
-                show: false,
-            },
-            axisLabel: {
-                // 刻度值
-                show:false,
-            },
-            axisTick: {
-                show:false,
-            },
-            axisLine: {
-               lineStyle:{
-                   width:4,
-                   color:[[1,'#3300ee11']],
-               }
-            },
-            detail: {
-                valueAnimation: true,
-                borderRadius: 8,
-                formatter: function(name) {
-                    return `{a|在线率} \n\n {b|${name}} \n\n %`
-                },
-                rich:{
-                    a: {
-                        color:'#49C3DF',
-                        fontSize: 50,
-                        lineHeight: 20,
-                        padding:[0,0,200,0],
-                    },
-                    b: {
-                        color: '#49C3DF',
-                        height: 40,
-                        fontSize: 130,
-                        padding:[0,0,30,0],
-                        fontWeight: 'bolder',
-                    },
-                }
-            },
-            data: [{
-                // name:'在线率',
-                value: 86
-            }]
-        },
-    ],
-};
-  
-	if(option){
-	myChart.setOption(option);
-	}
-},
+    qkq_aqcn_chart() {
+      var myChart = echarts.init(document.getElementById('qkq_aqcn_chart'));
+      // mock数据
+      const obj = {
+        startAngle: 220,
+        endAngle: -40,
+        pointer: {
+          // 指针
+          show: false,
+        },
+        axisLabel: {
+          // 刻度值
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      };
+      var option = {
+        series: [
+          {
+            type: 'gauge',
+            splitNumber: 95,
+            splitLine: {
+              // 分割线
+              distance: -50,
+              length: 20,
+              lineStyle: {
+                width: 10,
+                color: '#3ff0a3'
+              }
+            },
+            axisLine: {
+              // 轴线
+              lineStyle: {
+                width: 4,
+                color: [[1, '#3300ee11']],
+              }
+            },
+            itemStyle: {
+              show: false,
+              color: '#FFAB91'
+            },
+            axisLabel: {
+              // 刻度值
+              show: false,
+            },
+            ...obj,
+          },
+          // {
+          //     type: 'gauge',
+          //     startAngle: 220,
+          //     endAngle: -40,
+          //     splitNumber: 45,
+          //     splitLine: {
+          //         length: 30,
+          //         lineStyle: {
+          //             width: 14,
+          //             color: {
+          //               type: 'linear',
+          //                 x: 0,
+          //                 y: 0.25,
+          //                 // r: 0.5,
+          //                 x2: 0,
+          //                 y2: 0,
+          //                 colorStops: [{
+          //                     offset: 0, color: 'gray' // 0% 处的颜色
+          //                 }, {
+          //                     // offset: 1, color: '#52D5F2' // 100% 处的颜色
+          //                     offset: 1, color: 'red' // 100% 处的颜色
+          //                 }],
+          //                 global: false
+          //             }
+          //         }
+          //     },
+          //     pointer: {
+          //         // 指针
+          //         show: false,
+          //     },
+          //     axisLabel: {
+          //         // 刻度值
+          //         show:false,
+          //     },
+          //     axisTick: {
+          //         show:false,
+          //     },
+          //     axisLine: {
+          //       lineStyle:{
+          //           width:4,
+          //           color: [[1, '#153839']],
+          //       }
+          //     }
+          // },
+          {
+            type: 'pie',
+            radius: ['62%', '70%'],
+            startAngle: 220,
+            endAngle: -40,
+            color: ['cyan', 'blue', 'transparent'],
+            label: {
+              show: false
+            },
+            data: [
+              {value: 120, name: '搜索引擎'},
+              {value: 140, name: '直接访问'},
+              {value: 100, name: '邮件营销'},
+            ],
+          },
+          {
+            type: 'gauge',
+            radius: '58%',
+            startAngle: 220,
+            endAngle: -40,
+            splitNumber: 25,
+            splitLine: {
+              length: 5,
+              lineStyle: {
+                width: 5,
+                color: '#4dcbe78f',
+                type: 'dotted',
+              }
+            },
+            pointer: {
+              // 指针
+              show: false,
+            },
+            axisLabel: {
+              // 刻度值
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                width: 4,
+                color: [[1, '#3300ee11']],
+              }
+            },
+            detail: {
+              valueAnimation: true,
+              borderRadius: 8,
+              formatter: function (name) {
+                return `{a|在线率} \n\n {b|${name}} \n\n %`
+              },
+              rich: {
+                a: {
+                  color: '#49C3DF',
+                  fontSize: 50,
+                  lineHeight: 20,
+                  padding: [0, 0, 200, 0],
+                },
+                b: {
+                  color: '#49C3DF',
+                  height: 40,
+                  fontSize: 130,
+                  padding: [0, 0, 30, 0],
+                  fontWeight: 'bolder',
+                },
+              }
+            },
+            data: [{
+              // name:'在线率',
+              value: 86
+            }]
+          },
+        ],
+      };
+
+      if (option) {
+        myChart.setOption(option);
+      }
+    },
     getCurrentTime() {
       const now = new Date();
       const year = now.getFullYear();