fix(创新示范): 图表切换刷新

src/views/dataCenter/ConctructSystem/model/Munitions/index.vue

@@ -4,12 +4,11 @@
     <div class="meeting">
       <div>今年以来召开融委全体会议次数</div>
       <div class="frequency">
-        {{meetingCount || "--"}}
+        {{ meetingCount || "--" }}
         <span class="second">次</span>
       </div>
     </div>
     <el-row class="investment">
-     
       <el-col class="city-echarts">
         <div class="title2X">各市融委全体会议召开次数</div>
         <div id="mapEcharts" class="echart-item"></div>
@@ -39,6 +38,7 @@ const xAxisCity = [
   "台州",
   "丽水",
 ];
+let MAP_ECHARTS = null;
 
 /**
  * 承担军需品情况
@@ -58,15 +58,14 @@ export default defineComponent({
     this.initEcharts();
   },
   computed: {
-     ...mapState({
+    ...mapState({
       curDataType: (state) => state.curDataType,
     }),
-    meetingCount(){
-      return  Mock[this.curDataType].meetingCount;
-
+    meetingCount() {
+      return Mock[this.curDataType].meetingCount;
     },
     cityData() {
-      return  Mock[this.curDataType].cityData;
+      return Mock[this.curDataType].cityData;
     },
     optionCity() {
       const seriesBar = {
@@ -124,11 +123,11 @@ export default defineComponent({
       };
     },
   },
-   watch: {
+  watch: {
     cityData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionCity);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionCity, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   methods: {
@@ -138,9 +137,9 @@ export default defineComponent({
 
     initCityEcharts() {
       const dom = document.getElementById("mapEcharts");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionCity);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionCity);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/ConctructSystem/model/Outline/index.vue

@@ -3,7 +3,6 @@
     <MapTitle text="五大体系建设总览" />
     <div class="describes">
       <div class="text">各市五大体系建设指标情况</div>
-     
     </div>
 
     <div id="synergyInnovation" class="line"></div>
@@ -17,7 +16,7 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-
+let MAP_ECHARTS = null;
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -50,7 +49,7 @@ export default defineComponent({
     this.initEcharts();
   },
   computed: {
-     ...mapState({
+    ...mapState({
       curDataType: (state) => state.curDataType,
     }),
     seriesData() {
@@ -63,7 +62,7 @@ export default defineComponent({
           axisPointer: {
             type: "shadow",
           },
-          textStyle: {} ,
+          textStyle: {},
           className: "target-bar-tooltip",
           formatter:
             "<span class='title'>{b0}市</span>: <br /> <span class='bar-text'>{c0}</span> 分",
@@ -92,7 +91,7 @@ export default defineComponent({
             label: {
               show: true,
               position: "top",
-              formatter:"{c} 分"
+              formatter: "{c} 分",
             },
             barWidth: 20,
             data: this.seriesData,
@@ -103,18 +102,17 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   methods: {
-   
     initEcharts() {
       const dom = document.getElementById("synergyInnovation");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {
@@ -135,7 +133,6 @@ export default defineComponent({
   padding-left: 10px;
   color: #4198ff;
 }
-
 </style>
 
 <style lang="scss" scoped>
@@ -148,7 +145,7 @@ export default defineComponent({
   .describes {
     margin: 0 10px 5px 0;
     box-sizing: border-box;
-   
+
     .text {
       color: #4198ff;
       margin: 10px 0;

src/views/dataCenter/ConctructSystem/model/Platform/index.vue

@@ -7,12 +7,11 @@
         <div class="item">
           <span>今年以来融办主任主持召开主任会议次数</span>
           <div class="value-des">
-            <span>{{meetingCount || "--"}}</span>次
+            <span>{{ meetingCount || "--" }}</span
+            >次
           </div>
         </div>
-       
       </div>
-
     </div>
 
     <div id="targetBar" class="target-bar"></div>
@@ -39,7 +38,7 @@ const xAxisCity = [
   "台州",
   "丽水",
 ];
-
+let MAP_ECHARTS = null;
 
 /**
  * 全省军民协同创新平台情况——折线图
@@ -61,15 +60,14 @@ export default defineComponent({
     this.initEcharts();
   },
   computed: {
-       ...mapState({
+    ...mapState({
       curDataType: (state) => state.curDataType,
     }),
-    meetingCount(){
-      return  Mock[this.curDataType].meetingCount;
-
+    meetingCount() {
+      return Mock[this.curDataType].meetingCount;
     },
     cityData() {
-      return  Mock[this.curDataType].cityData;
+      return Mock[this.curDataType].cityData;
     },
     optionCity() {
       const seriesBar = {
@@ -126,11 +124,11 @@ export default defineComponent({
       };
     },
   },
-   watch: {
+  watch: {
     cityData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionCity);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionCity, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   methods: {
@@ -139,9 +137,9 @@ export default defineComponent({
     },
     initCityEcharts() {
       const dom = document.getElementById("targetBar");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionCity);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionCity);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/ConctructSystem/model/ScientificInvestment/index.vue

@@ -29,7 +29,6 @@ const SeriesData = {
   name: "国防要求建设项目",
   type: "level_1",
 };
-;
 const PieColor = {
   level_1: "#4198ff",
   level_2: "#6fdef7",
@@ -38,6 +37,7 @@ const PieColor = {
   level_5: "#9daff9",
   level_6: "#47d6ad",
 };
+let MAP_ECHARTS = null;
 
 /**
  * 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
@@ -51,14 +51,13 @@ export default defineComponent({
     return {
       seriesData: SeriesData,
       mapEcharts: null,
-     
     };
   },
   mounted() {
     this.initEcharts();
   },
   computed: {
-      ...mapState({
+    ...mapState({
       curDataType: (state) => state.curDataType,
     }),
     cardItems() {
@@ -158,19 +157,19 @@ export default defineComponent({
       };
     },
   },
-   watch: {
+  watch: {
     pieList() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   methods: {
     initEcharts() {
       const dom = document.getElementById("pie");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/army/model/EconomicConstruct/index.vue

@@ -7,11 +7,15 @@
 
         <div class="info-wrapper">
           <div class="info-details">
-            <div class="info-item" v-for="item in countryData.info" :key="item.label">
-              <span class="title">{{item.label || "--"}}</span>
+            <div
+              class="info-item"
+              v-for="item in countryData.info"
+              :key="item.label"
+            >
+              <span class="title">{{ item.label || "--" }}</span>
               <div>
-                <span>{{item.value || "--"}}</span>
-                {{item.unit}}
+                <span>{{ item.value || "--" }}</span>
+                {{ item.unit }}
               </div>
             </div>
           </div>
@@ -31,11 +35,15 @@
 
         <div class="info-wrapper">
           <div class="info-details">
-            <div class="info-item" v-for="item in provinceData.info" :key="item.label">
-              <span class="title">{{item.label || "--"}}</span>
+            <div
+              class="info-item"
+              v-for="item in provinceData.info"
+              :key="item.label"
+            >
+              <span class="title">{{ item.label || "--" }}</span>
               <div>
-                <span>{{item.value || "--"}}</span>
-                {{item.unit}}
+                <span>{{ item.value || "--" }}</span>
+                {{ item.unit }}
               </div>
             </div>
           </div>
@@ -57,6 +65,8 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
+let MAP_ECHARTS = null;
+let CRI_RIGHT_ECHART = null;
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -372,34 +382,30 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
     },
     provinceData() {
-      this.cirRightEchart.showLoading();
-      this.cirRightEchart.setOption(this.ptionCirRight);
-      this.cirRightEchart.hideLoading();
+      CRI_RIGHT_ECHART.setOption(this.ptionCirRight, true);
     },
   },
   methods: {
     initEcharts() {
       const dom = document.getElementById("economicConstruct");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
     initCircularEcharts() {
       const dom = document.getElementById("circularEchart");
       const domCirRightEchart = document.getElementById("cirRightEchart");
 
       const cirLeftCharts = echarts.init(dom);
-      const cirRightEchart = echarts.init(domCirRightEchart);
+      CRI_RIGHT_ECHART = echarts.init(domCirRightEchart);
 
       cirLeftCharts.setOption(this.ptionCirLeft);
-      cirRightEchart.setOption(this.ptionCirRight);
+      CRI_RIGHT_ECHART.setOption(this.ptionCirRight);
       this.cirLeftCharts = cirLeftCharts;
-      this.cirRightEchart = cirRightEchart;
+      this.cirRightEchart = CRI_RIGHT_ECHART;
     },
   },
   unmounted() {
@@ -510,7 +516,7 @@ export default defineComponent({
       }
 
       .circular {
-        margin-right: 60px;
+        margin-right: 40px;
         margin-left: 40px;
         width: 100px;
         height: 100px;

src/views/dataCenter/army/model/Munitions/index.vue

@@ -21,13 +21,8 @@ import { Aim } from "@element-plus/icons";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-// 国家增长率
-// const seriesCountryData = [
-//   {
-//     value: [107.32, 157.51, 172.11],
-//     rate: ["", 42.17, 21.19],
-//   },
-// ];
+let MAP_ECHARTS = null;
+let CITY_ECHARTS  = null
 const xAxisCountry = ["2018", "2019", "2020", "2021", "2022"];
 
 // 城市增长率
@@ -65,14 +60,14 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.countryEcharts.showLoading();
-      this.countryEcharts.setOption(this.optionCountry);
-      this.countryEcharts.hideLoading();
+     MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionCountry, true);
+      MAP_ECHARTS.hideLoading();
     },
     cityData() {
-      this.cityEcharts.showLoading();
-      this.cityEcharts.setOption(this.optionCity);
-      this.cityEcharts.hideLoading();
+    CITY_ECHARTS.showLoading();
+      CITY_ECHARTS.setOption(this.optionCity,true);
+      CITY_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -280,15 +275,15 @@ export default defineComponent({
     },
     initCountryEcharts() {
       const dom = document.getElementById("countryEcharts");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionCountry);
-      this.countryEcharts = mapEcharts;
+     MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionCountry);
+      this.countryEcharts = MAP_ECHARTS;
     },
     initCityEcharts() {
       const dom = document.getElementById("cityEcharts");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionCity);
-      this.cityEcharts = mapEcharts;
+      CITY_ECHARTS = echarts.init(dom);
+      CITY_ECHARTS.setOption(this.optionCity);
+      this.cityEcharts = CITY_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/army/model/Person/index.vue

@@ -3,12 +3,12 @@
   <div class="describes">
     <div class="card-items">
       <div class="item" v-for="item in info" :key="item.label">
-        <span>{{item.label}}</span>
+        <span>{{ item.label }}</span>
         <div class="value-des">
-          <span>{{item.value || "--"}}</span>{{item.unit}}
+          <span>{{ item.value || "--" }}</span
+          >{{ item.unit }}
         </div>
       </div>
-     
     </div>
 
     <div class="text">各市输送人才情况</div>
@@ -23,7 +23,6 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-// const seriesData = this
 const xAxisCity = [
   "杭州",
   "宁波",
@@ -37,6 +36,7 @@ const xAxisCity = [
   "台州",
   "丽水",
 ];
+let MAP_ECHARTS = null;
 
 /**
  * 地方为国防和军队建设培养输送人才情况
@@ -57,15 +57,10 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      console.log("---sssss-", )
-      // this.mapEcharts.clear();
+     MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption({ ...this.optionBar }, true);
 
-      setTimeout(() => {
-        this.mapEcharts.showLoading();
-        this.mapEcharts.setOption({...this.optionBar}, true);
-
-        this.mapEcharts.hideLoading();
-      }, 500)
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -130,7 +125,7 @@ export default defineComponent({
           },
           className: "person-echart",
           formatter: (params) => {
-            console.log("-----sssssssss")
+            console.log("-----sssssssss");
             let html = `<span class="name">${params[0].axisValue}</span>`;
 
             html += `<div class="person-echart ">
@@ -180,9 +175,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById("locPerson");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+     MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/army/model/Science/index.vue

@@ -39,10 +39,7 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-// const SeriesData = {
-//   // type: "level_1",
-//   ...this.seriesData,
-// };
+let MAP_ECHARTS = null;
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -76,9 +73,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+     MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -160,9 +157,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById("incomDistribution");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/army/model/StrongArmy/index.vue

@@ -14,6 +14,7 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
+let MAP_ECHARTS = null;
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -104,17 +105,17 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   methods: {
     initEcharts() {
       const dom = document.getElementById("TargetBar");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/industrial/model/BusinessIncome/index.vue

@@ -12,7 +12,7 @@
               <span>(亿元)</span>
             </div>
           </div>
-          <span class="mony-number">{{incomCount ||"--"}}</span>
+          <span class="mony-number">{{ incomCount || "--" }}</span>
         </div>
       </div>
     </el-col>
@@ -26,11 +26,15 @@
           :span="11"
         >
           <el-row align="middle">
-            <div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
+            <div
+              class="square"
+              :style="{ background: pieColor[`level_${index + 1}`] }"
+            ></div>
             {{ item.label }}
           </el-row>
           <div class="pie-value">
-            <span>{{ item.value }}</span>亿元
+            <span>{{ item.value }}</span
+            >亿元
           </div>
         </el-col>
       </el-row>
@@ -45,7 +49,6 @@ import { Aim } from "@element-plus/icons";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-
 const PieColor = {
   level_1: "#1781df",
   level_2: "#67bbf9",
@@ -58,6 +61,7 @@ const PieColor = {
   level_9: "#47d6ad",
 };
 
+let MAP_ECHARTS = null;
 /**
  * 军民融合产业主营业务收入
  */
