fix(mock数据)：点击顶部按钮切换不同内容效果

src/views/dataCenter/army/index.vue

 <template>
   <el-row class="map-warpper" :gutter="16">
     <el-col class="map-left" :span="8">
-      <div class="footer-item card-item"><StrongArmy /></div>
+      <div class="footer-item card-item">
+        <StrongArmy />
+      </div>
     </el-col>
     <el-col class="map-right" :span="16">
       <el-row :gutter="16">
@@ -11,7 +13,9 @@
           </div>
         </el-col>
         <el-col :span="12">
-          <div class="card-item"><Science /></div>
+          <div class="card-item">
+            <Science />
+          </div>
         </el-col>
       </el-row>
     </el-col>
@@ -59,7 +63,10 @@ export default defineComponent({
         },
       ],
       extendCardItems: [
-        { label: "参与军民融合产业互动的规模以上企业主营收入", value: "3545.5" },
+        {
+          label: "参与军民融合产业互动的规模以上企业主营收入",
+          value: "3545.5",
+        },
         {
           label: "参与军民融合产业互动的规模以上企业主营收入增长率",
           value: "19",

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

@@ -7,15 +7,13 @@
 
         <div class="info-wrapper">
           <div class="info-details">
-            <div
-              class="info-item"
-              v-for="item in countryData.info"
-              :key="item.label"
-            >
+            <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}}</div>
+              <div>
+                <span>{{item.value || "--"}}</span>
+                {{item.unit}}
+              </div>
             </div>
-            
           </div>
           <!-- 环形进度条 -->
           <div v-show="false" id="circularEchart" class="circular"></div>
@@ -33,15 +31,13 @@
 
         <div class="info-wrapper">
           <div class="info-details">
-            <div
-              class="info-item"
-              v-for="item in provinceData.info"
-              :key="item.label"
-            >
+            <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}}</div>
+              <div>
+                <span>{{item.value || "--"}}</span>
+                {{item.unit}}
+              </div>
             </div>
-            
           </div>
           <!-- 环形进度条 -->
           <div id="cirRightEchart" class="circular"></div>
