邓洁: echarts的loading

src/components/content/badGasInfo/BadGasInfo.vue

@@ -24,7 +24,11 @@
       >
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerBad"></div>
           <div style="width: 1px"></div>
         </div>
@@ -56,6 +60,7 @@ const props = defineProps({
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isBadGasVisited = ref(false);
+const showLoading = ref(false)
 const badGasList = ref([]);
 let myEcharts = reactive({});
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
@@ -132,10 +137,12 @@ const changeData = (item) => {
   };
 };
 const getBadGasChartInfo = () => {
+  isBadGasVisited.value = true
+  showLoading.value=true
   let id = props.tunnelId
   getBadGasEchartsInfo(id).then(res => {
     if (res?.code === 1000) {
-      isBadGasVisited.value = true
+      showLoading.value=false
       nextTick(() => {
         initChart(res.data.dates, res.data)
       })