@@ -78,9 +82,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -147,9 +151,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById("businessIncome");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/industrial/model/IncomDistribution/index.vue

@@ -10,17 +10,6 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-// const seriesData = [
-//   {
-//     name: "主营业务收入",
-//     type: "level_1",
-//     value: [
-//       1553.8, 754.1, 61.4, 129.2, 373.1, 381.2, 112.8, 42.8, 6, 91.8, 39.3,
-//     ],
-//     rateData: [24.2, 42.2, 4.6, 36.7, 38.5, 42.6, 55.8, 16.2, -1.9, 10.2, 54.5],
-//   },
-// ];
-
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -34,6 +23,7 @@ const xAxisValue = [
   "台州",
   "丽水",
 ];
+let MAP_ECHARTS = null;
 
 /**
  * 主营业务收入分布——柱状图
@@ -53,10 +43,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.clear();
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -164,9 +153,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById("incomDistribution");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/industrial/model/IncomExtendLine/index.vue

@@ -2,11 +2,11 @@
   <MapTitle :text="echartsTitle" />
   <div class="describes">
     <div class="card-items">
-      <div class="item" v-for="(item,index) in cardItems" :key="item.text">
+      <div class="item" v-for="(item, index) in cardItems" :key="item.text">
         <span>{{ item.label }}</span>
         <div class="value-des">
           <span>{{ item.value || "--" }}</span>
-          {{index === 0?"亿元":"%"}}
+          {{ index === 0 ? "亿元" : "%" }}
         </div>
       </div>
     </div>
@@ -23,13 +23,7 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-// const seriesData = [
-//   {
-//     // name: "国防要求建设项目",
-//     type: "level_1",
-//     value: [5204.49, 6029.77, 7633.65, 3545.5],
-//   },
-// ];
+let MAP_ECHARTS = null;
 
 const xAxisValue = ["2018年", "2019年", "2020年", "2021上半年"];
 
@@ -80,9 +74,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -154,9 +148,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById(this.echartsId);
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/industrial/model/Industrial/index.vue

@@ -2,11 +2,11 @@
   <MapTitle :text="echartsTitle" />
   <div class="describes">
     <div class="card-items">
-      <div class="item" v-for="(item,index) in cardItems" :key="item.text">
+      <div class="item" v-for="(item, index) in cardItems" :key="item.text">
         <span>{{ item.label }}</span>
         <div class="value-des">
           <span>{{ item.value || "--" }}</span>
-          {{index === 0?"亿元":"%"}}
+          {{ index === 0 ? "亿元" : "%" }}
         </div>
       </div>
     </div>
@@ -23,15 +23,7 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-// const seriesData = [
-//   {
-//     name: "产值规模",
-//     type: "level_2",
-//     echartType: "bar",
-//     barValue: [587.5, 137.6, 15.3, 71.1, 120.8, 65, 72, 14, 8.2, 20.3, 1.6],
-//     growthRate: [19, 12.8, -0.1, 31.7, 28.5, 33.3, 80, 17, 0.4, 14.5, 33],
-//   },
-// ];
+let MAP_ECHARTS = null;
 
 const xAxisValue = [
   "杭州",
@@ -94,9 +86,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -200,9 +192,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById(this.echartsId);
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/industrial/model/TargetBar/index.vue

@@ -27,7 +27,7 @@ const xAxisValue = [
   "台州",
   "丽水",
 ];
-
+let MAP_ECHARTS = null;
 /**
  * 产业融合发展总览——柱状图
  */