@@ -384,7 +380,7 @@ export default defineComponent({
       this.cirRightEchart.showLoading();
       this.cirRightEchart.setOption(this.ptionCirRight);
       this.cirRightEchart.hideLoading();
-    }
+    },
   },
   methods: {
     initEcharts() {

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

@@ -18,17 +18,17 @@ import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 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,],
-  },
-];
-const xAxisCountry = ["2018", "2019", "2020","2021","2022",];
-
-
+// const seriesCountryData = [
+//   {
+//     value: [107.32, 157.51, 172.11],
+//     rate: ["", 42.17, 21.19],
+//   },
+// ];
+const xAxisCountry = ["2018", "2019", "2020", "2021", "2022"];
 
 // 城市增长率
 const xAxisCity = [
@@ -44,10 +44,6 @@ const xAxisCity = [
   "台州",
   "丽水",
 ];
-const cityData = {
-  value: [32.68, 7.42, 1.36, 3.47, 19.56, 12.5, 1.7,0.86 , 2.61, 2.58, 0.17],
-  rate: [30.75, 66, 19.8, 38.95, 57.59, 117, 83, 13.2, -32, 46.4, 150.7],
-};
 
 /**
  * 承担军需品情况
@@ -67,9 +63,31 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.countryEcharts.showLoading();
+      this.countryEcharts.setOption(this.optionCountry);
+      this.countryEcharts.hideLoading();
+    },
+    cityData() {
+      this.cityEcharts.showLoading();
+      this.cityEcharts.setOption(this.optionCity);
+      this.cityEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
+    cityData() {
+      return Mock[this.curDataType].cityData;
+    },
     optionCountry() {
-      const seriesBarList = seriesCountryData.map((item) => {
+      const seriesBarList = this.seriesData.map((item) => {
+        // console.log("测试", item.value);
         return {
           name: "收入规模",
           type: "bar",
@@ -87,7 +105,7 @@ export default defineComponent({
         };
       });
 
-      const seriesLineList = seriesCountryData.map((item) => {
+      const seriesLineList = this.seriesData.map((item) => {
         return {
           name: "增长率",
 
@@ -174,7 +192,7 @@ export default defineComponent({
         },
         barWidth: 20,
 
-        data: cityData.value.map((item) => {
+        data: this.cityData.value.map((item) => {
           return {
             value: item,
             label: "收入规模",
@@ -194,8 +212,7 @@ export default defineComponent({
         },
         name: "增长率",
 
-
-        data: cityData.rate.map((item) => {
+        data: this.cityData.rate.map((item) => {
           return {
             value: item,
             label: "增长率",

src/views/dataCenter/army/model/Munitions/mock.js

+export default {
+    "typeOne": {
+        seriesData: [{
+            value: [],
+            rate: [],
+        }],
+        cityData: {
+            value: [],
+            rate: [],
+        }
+    },
+    "typeTwo": {
+        seriesData: [{
+            value: [],
+            rate: [],
+        }],
+        cityData: {
+            value: [],
+            rate: [],
+        }
+    },
+    "typeThree": {
+        seriesData: [{
+            value: [107.32, 157.51, 172.11],
+            rate: ["", 42.17, 21.19],
+        }],
+        cityData: {
+            value: [32.68, 7.42, 1.36, 3.47, 19.56, 12.5, 1.7, 0.86, 2.61, 2.58, 0.17],
+            rate: [30.75, 66, 19.8, 38.95, 57.59, 117, 83, 13.2, -32, 46.4, 150.7],
+        }
+    },
+}
\ No newline at end of file

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

@@ -4,12 +4,16 @@
     <div class="card-items">
       <div class="item">
         <span>入伍总人数</span>
-        <div class="value-des"><span>1470</span>人</div>
+        <div class="value-des">
+          <span>1470</span>人
+        </div>
       </div>
 
       <div class="item">
         <span>入伍总比列</span>
-        <div class="value-des"><span>0.5%</span></div>
+        <div class="value-des">
+          <span>0.5%</span>
+        </div>
       </div>
     </div>
 
@@ -22,11 +26,10 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
-const seriesData = {
-  value: [595, 173, 128, 74, 84, 47, 142, 39, 49, 100, 39],
-  rate: [0.5, 0.4, 0.5, 1, 0.5, 0.2, 0.6, 0.9, 0.8, 1, 0.6],
-};
+// const seriesData = this
 const xAxisCity = [
   "杭州",
   "宁波",
@@ -58,9 +61,23 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
     optionBar() {
-      const seriesBar = {
+      const seriesBar = this.seriesData.map((item) => {
+        return {
           name: "入伍人数",
 
           type: "bar",
@@ -69,15 +86,17 @@ export default defineComponent({
           },
           barWidth: 20,
 
-        data: seriesData.value.map((item) => {
+          data: item.value.map((item) => {
             return {
               value: item,
               label: "入伍人数",
             };
           }),
         };
+      });
 
-      const seriesLine = {
+      const seriesLine = this.seriesData.map((item) => {
+        return {
           name: "入伍比率",
           type: "line",
           stack: "Total",
@@ -89,13 +108,16 @@ export default defineComponent({
             focus: "series",
           },
 
-        data: seriesData.rate.map((item) => {
+          data: item.rate.map((item) => {
             return {
               value: item,
               label: "入伍比率",
             };
           }),
         };
+      });
+
+      // const seriesLine = {};
 
       return {
         tooltip: {
@@ -147,7 +169,7 @@ export default defineComponent({
           type: "category",
           data: xAxisCity,
         },
-        series: [seriesBar, seriesLine],
+        series: [...seriesBar, ...seriesLine],
       };
     },
   },

src/views/dataCenter/army/model/Person/mock.js

+export default {
+    "typeOne": {
+        seriesData: [{
+            value: [],
+            rate: [],
+        }]
+    },
+    "typeTwo": {
+        seriesData: [{
+            value: [],
+            rate: [],
+        }]
+    },
+    "typeThree": {
+        seriesData: [{
+            value: [595, 173, 128, 74, 84, 47, 142, 39, 49, 100, 39],
+            rate: [0.5, 0.4, 0.5, 1, 0.5, 0.2, 0.6, 0.9, 0.8, 1, 0.6],
+        }]
+    }
+
+}
\ No newline at end of file

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

@@ -4,12 +4,18 @@
     <el-col :span="11">
       <div class="card-item">
         <span>民口单位军品收入</span>
-        <div>53.35<span>亿元</span></div>
+        <div>
+          53.35
+          <span>亿元</span>
+        </div>
       </div>
 
       <div class="card-item">
         <span>人均民口单位军品收入</span>
-        <div>90.56<span>元</span></div>
+        <div>
+          90.56
+          <span>元</span>
+        </div>
       </div>
     </el-col>
 
@@ -22,11 +28,7 @@
         </div>
 
         <el-scrollbar height="92px">
-          <div
-            class="rate-list-item"
-            v-for="(item, index) in seriesData.rate"
-            :key="index"
-          >
+          <div class="rate-list-item" v-for="(item, index) in this.seriesData" :key="index">
             <span>{{ item.city }}</span>
             <span class="rate-value">{{ item.increace }}%</span>
           </div>
@@ -42,73 +44,13 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
-const SeriesData = {
-  type: "level_1",
-  rate: [
-    {
-      city: "杭州",
-      value: 15.63,
-      increace: 69.53,
-    },
-    {
-      city: "宁波",
-      value: 7.42,
-      increace: 66,
-
-    },
-    {
-      city: "温州",
-      value: 1.23,
-      increace: 18.6,
-
-    },
-    {
-      city: "湖州",
-      value: 2.65,
-      increace: 79.1,
-
-    },
-    {
-      city: "嘉兴",
-      value: 6,
-      increace: 28.06,
-
-    },
-    {
-      city: "绍兴",
-      value: 12.5,
-      increace: 117,
-
-    },
-    {
-      city: "金华",
-      increace: 83,
-      value: 1.7,
-    },
-    {
-      city: "衢州",
-      increace: 13.2,
-      value: 0.86,
-    },
-    {
-      city: "舟山",
-      increace: -32,
-      value: 2.61,
-    },
-
-    {
-      city: "台州",
-      increace: 46.4,
-      value: 2.58,
-    },
-    {
-      city: "丽水",
-      increace: 150.7,
-      value: 0.17,
-    },
-  ],
-};
+// const SeriesData = {
+//   // type: "level_1",
+//   ...this.seriesData,
+// };
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -133,14 +75,27 @@ export default defineComponent({
   setup() {},
   data() {
     return {
-      seriesData: SeriesData,
+      // seriesData: SeriesData,
       mapEcharts: null,
     };
   },
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType];
+    },
     optionBar() {
       const seriesLine = {
         type: "line",
@@ -168,7 +123,7 @@ export default defineComponent({
           ]),
         },
 
-        data: SeriesData.rate,
+        data: this.seriesData,
       };
 
       return {
@@ -327,7 +282,7 @@ export default defineComponent({
 .incom-distribution {
   flex: 1;
   min-height: 150px;
-height: calc(100% - 200px);
+  height: calc(100% - 200px);
   box-sizing: border-box;
   margin-top: 10px;
 }

src/views/dataCenter/army/model/Science/mock.js

+export default {
+    "typeOne": [],
+    "typeTwo": [],
+    "typeThree": [{
+            city: "杭州",
+            value: 15.63,
+            increace: 69.53,
+        },
+        {
+            city: "宁波",
+            value: 7.42,
+            increace: 66,
+        },
+        {
+            city: "温州",
+            value: 1.23,
+            increace: 18.6,
+        },
+        {
+            city: "湖州",
+            value: 2.65,
+            increace: 79.1,
+        },
+        {
+            city: "嘉兴",
+            value: 6,
+            increace: 28.06,
+        },
+        {
+            city: "绍兴",
+            value: 12.5,
+            increace: 117,
+        },
+        {
+            city: "金华",
+            increace: 83,
+            value: 1.7,
+        },
+        {
+            city: "衢州",
+            increace: 13.2,
+            value: 0.86,
+        },
+        {
+            city: "舟山",
+            increace: -32,
+            value: 2.61,
+        },
+
+        {
+            city: "台州",
+            increace: 46.4,
+            value: 2.58,
+        },
+        {
+            city: "丽水",
+            increace: 150.7,
+            value: 0.17,
+        },
+    ],
+
+}
\ No newline at end of file

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

@@ -3,7 +3,6 @@
 
   <div class="echarts-search">
     <div class="title">各市服务强军兴军创新指标情况</div>
-  
   </div>
 
   <div id="TargetBar" class="target-bar"></div>
@@ -12,6 +11,8 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
 const xAxisValue = [
   "杭州",
@@ -51,6 +52,12 @@ export default defineComponent({
     this.initEcharts();
   },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType];
+    },
     optionBar() {
       return {
         tooltip: {
@@ -89,12 +96,19 @@ export default defineComponent({
               position: "top",
             },
             barWidth: 20,
-             data: [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19],
+            data: this.seriesData,
           },
         ],
       };
     },
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   methods: {
     initEcharts() {
       const dom = document.getElementById("TargetBar");
@@ -102,7 +116,6 @@ export default defineComponent({
       mapEcharts.setOption(this.optionBar);
       this.mapEcharts = mapEcharts;
     },
-  
   },
   unmounted() {
     if (!this.mapEcharts) {
@@ -131,7 +144,6 @@ export default defineComponent({
     margin: 12px 0;
     font-size: 14px;
   }
-  
 }
 
 .target-bar {

src/views/dataCenter/army/model/StrongArmy/mock.js

+export default {
+    "typeOne": [],
+    "typeTwo": [],
+    "typeThree": [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 30],
+
+}
\ No newline at end of file

src/views/dataCenter/industrial/index.vue

 <template>
   <el-row class="map-warpper" :gutter="16">
     <el-col class="map-left" :span="8">
-      <div class="footer-item card-item"><TargetBar /></div>
+      <div class="footer-item card-item">
+        <TargetBar />
+      </div>
     </el-col>
     <el-col :span="16">
-      <el-row class="map-right card-item" >
+      <el-row class="map-right card-item">
         <el-col :span="12">
           <IncomExtendLine
             echartsId="incomExtend"
@@ -13,7 +15,9 @@
             :cardItems="extendCardItems"
           />
         </el-col>
-        <el-col :span="10" :offset="1"><IncomDistribution /></el-col>
+        <el-col :span="10" :offset="1">
+          <IncomDistribution />
+        </el-col>
       </el-row>
     </el-col>
   </el-row>
@@ -46,14 +50,13 @@ import IncomDistribution from "./model/IncomDistribution/index.vue";
 import BusinessIncome from "./model/BusinessIncome/index.vue";
 import Industrial from "./model/Industrial/index.vue";
 
-
 export default defineComponent({
   components: {
     TargetBar,
     IncomExtendLine,
     IncomDistribution,
     BusinessIncome,
-    Industrial
+    Industrial,
   },
   setup() {},
   data() {
@@ -66,7 +69,10 @@ export default defineComponent({
         },
       ],
       extendCardItems: [
-        { label: "参与军民融合产业互动的规模以上企业主营业务收入", value: "3545.5" },
+        {
+          label: "参与军民融合产业互动的规模以上企业主营业务收入",
+          value: "3545.5",
+        },
         {
           label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
           value: "31.5",
@@ -92,7 +98,7 @@ export default defineComponent({
 
 .map-warpper {
   box-sizing: border-box;
-  .map-right{
+  .map-right {
     padding-bottom: 0;
   }
 }

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

@@ -8,7 +8,10 @@
         <div class="money-logo">
           <div>
             <!-- <img src="@/assets/img/qiandai.svg" alt="" /> -->
-            <div>营业收入 <span>(亿元)</span></div>
+            <div>
+              营业收入
+              <span>(亿元)</span>
+            </div>
           </div>
           <span class="mony-number">3532.82</span>
         </div>
@@ -19,20 +22,16 @@
       <el-row :gutter="15">
         <el-col
           class="pie-item"
-          v-for="(item, index) in pieList"
+          v-for="(item, index) in this.seriesData"
           :key="item.lable"
           :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>
@@ -44,18 +43,20 @@ import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 import { Aim } from "@element-plus/icons";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
-const PIE_LIST = [
-  { label: "数字军工(网络、人工智能)领域", value: 932.66 },
-  { label: "高端装备领域", value: 383.17 },
-  { label: "核电(新能源领域)", value: 311.27 },
-  { label: "生物安全领域", value: 267.96 },
-  { label: "航空航天领域", value: 269.18 },
-  { label: "船舶与海洋装备领域", value: 84.22 },
-  { label: "军队现代后勤保障领域", value: 517.9 },
-  { label: "军用材料与基础件配套领域", value: 365.24 },
-  { label: "其他", value: 401.22 },
-];
+// const PIE_LIST = [
+//   { label: "数字军工(网络、人工智能)领域", value: 932.66 },
+//   { label: "高端装备领域", value: 383.17 },
+//   { label: "核电(新能源领域)", value: 311.27 },
+//   { label: "生物安全领域", value: 267.96 },
+//   { label: "航空航天领域", value: 269.18 },
+//   { label: "船舶与海洋装备领域", value: 84.22 },
+//   { label: "军队现代后勤保障领域", value: 517.9 },
+//   { label: "军用材料与基础件配套领域", value: 365.24 },
+//   { label: "其他", value: 401.22 },
+// ];
 
 const PieColor = {
   level_1: "#1781df",
@@ -80,7 +81,7 @@ export default defineComponent({
   setup() {},
   data() {
     return {
-      pieList: PIE_LIST,
+      // pieList: this.seriesData,
       pieColor: PieColor,
       mapEcharts: null,
     };
@@ -88,9 +89,22 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType];
+    },
     optionBar() {
-      const pieData = PIE_LIST.map((item, index) => {
+      const pieData = this.seriesData.map((item, index) => {
         return {
           value: item.value,
           itemStyle: {
@@ -201,7 +215,7 @@ export default defineComponent({
         width: 35px;
       }
     }
-    .mony-number{
+    .mony-number {
       font-size: 36px;
       color: #4198ff;
     }

src/views/dataCenter/industrial/model/BusinessIncome/mock.js

+export default {
+    "typeOne": [],
+    "typeTwo": [],
+    "typeThree": [
+        { label: "数字军工(网络、人工智能)领域", value: 932.66 },
+        { label: "高端装备领域", value: 383.17 },
+        { label: "核电(新能源领域)", value: 311.27 },
+        { label: "生物安全领域", value: 267.96 },
+        { label: "航空航天领域", value: 269.18 },
+        { label: "船舶与海洋装备领域", value: 84.22 },
+        { label: "军队现代后勤保障领域", value: 517.9 },
+        { label: "军用材料与基础件配套领域", value: 365.24 },
+        { label: "其他", value: 401.22 },
+    ]
+
+}
\ No newline at end of file

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

@@ -7,16 +7,19 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 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 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 = [
   "杭州",
@@ -48,9 +51,22 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
     optionBar() {
-      const seriesBarList = seriesData.map((item,index) => {
+      const seriesBarList = this.seriesData.map((item, index) => {
         return {
           name: "主营业务收入",
           type: "bar",
@@ -62,13 +78,13 @@ export default defineComponent({
           data: item.value.map((valItem) => {
             return {
               value: valItem,
-              label: "主营业务收入"
+              label: "主营业务收入",
             };
           }),
         };
       });
 
-      const seriesLineList = seriesData.map((item) => {
+      const seriesLineList = this.seriesData.map((item) => {
         return {
           name: "增长率",
           type: "line",
@@ -80,11 +96,11 @@ export default defineComponent({
             focus: "series",
           },
 
-          data: item.rateData.map(val => {
+          data: item.rateData.map((val) => {
             return {
               value: val,
-              label: "增长率"
-            }
+              label: "增长率",
+            };
           }),
         };
       });
@@ -108,7 +124,7 @@ export default defineComponent({
                 <span class="${params[1].data.class} title  color_2">${params[1].data.label}</span>
                   <br />
                 <span class="text text-color_2">${params[1].data.value}%</span>
-            </div>`
+            </div>`;
 
             return html;
           },
@@ -122,7 +138,7 @@ export default defineComponent({
           bottom: "3%",
           containLabel: true,
         },
-        yAxis:[
+        yAxis: [
           {
             type: "value",
             name: "金额(亿元)",
@@ -189,7 +205,7 @@ export default defineComponent({
   display: inline-block;
   border-radius: 50%;
 }
-.income-echart .text{
+.income-echart .text {
   padding-left: 20px;
   margin-bottom: 20px;
   font-size: 20px;
@@ -198,11 +214,11 @@ export default defineComponent({
   margin: 0;
 }
 
-.income-echart .text-color_1{
-  color: #4198ff
+.income-echart .text-color_1 {
+  color: #4198ff;
 }
-.income-echart .text-color_2{
-  color: #eca933
+.income-echart .text-color_2 {
+  color: #eca933;
 }
 .income-echart .color_1::before {
   background: #4198ff;
@@ -210,7 +226,6 @@ export default defineComponent({
 .income-echart .color_2::before {
   background: #eca933;
 }
-
 </style>
 
 <style lang="scss" scoped>
@@ -222,7 +237,7 @@ export default defineComponent({
 .incom-distribution {
   flex: 1;
   min-height: 315px;
-  height: calc( 100% - 70px);
+  height: calc(100% - 70px);
   box-sizing: border-box;
   margin-top: 10px;
 }

src/views/dataCenter/industrial/model/IncomDistribution/mock.js

+export default {
+    "typeOne": {
+        seriesData: [{
+            value: [],
+            rateData: [],
+        }],
+
+    },
+    "typeTwo": {
+        seriesData: [{
+            value: [],
+            rateData: [],
+        }],
+
+    },
+    "typeThree": {
+        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],
+        }],
+    },
+}
\ No newline at end of file

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

@@ -5,8 +5,8 @@
       <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?"亿元":"%"}}
+          <span>{{ item.value || "--" }}</span>
+          {{index === 0?"亿元":"%"}}
         </div>
       </div>
     </div>
@@ -20,14 +20,16 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 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],
-  },
-];
+// const seriesData = [
+//   {
+//     // name: "国防要求建设项目",
+//     type: "level_1",
+//     value: [5204.49, 6029.77, 7633.65, 3545.5],
+//   },
+// ];
 
 const xAxisValue = ["2018年", "2019年", "2020年", "2021上半年"];
 
@@ -76,9 +78,22 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
     optionBar() {
-      const seriesLine = seriesData.map((item) => {
+      const seriesLine = this.seriesData.map((item) => {
         return {
           type: "line",
           itemStyle: {
@@ -90,7 +105,6 @@ export default defineComponent({
           label: {
             show: true,
             position: "top",
-           
           },
           areaStyle: {
             opacity: 0.8,
@@ -114,7 +128,8 @@ export default defineComponent({
         tooltip: {
           trigger: "axis",
           className: "extend-tooltip",
-          formatter: "<span class='title'>{b0}</span>: <br /> <span class='bar-text'>{c0}</span> 亿元",
+          formatter:
+            "<span class='title'>{b0}</span>: <br /> <span class='bar-text'>{c0}</span> 亿元",
         },
         legend: {},
         grid: {

src/views/dataCenter/industrial/model/IncomExtendLine/mock.js

+export default {
+    "typeOne": {
+        seriesData: [{
+            value: [],
+
+        }],
+
+    },
+    "typeTwo": {
+        seriesData: [{
+            value: [],
+
+        }],
+
+    },
+    "typeThree": {
+        seriesData: [{
+            value: [5204.49, 6029.77, 7633.65, 3545.5]
+        }],
+    },
+}
\ No newline at end of file

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

@@ -5,8 +5,8 @@
       <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?"亿元":"%"}}
+          <span>{{ item.value || "--" }}</span>
+          {{index === 0?"亿元":"%"}}
         </div>
       </div>
     </div>
@@ -20,16 +20,18 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 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],
-  },
-];
+// 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],
+//   },
+// ];
 
 const xAxisValue = [
   "杭州",
@@ -90,9 +92,22 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
     optionBar() {
-      const seriesBarList = seriesData.map((item, index) => {
+      const seriesBarList = this.seriesData.map((item, index) => {
         return {
           name: item.name,
           type: "bar",
@@ -109,7 +124,7 @@ export default defineComponent({
         };
       });
 
-      const seriesLineList = seriesData.map((item) => {
+      const seriesLineList = this.seriesData.map((item) => {
         return {
           name: "增长率",
           type: "line",

src/views/dataCenter/industrial/model/Industrial/mock.js

+export default {
+    "typeOne": {
+        seriesData: [{
+            name: "",
+            type: "",
+            echartType: "",
+            barValue: [],
+            growthRate: [],
+        }],
+
+    },
+    "typeTwo": {
+        seriesData: [{
+            name: "",
+            type: "",
+            echartType: "",
+            barValue: [],
+            growthRate: [],
+        }],
+
+    },
+    "typeThree": {
+        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],
+        }],
+    },
+}
\ No newline at end of file

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

@@ -3,7 +3,6 @@
 
   <div class="echarts-search">
     <div class="title">各市产业融合创新指标情况</div>
-    
   </div>
 
   <div id="TargetBar" class="target-bar"></div>
@@ -12,6 +11,8 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
 const xAxisValue = [
   "杭州",
@@ -51,7 +52,20 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType];
+    },
     optionBar() {
       return {
         tooltip: {
@@ -75,7 +89,7 @@ export default defineComponent({
         yAxis: {
           type: "value",
           show: false,
-          max:20
+          max: 20,
         },
         xAxis: {
           type: "category",
@@ -93,7 +107,7 @@ export default defineComponent({
               position: "top",
               // formatter: "{c}亿元"
             },
-            data: [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
+            data: this.seriesData,
           },
         ],
       };
@@ -106,7 +120,6 @@ export default defineComponent({
       mapEcharts.setOption(this.optionBar);
       this.mapEcharts = mapEcharts;
     },
-   
   },
   unmounted() {
     if (!this.mapEcharts) {
@@ -135,7 +148,6 @@ export default defineComponent({
     margin: 10px 0;
     font-size: 14px;
   }
- 
 }
 
 .target-bar {

src/views/dataCenter/industrial/model/TargetBar/mock.js

+export default {
+    "typeOne": [],
+    "typeTwo": [],
+    "typeThree": [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
+
+}
\ No newline at end of file

src/views/dataCenter/innovation/index.vue

@@ -74,6 +74,8 @@ import Industrial from "./model/Industrial/index.vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 import { Aim } from "@element-plus/icons";
+import Mock from "./mock";
+import { mapState } from "vuex";
 const xAxisCity = [
   "杭州",
   "宁波",
@@ -87,9 +89,9 @@ const xAxisCity = [
   "台州",
   "丽水",
 ];
-const cityData = {
-  value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
-};
+// const cityData = {
+//   value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
+// };
 /**
  * 军民协同创新
  */
@@ -116,9 +118,23 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.TargetBars.showLoading();
+      this.TargetBars.setOption(this.optionCity);
+      this.TargetBars.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].cityData;
+    },
     optionCity() {
-      const seriesBar = {
+      const seriesBar = this.seriesData.map((item) => {
+        return {
           type: "bar",
 
           itemStyle: {
@@ -126,13 +142,14 @@ export default defineComponent({
           },
           barWidth: 20,
 
-        data: cityData.value.map((item) => {
+          data: item.value.map((item) => {
             return {
               value: item,
               label: "收入规模",
             };
           }),
         };
+      });
       return {
         tooltip: {
           trigger: "axis",
@@ -170,7 +187,7 @@ export default defineComponent({
           type: "category",
           data: xAxisCity,
         },
-        series: [seriesBar],
+        series: [...seriesBar],
       };
     },
   },

src/views/dataCenter/innovation/mock.js

+export default {
+    "typeOne": {
+        cityData: [{
+            value: [],
+        }]
+    },
+    "typeTwo": {
+        cityData: [{
+            value: [],
+        }]
+    },
+    "typeThree": {
+        cityData: [{
+            value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
+        }]
+    }
+}
\ No newline at end of file

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

@@ -29,6 +29,8 @@ import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 import { Aim } from "@element-plus/icons";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
 // 城市增长率
 const xAxisCity = [
@@ -44,9 +46,9 @@ 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],
-};
+// 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],
+// };
 
 /**
  * 承担军需品情况
@@ -79,9 +81,23 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.enterprises.showLoading();
+      this.enterprises.setOption(this.optionCity);
+      this.enterprises.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].cityData;
+    },
     optionCity() {
-      const seriesBar = {
+      const seriesBar = this.seriesData.map((item) => {
+        return {
           type: "bar",
 
           itemStyle: {
@@ -89,13 +105,18 @@ export default defineComponent({
           },
           barWidth: 20,
 
-        data: cityData.value.map((item) => {
+          data: item.value.map((item) => {
             return {
               value: item,
               label: "收入规模",
             };
           }),
         };
+      });
+
+      // const seriesBar = {
+
+      // };
 
       return {
         tooltip: {
@@ -134,7 +155,7 @@ export default defineComponent({
           type: "category",
           data: xAxisCity,
         },
-        series: [seriesBar],
+        series: [...seriesBar],
       };
     },
   },

src/views/dataCenter/innovation/model/Munitions/mock.js

+export default {
+    "typeOne": {
+        cityData: [{
+            value: [],
+        }]
+    },
+    "typeTwo": {
+        cityData: [{
+            value: [],
+        }]
+    },
+    "typeThree": {
+        cityData: [{
+            value: [79.83, 9.08, 3.4, 11.8, 5.17, 13.95, 4.52, 1.58, 0.18, 3.69, 1.82],
+        }]
+    }
+}
\ No newline at end of file

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

@@ -17,8 +17,10 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
-const SeriesData = [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6];
+// const SeriesData = [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6];
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -50,7 +52,20 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType];
+    },
     optionBar() {
       return {
         tooltip: {
@@ -89,7 +104,7 @@ export default defineComponent({
               position: "top",
             },
             barWidth: 20,
-            data: SeriesData,
+            data: this.seriesData,
           },
         ],
       };

src/views/dataCenter/innovation/model/Outline/mock.js

+export default {
+    "typeOne": [],
+    "typeTwo": [],
+    "typeThree": [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6],
+
+}
\ No newline at end of file

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

@@ -30,14 +30,12 @@ import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 import { Aim } from "@element-plus/icons";
-const xAxisCity = [
-  "2018年",
-  "2019年",
-  "2020年",
-];
-const cityData = {
-  value: [225, 160, 170, ],
-};
+import Mock from "./mock";
+import { mapState } from "vuex";
+const xAxisCity = ["2018年", "2019年", "2020年"];
+// const cityData = {
+//   value: [225, 160, 170],
+// };
 
 /**
  * 全省军民协同创新平台情况——折线图
@@ -58,9 +56,23 @@ export default defineComponent({
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.TargetBar.showLoading();
+      this.TargetBar.setOption(this.optionCity);
+      this.TargetBar.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].cityData;
+    },
     optionCity() {
-      const seriesBar = {
+      const seriesBar = this.seriesData.map((item) => {
+        return {
           type: "bar",
 
           itemStyle: {
@@ -68,13 +80,30 @@ export default defineComponent({
           },
           barWidth: 20,
 
-        data: cityData.value.map((item) => {
+          data: item.value.map((item) => {
             return {
               value: item,
               label: "收入规模",
             };
           }),
         };
+      });
+
+      // const seriesBar = {
+      //   type: "bar",
+
+      //   itemStyle: {
+      //     color: "#4198ff",
+      //   },
+      //   barWidth: 20,
+
+      //   data: cityData.value.map((item) => {
+      //     return {
+      //       value: item,
+      //       label: "收入规模",
+      //     };
+      //   }),
+      // };
       return {
         tooltip: {
           trigger: "axis",
@@ -112,7 +141,7 @@ export default defineComponent({
           type: "category",
           data: xAxisCity,
         },
-        series: [seriesBar],
+        series: [...seriesBar],
       };
     },
   },

src/views/dataCenter/innovation/model/Platform/mock.js

+export default {
+    "typeOne": {
+        cityData: [{
+            value: [],
+        }]
+    },
+    "typeTwo": {
+        cityData: [{
+            value: [],
+        }]
+    },
+    "typeThree": {
+        cityData: [{
+            value: [225, 160, 170],
+        }]
+    }
+}
\ No newline at end of file

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

@@ -19,10 +19,10 @@
       </el-col>
 
       <el-col :span="13">
-        <div class="list-item" v-for="(item, index) in pieList" :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>
-          <span>  {{ item.label }}</span>
+            <span>{{ item.label }}</span>
           </el-row>
           <div class="pie-value">
             {{ item.value }}
@@ -37,70 +37,72 @@
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
 
-const SeriesData = {
-  name: "国防要求建设项目",
-  type: "level_1",
-  value: [
-    37.28, 61.75, 34.54, 8.2, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76,
-  ],
-  rate: [
-    {
-      city: "杭州",
-      value: 49.28,
-    },
-    {
-      city: "宁波",
-      value: 45.7,
-    },
-    {
-      city: "温州",
-      value: 25.68,
-    },
-    {
-      city: "湖州",
-      value: 36.89,
-    },
-    {
-      city: "嘉兴",
-      value: 84.07,
-    },
-    {
-      city: "绍兴",
-      value: 53.85,
-    },
-    {
-      city: "金华",
-      value: 36.05,
-    },
-    {
-      city: "衢州",
-      value: 57.74,
-    },
-    {
-      city: "舟山",
-      value: 56.43,
-    },
+// const SeriesData = {
+//   name: "国防要求建设项目",
+//   type: "level_1",
+//   value: [
+//     37.28, 61.75, 34.54, 8.2, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76,
+//   ],
+//   rate: [
+//     {
+//       city: "杭州",
+//       value: 49.28,
+//     },
+//     {
+//       city: "宁波",
+//       value: 45.7,
+//     },
+//     {
+//       city: "温州",
+//       value: 25.68,
+//     },
+//     {
+//       city: "湖州",
+//       value: 36.89,
+//     },
+//     {
+//       city: "嘉兴",
+//       value: 84.07,
+//     },
+//     {
+//       city: "绍兴",
+//       value: 53.85,
+//     },
+//     {
+//       city: "金华",
+//       value: 36.05,
+//     },
+//     {
+//       city: "衢州",
+//       value: 57.74,
+//     },
+//     {
+//       city: "舟山",
+//       value: 56.43,
+//     },
 
-    {
-      city: "台州",
-      value: 55.68,
-    },
-    {
-      city: "丽水",
-      value: 32.85,
-    },
-  ],
-};
-const PIE_LIST = [
-  { label: "数字军工(网络、人工智能)", value: 25.17 },
-  { label: "海洋", value: 20.18 },
-  { label: "太空", value: 30.96 },
+//     {
+//       city: "台州",
+//       value: 55.68,
+//     },
+//     {
+//       city: "丽水",
+//       value: 32.85,
+//     },
+//   ],
+// };
+// const PIE_LIST = [
+//   { label: "数字军工(网络、人工智能)", value: 25.17 },
+//   { label: "海洋", value: 20.18 },
+//   { label: "太空", value: 30.96 },
 
-  { label: "生物", value: 10.22 },
-  { label: "核电", value: 5.9 },
-  // { label: "人工智能领域", value: 12.24 },
-];
+//   { label: "生物", value: 10.22 },
+//   { label: "核电", value: 5.9 },
+//   // { label: "人工智能领域", value: 12.24 },
+// ];
 const PieColor = {
   level_1: "#47d6ad",
   level_2: "#6fdef7",
@@ -120,7 +122,7 @@ export default defineComponent({
   setup() {},
   data() {
     return {
-      seriesData: SeriesData,
+      // seriesData: SeriesData,
       mapEcharts: null,
       cirLeftCharts: null,
       cirRightEchart: null,
@@ -131,16 +133,29 @@ export default defineComponent({
           value: "19%",
         },
       ],
-      pieList: PIE_LIST,
+      // pieList: PIE_LIST,
       pieColor: PieColor,
     };
   },
   mounted() {
     this.initEcharts();
   },
+  watch: {
+    seriesData() {
+      this.mapEcharts.showLoading();
+      this.mapEcharts.setOption(this.optionBar);
+      this.mapEcharts.hideLoading();
+    },
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType];
+    },
     optionBar() {
-      const pieData = PIE_LIST.map((item, index) => {
+      const pieData = this.seriesData.map((item, index) => {
         return {
           value: item.value,
           itemStyle: {

src/views/dataCenter/innovation/model/ScientificInvestment/mock.js

+export default {
+    "typeOne": [],
+
+    "typeTwo": [],
+
+    "typeThree": [
+        { label: "数字军工(网络、人工智能)", value: 25.17 },
+        { label: "海洋", value: 20.18 },
+        { label: "太空", value: 30.96 },
+        { label: "生物", value: 10.22 },
+        { label: "核电", value: 5.9 },
+        // { label: "人工智能领域", value: 12.24 },
+    ]
+
+
+}
\ No newline at end of file