@@ -54,9 +54,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -116,9 +116,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById("TargetBar");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/innovation/index.vue

@@ -36,14 +36,14 @@
                 <div class="item">
                   <span>省直部门新认定的领跑技术（产品）</span>
                   <div class="value-des">
-                    <span>{{count|| "--"}}</span>个
+                    <span>{{ count || "--" }}</span
+                    >个
                   </div>
                 </div>
               </div>
             </div>
 
             <div id="TargetBars" class="target-bar"></div>
-            
           </div>
         </el-col>
       </el-row>
@@ -76,9 +76,7 @@ const xAxisCity = [
   "台州",
   "丽水",
 ];
-// const cityData = {
-//   value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
-// };
+let MAP_ECHARTS = null;
 /**
  * 军民协同创新
  */
@@ -107,9 +105,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.TargetBars.showLoading();
-      this.TargetBars.setOption(this.optionCity);
-      this.TargetBars.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionCity, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -185,9 +183,9 @@ export default defineComponent({
     },
     initCityEcharts() {
       const dom = document.getElementById("TargetBars");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionCity);
-      this.TargetBars = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionCity);
+      this.TargetBars = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/innovation/model/Industrial/index.vue

@@ -54,6 +54,7 @@ const xAxisValue = [
   "丽水",
 ];
 
+
 /**
  * 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 柱状图
  */

src/views/dataCenter/innovation/model/Munitions/index.vue

@@ -4,12 +4,11 @@
     <div class="meeting">
       <div>全省“民参军”企事业单位军品科研经费支出总额</div>
       <div class="frequency">
-        {{money || "--"}}
+        {{ money || "--" }}
         <span class="second">亿元</span>
       </div>
     </div>
     <el-row class="investment">
-   
       <el-col class="city-echarts">
         <div class="title2X">“民参军”企事业单位军品科研经费分布情况</div>
         <div id="enterprises" class="echart-item"></div>
@@ -39,9 +38,8 @@ const xAxisCity = [
   "台州",
   "丽水",
 ];
-// const cityData = {
-//   value: [79.83, 9.08, 3.4, 11.8, 5.17, 13.95, 4.52, 1.58, 0.18, 3.69, 1.82],
-// };
+
+let MAP_ECHARTS = null;
 
 /**
  * 承担军需品情况
@@ -55,7 +53,7 @@ export default defineComponent({
   data() {
     return {
       countryEcharts: null,
-   
+
       enterprises: null,
     };
   },
@@ -64,9 +62,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.enterprises.showLoading();
-      this.enterprises.setOption(this.optionCity, true);
-      this.enterprises.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionCity, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -128,7 +126,6 @@ export default defineComponent({
         yAxis: {
           type: "value",
           name: "金额(亿元)",
-        
         },
         xAxis: {
           type: "category",
@@ -145,9 +142,10 @@ export default defineComponent({
 
     initCityEcharts() {
       const dom = document.getElementById("enterprises");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionCity);
-      this.enterprises = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionCity);
+
+      this.enterprises = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/innovation/model/Outline/index.vue

@@ -34,6 +34,7 @@ const xAxisValue = [
   "台州",
   "丽水",
 ];
+let MAP_ECHARTS = null;
 
 /**
  * 军民协同创新总览
@@ -54,9 +55,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   computed: {
@@ -116,9 +117,9 @@ export default defineComponent({
     },
     initEcharts() {
       const dom = document.getElementById("synergyInnovation");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/innovation/model/Platform/index.vue

@@ -36,7 +36,7 @@ const xAxisCity = ["2018年", "2019年", "2020年"];
 // const cityData = {
 //   value: [225, 160, 170],
 // };
-
+let MAP_ECHARTS = null;
 /**
  * 全省军民协同创新平台情况——折线图
  */
@@ -58,9 +58,7 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.TargetBar.showLoading();
-      this.TargetBar.setOption(this.optionCity);
-      this.TargetBar.hideLoading();
+     MAP_ECHARTS.setOption(this.optionCity, true);
     },
   },
   computed: {
@@ -154,9 +152,9 @@ export default defineComponent({
     },
     initCityEcharts() {
       const dom = document.getElementById("TargetBar");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionCity);
-      this.TargetBar = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionCity);
+      this.TargetBar = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/innovation/model/ScientificInvestment/index.vue

@@ -19,9 +19,16 @@
       </el-col>
 
       <el-col :span="13">
-        <div class="list-item" v-for="(item, index) in this.seriesData" :key="item.label">
+        <div
+          class="list-item"
+          v-for="(item, index) in this.seriesData"
+          :key="item.label"
+        >
           <el-row align="middle">
-            <div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
+            <div
+              class="square"
+              :style="{ background: pieColor[`level_${index + 1}`] }"
+            ></div>
             <span>{{ item.label }}</span>
           </el-row>
           <div class="pie-value">
@@ -48,6 +55,7 @@ const PieColor = {
   level_5: "#9daff9",
   level_6: "#fac858",
 };
+let MAP_ECHARTS = null;
 
 /**
  * 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
@@ -63,7 +71,7 @@ export default defineComponent({
       mapEcharts: null,
       cirLeftCharts: null,
       cirRightEchart: null,
-  
+
       // pieList: PIE_LIST,
       pieColor: PieColor,
     };
@@ -73,9 +81,7 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
     },
   },
   computed: {
@@ -142,9 +148,9 @@ export default defineComponent({
   methods: {
     initEcharts() {
       const dom = document.getElementById("pie");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/map/model/Income/index.vue

@@ -16,7 +16,7 @@ enum Echart_color_Enum {
   level_1 = "#fac858",
   level_2 = "#4198ff",
 }
-
+let MAP_ECHARTS = null;
 
 const xAxisValue = ["2018", "2019", "2020", "2021"];
 
@@ -34,7 +34,7 @@ export default defineComponent({
     this.initEcharts();
   },
   computed: {
-     ...mapState({
+    ...mapState({
       curDataType: (state) => state.curDataType,
     }),
     seriesData() {
@@ -134,19 +134,19 @@ export default defineComponent({
       };
     },
   },
-   watch: {
+  watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.option);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.option, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   methods: {
     initEcharts() {
       const dom = document.getElementById("incomEcharts");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.option);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.option);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/map/model/InvestmentProgress/index.vue

@@ -27,6 +27,8 @@ const xAxisValue = [
   "丽水",
 ];
 
+let MAP_ECHARTS = null;
+
 export default defineComponent({
   components: {
     MapTitle,
@@ -138,20 +140,20 @@ export default defineComponent({
       };
     },
   },
-   watch: {
+  watch: {
     seriesData() {
-      this.mapEcharts.showLoading();
-      this.mapEcharts.setOption(this.optionBar);
-      this.mapEcharts.hideLoading();
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
 
   methods: {
     initEcharts() {
       const dom = document.getElementById("InvestmentProgress");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {

src/views/dataCenter/map/model/Performance/index.vue

@@ -16,6 +16,7 @@ import * as echarts from "echarts";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
+let MAP_ECHARTS = null;
 enum Bar_Enum {
   level_1 = "#4f5d81",
   level_2 = "#429a9d",
@@ -128,12 +129,9 @@ export default defineComponent({
   },
   watch: {
     seriesData() {
-      this.mapEcharts.clear();
-      setTimeout(() => {
-        this.mapEcharts.showLoading();
-        this.mapEcharts.setOption(this.optionBar);
-        this.mapEcharts.hideLoading();
-      }, 200);
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
     },
   },
   methods: {
@@ -142,9 +140,9 @@ export default defineComponent({
     },
     initEcharts() {
       const dom = document.getElementById("performanceBar");
-      const mapEcharts = echarts.init(dom);
-      mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts;
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
     },
   },
   unmounted() {