fix(资源开放共享): 静态页面

src/layout/head.vue

@@ -121,11 +121,11 @@ export default defineComponent({
         },
         {
           label: "2021年第二季度",
-          value: "typeThree",
+          value: "typeTwo",
         },
         {
           label: "2021第三季度",
-          value: "typeTwo",
+          value: "typeThree",
         },
       ],
       curYearIndex: 1,

src/route/dataCenter.ts

@@ -7,7 +7,8 @@ export enum DataCenterRouter {
     DATA_INDUSTRIAL = "/dataCenter/industrial",
     DATA_ARMY = "/dataCenter/army",
     INNOVATION="/dataCenter/innovation",
-    ConctructSystem="/dataCenter/conctructSystem"
+    ConctructSystem="/dataCenter/conctructSystem",
+    RESORCE_SHARE="/dataCenter/resorceShare"
 }
 
 export default [
@@ -64,6 +65,19 @@ export default [
                 },
                 component: () => import("@/views/dataCenter/innovation/index.vue")
             },
+            {
+                path: DataCenterRouter.RESORCE_SHARE,
+                name: "RESORCESHARE",
+                meta: {
+                    person: {
+                        path: DataCenterRouter.DATA_CENTER,
+                        name: "DataCenter",
+                        label: "数据中心",
+                    },
+                    label: "资源开放共享",
+                },
+                component: () => import("@/views/dataCenter/resourceShare/index.vue")
+            },
             {
                 path: DataCenterRouter.ConctructSystem,
                 name: "ConctructSystem",

src/store/index.tsx

@@ -4,7 +4,7 @@ import { createStore } from 'vuex'
 const store = createStore({
   state () {
     return {
-      curDataType: "typeThree"
+      curDataType: "typeTwo"
     }
   },
   mutations: {

src/views/dataCenter/ConctructSystem/mock.js

@@ -28,7 +28,7 @@ export default {
         ]
 
     },
-    "typeTwo": {
+    "typeThree": {
         industryCardItems: [{
                 label: "国家部委、军委机关批复立项项目",
                 value: 0,
@@ -57,7 +57,7 @@ export default {
         ]
 
     },
-    "typeThree": {
+    "typeTwo": {
         industryCardItems: [{
                 label: "国家部委、军委机关批复立项项目",
                 value: "1113",

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

@@ -5,13 +5,13 @@ export default {
     cityData: []
 
   },
-  "typeTwo": {
+  "typeThree": {
     meetingCount: 0,
 
     cityData: []
 
   },
-  "typeThree": {
+  "typeTwo": {
     meetingCount: 43,
     cityData: [8, 4,1, 4, 4, 1, 2, 6, 3, 2, 6, 6]
   },

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

 export default {
   "typeOne": [],
-  "typeTwo":  [],
-  "typeThree": [14, 15, 10.4, 12, 11, 15, 13, 13, 13, 11, 11.2],
+  "typeThree":  [],
+  "typeTwo": [14, 15, 10.4, 12, 11, 15, 13, 13, 13, 11, 11.2],
 }
\ No newline at end of file

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

@@ -5,13 +5,13 @@ export default {
     cityData: []
 
   },
-  "typeTwo": {
+  "typeThree": {
     meetingCount: 0,
 
     cityData: []
 
   },
-  "typeThree": {
+  "typeTwo": {
     meetingCount: 112,
     cityData: [14, 16, 12,6, 7, 7, 12, 5, 12, 14,7]
   },

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

@@ -7,14 +7,14 @@ export default {
     ]
 
   },
-  "typeTwo":  {
+  "typeThree":  {
     cardItems: [{ label: "人员总数", value: 0 }],
     pieList: [
       { label: "专职", value: 0 },
       { label: "兼职", value: 0 },
     ]
   },
-  "typeThree":{
+  "typeTwo":{
     cardItems: [{ label: "人员总数", value: "267" }],
     pieList: [
       { label: "专职", value: 142 },

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

@@ -82,7 +82,7 @@ export default {
             ]
         }
     },
-    "typeTwo": {
+    "typeThree": {
         countryData: {
             // 国防数据
             name: "国防要求建设项目",
@@ -168,7 +168,7 @@ export default {
             ],
         }
     },
-    "typeThree": {
+    "typeTwo": {
         countryData: {
             // 国防数据
             name: "国防要求建设项目",

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

@@ -9,7 +9,7 @@ export default {
             rate: [],
         }
     },
-    "typeTwo": {
+    "typeThree": {
         seriesData: [{
             value: [107.32, 157.51, 172.11],
             rate: ["", 42.17, 21.19],
@@ -19,7 +19,7 @@ export default {
             rate: [18.59, 31.72, 15.38, 34.21, 18.69, 118.83, 55.81, 0.73, 1.81, -4.57, 36.35],
         }
     },
-    "typeThree": {
+    "typeTwo": {
         seriesData: [{
             value: [107.32, 157.51, 172.11],
             rate: ["", 42.17, 21.19],

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

@@ -15,7 +15,7 @@ export default {
             rate: [0.5, 0.4, 0.5, 1, 0.5, 0.2, 0.6, 0.9, 0.8, 1, 0.6],
         }]
     },
-    "typeTwo": {
+    "typeThree": {
         info:[{
             label: "入伍总人数",
             value: 0,
@@ -31,7 +31,7 @@ export default {
             rate: [],
         }]
     },
-    "typeThree": {
+    "typeTwo": {
         info:[{
             label: "入伍总人数",
             value: "1470",

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

@@ -69,7 +69,7 @@ export default {
             },
         ],
     },
-    "typeTwo": {
+    "typeThree": {
         info: [{
             label: "民口单位军品收入",
             value:0,
@@ -139,7 +139,7 @@ export default {
             },
         ],
     },
-    "typeThree": {
+    "typeTwo": {
         info: [{
             label: "民口单位军品收入",
             value: 53.35,

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

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

src/views/dataCenter/industrial/mock.js

@@ -19,7 +19,7 @@ export default {
             },
         ],
     },
-    "typeTwo": {
+    "typeThree": {
         industryCardItems: [{
                 label: "国防科技工业产值总量",
                 value: 1656.9
@@ -39,7 +39,7 @@ export default {
             },
         ],
     },
-    "typeThree": {
+    "typeTwo": {
         industryCardItems: [{
                 label: "国防科技工业产值总量",
                 value: "1113.4"

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

@@ -39,7 +39,7 @@ export default {
             },
         ]
     },
-    "typeTwo": {
+    "typeThree": {
         incomCount: 5421.69,
 
         seriesData: [{
@@ -71,7 +71,7 @@ export default {
             value: 579.36
         }, ]
     },
-    "typeThree": {
+    "typeTwo": {
         incomCount: 3532.82,
         seriesData: [{
                 label: "数字军工(网络、人工智能)领域",

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

@@ -6,14 +6,14 @@ export default {
         }],
 
     },
-    "typeTwo": {
+    "typeThree": {
         seriesData: [{
             value: [2433.92, 1063.99, 105.95, 195.74, 583.98, 576.44, 181.04, 63.51, 10.12, 147.99, 59],
             rateData: [20.53, 28.54, 3.22,30.44,27.98,24.95,46.74,12.95,-3.72,12.25,41.31],
         }],
 
     },
-    "typeThree": {
+    "typeTwo": {
         seriesData: [{
             name: "主营业务收入",
             type: "level_1",

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

@@ -6,13 +6,13 @@ export default {
         }],
 
     },
-    "typeTwo": {
+    "typeThree": {
         seriesData: [{
             value: [5204.49, 6029.77, 7633.65, 3545.5]
         }],
 
     },
-    "typeThree": {
+    "typeTwo": {
         seriesData: [{
             value: [5204.49, 6029.77, 7633.65, 3545.5]
         }],

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

@@ -9,7 +9,7 @@ export default {
         }],
 
     },
-    "typeTwo": {
+    "typeThree": {
         seriesData: [{
             name: "产值规模",
             type: "level_2",
@@ -19,7 +19,7 @@ export default {
         }],
 
     },
-    "typeThree": {
+    "typeTwo": {
         seriesData: [{
             name: "产值规模",
             type: "level_2",

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],
+    "typeThree": [],
+    "typeTwo": [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
 
 }
\ No newline at end of file

src/views/dataCenter/innovation/mock.js

@@ -6,7 +6,7 @@ export default {
             value: [],
         }]
     },
-    "typeTwo": {
+    "typeThree": {
         count: 155,
 
         cityData: [{
@@ -14,7 +14,7 @@ export default {
 
         }]
     },
-    "typeThree": {
+    "typeTwo": {
         count: 155,
         cityData: [{
             value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],

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

@@ -6,13 +6,13 @@ export default {
         }]
     },
 
-    "typeTwo": {
+    "typeThree": {
         money: 215.1,
         cityData: [{
             value: [129.12, 14.02, 5.57, 7.27, 19.89, 19.71, 8.07, 2.43, 0.29, 5.85, 2.89],
         }]
     },
-    "typeThree": {
+    "typeTwo": {
         money: 135.03,
         cityData: [{
             value: [79.83, 9.08, 3.4, 11.8, 5.17, 13.95, 4.52, 1.58, 0.18, 3.69, 1.82],

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],
+    "typeThree": [],
+    "typeTwo": [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/mock.js

@@ -5,13 +5,13 @@ export default {
             value: [130, 133, 139],
         }]
     },
-    "typeTwo": {
+    "typeThree": {
         count: 139,
         cityData: [{
             value: [130, 133, 139],
         }]
     },
-    "typeThree": {
+    "typeTwo": {
         count: 139,
         cityData: [{
             value: [130, 133, 139],

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

@@ -32,7 +32,7 @@ export default {
         ]
     },
 
-    "typeTwo": {
+    "typeThree": {
         cardItems: [{
                 label: "联合科研攻关投入金额",
                 value: 136.85
@@ -65,7 +65,7 @@ export default {
         ]
     },
 
-    "typeThree": {
+    "typeTwo": {
         cardItems: [{
                 label: "联合科研攻关投入金额",
                 value: "78.54"

src/views/dataCenter/map/cradMock.js

@@ -11,7 +11,7 @@ export default {
             { label: "军地需求对接活动数量", value: "56", unit: "个" },
           ],
     },
-    "typeTwo": {
+    "typeThree": {
         list: [
             { label: "领跑产品（技术）", value: 155, unit: "个" },
             { label: "军地协同创新平台", value: 139, unit: "个" },
@@ -23,7 +23,7 @@ export default {
             { label: "军地需求对接活动数量", value:56, unit: "个" },
           ],
     },
-    "typeThree": {
+    "typeTwo": {
         list: [
             { label: "领跑产品（技术）", value: 155, unit: "个" },
             { label: "军地协同创新平台", value: 139, unit: "个" },

src/views/dataCenter/map/index.vue

@@ -28,7 +28,10 @@
     /></el-col>
     <el-col class="card-item"><Industrial /></el-col>
     <el-col class="card-item"
-      ><CardItem :infoList="list2x" title="资源开放共享"
+      ><CardItem
+        :infoList="list2x"
+        title="资源开放共享"
+        :toPage="dataCenterRouter.RESORCE_SHARE"
     /></el-col>
     <el-col class="card-item"><SystemConstruct /></el-col>
   </div>
@@ -49,7 +52,6 @@ import { DataCenterRouter } from "@/route/dataCenter";
 import Mock from "./cradMock";
 import { mapState } from "vuex";
 
-
 export default defineComponent({
   components: {
     Performance,
@@ -78,7 +80,6 @@ export default defineComponent({
   data() {
     return {
       dataCenterRouter: DataCenterRouter,
-     
     };
   },
 });

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

@@ -12,7 +12,9 @@
       <el-col :span="14"> {{ item.label }}</el-col>
       <el-col :span="10">
         <el-row align="middle" justify="end">
-          <span class="font-size20 color-pramiry">{{ item.value || "--" }}</span>
+          <span class="font-size20 color-pramiry">{{
+            item.value || "--"
+          }}</span>
           <span class="font-size12 color-999">{{ item.unit }}</span>
         </el-row>
       </el-col>
@@ -44,8 +46,10 @@ export default defineComponent({
     MapTitle,
   },
   setup() {},
+
   methods: {
     detailsHandle() {
+      console.log("===", this.toPage);
       this.toPage && this.$router.push(this.toPage);
     },
   },

src/views/dataCenter/map/model/CardList/industrialMcok.js

@@ -14,7 +14,7 @@ export default {
             valueUnit: "亿元",
         },
     ],
-    "typeTwo": [{
+    "typeThree": [{
             title: "军民融合主营业务收入",
             rate: "23.75",
             value: "5421.69",
@@ -29,7 +29,7 @@ export default {
             valueUnit: "亿元",
         },
     ],
-    "typeThree": [{
+    "typeTwo": [{
             title: "军民融合主营业务收入",
             rate: "31.5%",
             value: "3545.5",

src/views/dataCenter/map/model/CardList/strongArmyMock.js

@@ -20,7 +20,7 @@ export default {
         enlistVal: 1470,
         enlistRateVal: "0.5%"
     },
-    "typeTwo": {
+    "typeThree": {
         // 贯彻国防要求的建设项目
         country: [{
             label: "贯彻国防要求的建设项目",
@@ -41,7 +41,7 @@ export default {
         enlistVal: 1470,
         enlistRateVal: 0.5
     },
-    "typeThree": {
+    "typeTwo": {
         // 贯彻国防要求的建设项目
         country: [{
             label: "贯彻国防要求的建设项目",

src/views/dataCenter/map/model/CardList/systemConstructMock.js

@@ -5,13 +5,13 @@ export default {
         fullTime: 142, // 专职
         partTime: 125 // 兼职
     },
-    "typeTwo": {
+    "typeThree": {
         meetingCount: 43, // 各地召开融委全体会议次数
         workeCount: 93, // 与当地军分区（警备区）建立并落实军地协作工作机制
         fullTime: 142, // 专职
         partTime: 125 // 兼职
     },
-    "typeThree": {
+    "typeTwo": {
         meetingCount: 43, // 各地召开融委全体会议次数
         workeCount: 93, // 与当地军分区（警备区）建立并落实军地协作工作机制
         fullTime: 142, // 专职

src/views/dataCenter/map/model/Income/mock.js

@@ -15,7 +15,7 @@ export default {
         growthRate: ["",60,80],
       },
       ],
-    "typeTwo": [
+    "typeThree": [
         {
           name: "国防科工军品收入",
           type: "level_1",
@@ -31,7 +31,7 @@ export default {
           growthRate: ["",60,80],
         },
       ],
-    "typeThree": [
+    "typeTwo": [
         {
           name: "国防科工军品收入",
           type: "level_1",

src/views/dataCenter/map/model/InvestmentProgress/mock.js

@@ -8,7 +8,7 @@ export default {
         growthRate: [],
       },
     ],
-    "typeTwo": [
+    "typeThree": [
       {
         name: "投资金额",
         type: "level_2",
@@ -17,7 +17,7 @@ export default {
         growthRate: [],
       },
     ],
-    "typeThree": [
+    "typeTwo": [
       {
         name: "投资金额",
         type: "level_2",

src/views/dataCenter/map/model/Performance/mock.js

@@ -29,7 +29,7 @@ export default {
       value: [],
     },
   ],
-  "typeTwo": [{
+  "typeThree": [{
       name: "服务强军兴军",
       type: "level_1",
       value: [],
@@ -59,7 +59,7 @@ export default {
       value: [],
     },
   ],
-  "typeThree": [{
+  "typeTwo": [{
       name: "服务强军兴军",
       type: "level_1",
       value: [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19],

src/views/dataCenter/map/model/RankList/mock.js

 export default {
   "typeOne": [],
-  "typeTwo": [],
-    "typeThree": [
+  "typeThree": [],
+    "typeTwo": [
         {
           name: "南湖区",
           score: 69.5,

src/views/dataCenter/resourceShare/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>
+    </el-col>
+    <el-col :span="16">
+      <el-row class="map-right card-item">
+        <el-col :span="12">
+          <IncomExtendLine
+            echartsId="activityBar"
+            echartsTitle="军地需求对接活动情况"
+            echartsDesText="活动分布情况"
+            :cardItems="extendCardItems"
+          />
+        </el-col>
+        <el-col :span="11" :offset="1">
+          <IncomDistribution />
+        </el-col>
+      </el-row>
+    </el-col>
+  </el-row>
+
+  <!-- foot -->
+  <el-row class="footer-warpper" :gutter="16">
+    <el-col class="map-right" :span="16">
+      <div class="footer-item card-item">
+        <BusinessIncome />
+      </div>
+    </el-col>
+
+    <el-col class="map-left" :span="8">
+      <div class="business-extend footer-item card-item">
+        <Industrial
+          echartsId="industryDistribute"
+          echartsTitle="军工科研设备设施开放共享情况"
+          :cardItems="industryCardItems"
+        />
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import TargetBar from "./model/TargetBar/index.vue";
+import IncomExtendLine from "./model/IncomExtendLine/index.vue";
+import IncomDistribution from "./model/IncomDistribution/index.vue";
+import BusinessIncome from "./model/BusinessIncome/index.vue";
+import Industrial from "./model/Industrial/index.vue";
+
+import Mock from "./mock";
+import { mapState } from "vuex";
+
+/**
+ * 资源共享
+ */
+export default defineComponent({
+  components: {
+    TargetBar,
+    IncomExtendLine,
+    IncomDistribution,
+    BusinessIncome,
+    Industrial,
+  },
+  setup() {},
+   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    industryCardItems() {
+      return Mock[this.curDataType].industryCardItems;
+    },
+    extendCardItems() {
+      return Mock[this.curDataType].extendCardItems;
+    },
+   },
+  data() {
+    return {
+     
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.card-item {
+  background: #fff;
+  border-radius: 5px;
+  padding: 16px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 2px 2px 10px #eee;
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.map-warpper {
+  box-sizing: border-box;
+  .map-right {
+    padding-bottom: 0;
+  }
+}
+.footer-warpper {
+  margin-top: 20px;
+  .business-extend {
+    min-height: 430px;
+    height: 100%;
+  }
+}
+</style>

src/views/dataCenter/resourceShare/mock.js

+export default {
+    "typeOne": {
+        industryCardItems: [{
+                label: "国防科技工业产值总量",
+                value: 0
+            },
+            {
+                label: "国防科技工业产值总量增长率",
+                value: 0,
+            },
+        ],
+        extendCardItems: [{
+                label: "参与军民融合产业互动的规模以上企业主营业务收入",
+                value: "7633.65",
+            },
+            {
+                label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
+                value: "26.6",
+            },
+        ],
+    },
+    "typeThree": {
+        industryCardItems: [{
+                label: "国防科技工业产值总量",
+                value: 1656.9
+            },
+            {
+                label: "国防科技工业产值总量增长率",
+                value: 19
+            },
+        ],
+        extendCardItems: [{
+                label: "参与军民融合产业互动的规模以上企业主营业务收入",
+                value: "5421.69",
+            },
+            {
+                label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
+                value: "23.75",
+            },
+        ],
+    },
+    "typeTwo": {
+        industryCardItems: [{
+                label: "国防科技工业产值总量",
+                value: "1113.4"
+            },
+            {
+                label: "国防科技工业产值总量增长率",
+                value: "22.8",
+            },
+        ],
+        extendCardItems: [{
+                label: "参与军民融合产业互动的规模以上企业主营业务收入",
+                value: "3545.5",
+            },
+            {
+                label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
+                value: "31.5",
+            },
+        ],
+    }
+
+}
\ No newline at end of file

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

+<template>
+  <MapTitle text="军民资源共享信息平台情况" />
+  <div class="describes">
+    <div class="meeting">
+      <div>军民资源共享信息平台数量</div>
+      <div class="frequency">
+        {{ seriesData[0].count || "--" }}
+        <span class="second">个</span>
+      </div>
+    </div>
+
+    <div class="text">军民资源共享信息平台分布情况</div>
+  </div>
+
+  <div id="numPlatforms" class="platform-bar-echarts-line"></div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
+
+let MAP_ECHARTS = null;
+
+const xAxisCity = [
+  "杭州",
+  "宁波",
+  "温州",
+  "湖州",
+  "嘉兴",
+  "绍兴",
+  "金华",
+  "衢州",
+  "舟山",
+  "台州",
+  "丽水",
+];
+
+/**
+ * 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 折线图
+ */
+export default defineComponent({
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      mapEcharts: null,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  watch: {
+    seriesData() {
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
+    },
+  },
+  computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
+    optionBar() {
+      const seriesBar = this.seriesData.map((item) => {
+        return {
+          type: "bar",
+
+          itemStyle: {
+            color: "#634cf0",
+          },
+          barWidth: 20,
+
+          data: item.value.map((item) => {
+            return {
+              value: item,
+              label: "收入规模",
+            };
+          }),
+        };
+      });
+
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: (params) => {
+            let html = ``;
+
+            html += `<div class="munition-echart ">
+                <span class=" title color_1">${params[0].axisValue}市</span>
+                <br />
+                <span class="text text-color_1">${params[0].data.value}</span>个
+               </div>
+             `;
+
+            return html;
+          },
+        },
+        legend: {},
+        grid: {
+          top: "12%",
+          left: "2%",
+          right: "2%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          name: "数量(个)",
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisCity,
+        },
+        series: [...seriesBar],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById("numPlatforms");
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+<style>
+.munition-echart {
+  width: 60px;
+}
+.munition-echart .name {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+.munition-echart .title {
+  padding-left: 10px;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+  position: relative;
+}
+.munition-echart .title::before {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  content: " ";
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+}
+.munition-echart .text {
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+.munition-echart .text:last-of-type {
+  margin: 0;
+}
+.munition-echart .text-color_1 {
+  color: #4198ff;
+}
+.munition-echart .color_1::before {
+  background: #4198ff;
+}
+</style>
+<style lang="scss" scoped>
+.platform-bar-echarts-line {
+  flex: 1;
+  height: calc(100% - 140px);
+  box-sizing: border-box;
+}
+.describes {
+  margin: 0 10px;
+  height: 100px;
+  box-sizing: border-box;
+  .meeting {
+    height: 50px;
+    line-height: 50px;
+    border-radius: 4px;
+    color: #666666;
+    background: rgba(248, 249, 251, 1);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px 0 10px;
+    box-sizing: border-box;
+    margin-top: 10px;
+    .frequency {
+      color: rgba(65, 152, 255, 1);
+      font-weight: 500;
+    }
+      .second{
+      color: #999;
+    }
+  }
+  .text {
+    color: #4198ff;
+    margin-top: 10px;
+    font-size: 14px;
+  }
+}
+</style>

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

+export default {
+    "typeOne": {
+        seriesData: [{
+            value: [5204.49, 6029.77, 7633.65, 3545.5]
+
+        }],
+
+    },
+    "typeThree": {
+        seriesData: [{
+            count: 0,
+            value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+        }],
+
+    },
+    "typeTwo": {
+        seriesData: [{
+            count: 222,
+            value: [43, 25, 16, 16, 28, 26, 15, 17, 8, 16, 12]
+        }],
+    },
+}
\ No newline at end of file

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

+<template>
+  <div class="describes">
+    <div class="meeting">
+      <div>合同成交总额</div>
+      <div class="frequency">
+        {{ seriesData[0].count || "--" }}
+        <span class="second">亿元</span>
+      </div>
+    </div>
+
+    <div class="text">合同成交额分布情况</div>
+  </div>
+
+  <el-row class="echart-foot">
+    <el-col :span="13"
+      ><div id="incomDistribution" class="incom-distribution"></div
+    ></el-col>
+    <el-col :span="11">
+      <div class="list-item-wrapper">
+        <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>
+          </el-row>
+
+          <div class="pie-value">
+            {{ item.value || "--" }}
+            <span>万元</span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
+
+let MAP_ECHARTS = null;
+const PieColor = {
+  level_1: "#6fdef7",
+  level_2: "#9cbcfa",
+  level_3: "#1781df",
+  level_4: "#ffa741",
+  level_5: "#47d6ad",
+  level_6: "#f78a77",
+  level_7: "#8a8aa8",
+  level_8: "#3bb4a6",
+  level_9: "#634cf0",
+  level_10: "#ffcf3c",
+  level_11: "#b470fc",
+};
+
+/**
+ * 合同成交总额
+ */
+export default defineComponent({
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      mapEcharts: null,
+      pieColor: PieColor,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  watch: {
+    seriesData() {
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
+    },
+  },
+  computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
+    optionBar() {
+      const seriesBar = {
+        type: "pie",
+        radius: [20, 140],
+        center: ["25%", "50%"],
+        roseType: "radius",
+        itemStyle: {
+          borderRadius: 5,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: false,
+          },
+        },
+        data: this.seriesData.map((valItem, index) => {
+          return {
+            value: valItem.value,
+            label: valItem.label,
+            itemStyle: {
+              color: PieColor[`level_${index + 1}`],
+            },
+            tooltip: {
+              borderColor: "none",
+              className: "business-pie-tooltip",
+              formatter: `<div class="business-pie-tooltip">
+                <span class='title'>${valItem.label}</span>：
+                 <br /> 
+                 <div class='pie-text'>
+                  <span>${valItem.value}</span>万元
+                 </div>
+              </div>`,
+            },
+          };
+        }),
+      };
+
+      return {
+        tooltip: {
+          trigger: "item",
+        },
+
+        grid: {
+          left: "10%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        series: [seriesBar],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById("incomDistribution");
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+
+<style>
+.business-pie-tooltip .title {
+  color: #333;
+  font-weight: bold;
+}
+.business-pie-tooltip .pie-text {
+  padding-left: 10px;
+  margin-top: 5px;
+  font-size: 12px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+}
+.business-pie-tooltip .pie-text span {
+  color: #4198ff;
+  margin-right: 5px;
+  font-size: 16px;
+}
+</style>
+
+<style lang="scss" scoped>
+.describes {
+  margin: 30px 0 10px 0;
+  height: 100px;
+  box-sizing: border-box;
+  .meeting {
+    height: 50px;
+    line-height: 50px;
+    border-radius: 4px;
+    color: #666666;
+    background: rgba(248, 249, 251, 1);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px 0 10px;
+    box-sizing: border-box;
+    margin-top: 10px;
+    .frequency {
+      color: rgba(65, 152, 255, 1);
+      font-weight: 500;
+    }
+    .second{
+      color: #999;
+    }
+  }
+  .text {
+    color: #4198ff;
+    margin-top: 10px;
+    font-size: 14px;
+  }
+}
+.echart-foot {
+  flex: 1;
+  height: 100%;
+  .list-item-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+    .list-item {
+      width: 120px;
+      margin-bottom: 15px;
+      border-radius: 5px;
+      box-sizing: border-box;
+      .el-row {
+        font-size: 14px;
+        color: #333;
+      }
+      .pie-value {
+        // margin-top: 5px;
+        padding-left: 20px;
+        font-size: 12px;
+        color: #999;
+        display: flex;
+        align-items: center;
+        color: #4198ff;
+        font-size: 18px;
+        span {
+          font-size: 12px;
+          color: rgba(153, 153, 153, 1);
+        }
+      }
+      .square {
+        width: 8px;
+        height: 8px;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+.incom-distribution {
+  height: 335px;
+  width: 500px;
+  box-sizing: border-box;
+}
+</style>

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

+export default {
+    "typeOne": {
+
+
+    },
+
+    "typeThree": {
+
+        seriesData: [{
+            label: "杭州市",
+            value: 0
+        },
+        {
+            label: "宁波市",
+            value: 0
+        },
+        {
+            label: "温州市",
+            value: 0
+        },
+        {
+            label: "湖州市",
+            value: 0
+        },
+        {
+            label: "嘉兴市",
+            value: 0
+        },
+        {
+            label: "绍兴市",
+            value: 0
+        }, {
+            label: "金华市",
+            value: 0
+        }, {
+            label: "衢州市",
+            value: 0
+        }, {
+            label: "舟山市",
+            value: 0
+        }, {
+            label: "台州市",
+            value: 0
+        }, {
+            label: "丽水市",
+            value: 0
+        },
+        ]
+    },
+
+    "typeTwo": {
+        seriesData: [{
+            label: "杭州市",
+            value: 14348.7
+        },
+        {
+            label: "宁波市",
+            value: 11374.5
+        },
+        {
+            label: "温州市",
+            value: 2500
+        },
+        {
+            label: "湖州市",
+            value: 11374.5
+        },
+        {
+            label: "嘉兴市",
+            value: 3248
+        },
+        {
+            label: "绍兴市",
+            value: 7300
+        }, {
+            label: "金华市",
+            value: 2560
+        }, {
+            label: "衢州市",
+            value: 4306
+        }, {
+            label: "舟山市",
+            value: 2600
+        }, {
+            label: "台州市",
+            value: 2500
+        }, {
+            label: "丽水市",
+            value: 3334
+        },
+        ]
+    }
+
+
+}
\ No newline at end of file

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

+<template>
+  <MapTitle :text="echartsTitle" />
+  <div class="describes">
+    <div class="meeting">
+      <div>军地需求对接活动数量</div>
+      <div class="frequency">
+        {{ seriesData[0].count || "--" }}
+        <span class="second">次</span>
+      </div>
+    </div>
+
+    <div class="text">{{ echartsDesText }}</div>
+  </div>
+
+  <div :id="echartsId" class="bar-echarts-line"></div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
+
+let MAP_ECHARTS = null;
+
+const xAxisCity = [
+  "杭州",
+  "宁波",
+  "温州",
+  "湖州",
+  "嘉兴",
+  "绍兴",
+  "金华",
+  "衢州",
+  "舟山",
+  "台州",
+  "丽水",
+];
+
+/**
+ * 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 折线图
+ */
+export default defineComponent({
+  props: {
+    echartsTitle: {
+      type: String,
+      required: true,
+    },
+    echartsDesText: {
+      type: String,
+      required: true,
+    },
+    cardItems: {
+      type: Array,
+      required: true,
+      dafault: () => [],
+    },
+    echartsData: {
+      type: Array,
+      // required: true,
+      dafault: () => [],
+    },
+    echartsAxisValue: {
+      type: Array,
+      // required: true,
+      dafault: () => [],
+    },
+    echartsId: {
+      type: String,
+      required: true,
+    },
+  },
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      mapEcharts: null,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  watch: {
+    seriesData() {
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
+    },
+  },
+  computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
+    optionBar() {
+      const seriesBar = this.seriesData.map((item) => {
+        return {
+          type: "bar",
+
+          itemStyle: {
+            color: "#4198ff",
+          },
+          barWidth: 20,
+
+          data: item.value.map((item) => {
+            return {
+              value: item,
+              label: "收入规模",
+            };
+          }),
+        };
+      });
+
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: (params) => {
+            let html = ``;
+
+            html += `<div class="munition-echart ">
+                <span class=" title color_1">${params[0].axisValue}市</span>
+                <br />
+                <span class="text text-color_1">${params[0].data.value}</span>次
+               </div>
+             `;
+
+            return html;
+          },
+        },
+        legend: {},
+        grid: {
+          top: "10%",
+          left: "2%",
+          right: "2%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          name: "数量(次)",
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisCity,
+        },
+        series: [...seriesBar],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById(this.echartsId);
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+<style>
+.munition-echart {
+  width: 60px;
+}
+.munition-echart .name {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+.munition-echart .title {
+  padding-left: 10px;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+  position: relative;
+}
+.munition-echart .title::before {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  content: " ";
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+}
+.munition-echart .text {
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+.munition-echart .text:last-of-type {
+  margin: 0;
+}
+.munition-echart .text-color_1 {
+  color: #4198ff;
+}
+.munition-echart .color_1::before {
+  background: #4198ff;
+}
+</style>
+<style lang="scss" scoped>
+.bar-echarts-line {
+  flex: 1;
+  height: calc(100% - 150px);
+  box-sizing: border-box;
+}
+.describes {
+  margin: 0 10px;
+  height: 100px;
+  box-sizing: border-box;
+  .meeting {
+    height: 50px;
+    line-height: 50px;
+    border-radius: 4px;
+    color: #666666;
+    background: rgba(248, 249, 251, 1);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px 0 10px;
+    box-sizing: border-box;
+    margin-top: 10px;
+    .frequency {
+      color: rgba(65, 152, 255, 1);
+      font-weight: 500;
+    }
+    .second{
+      color: #999;
+    }
+  }
+  .text {
+    color: #4198ff;
+    margin-top: 10px;
+    font-size: 14px;
+  }
+}
+</style>

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

+export default {
+    "typeOne": {
+        seriesData: [{
+            value: [5204.49, 6029.77, 7633.65, 3545.5]
+
+        }],
+
+    },
+    "typeThree": {
+        seriesData: [{
+            count:0,
+            value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+        }],
+
+    },
+    "typeTwo": {
+        seriesData: [{
+            count:45,
+            value: [3, 5, 3, 5, 4, 7, 2, 3,5, 7, 1]
+        }],
+    },
+}
\ No newline at end of file

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

+<template>
+  <MapTitle :text="echartsTitle" />
+
+  <div :id="echartsId" class="incom-echarts-line"></div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+import Mock from "./mock";
+import { mapState } from "vuex";
+
+let MAP_ECHARTS = null;
+
+const xAxisValue = ["2018年", "2019年", "2020年", "2021年"];
+
+/**
+ *
+ */
+export default defineComponent({
+  props: {
+    echartsTitle: {
+      type: String,
+      required: true,
+    },
+    echartsId: {
+      type: String,
+      required: true,
+    },
+  },
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      mapEcharts: null,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  watch: {
+    seriesData() {
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
+    },
+  },
+  computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType].seriesData;
+    },
+    optionBar() {
+      const seriesBarList = this.seriesData.map((item, index) => {
+        return {
+          type: "bar",
+          itemStyle: {
+            color: "#4198FF",
+          },
+           label: {
+              show: true,
+              position: "right",
+            },
+          barWidth: 18,
+          data: item.value.map((barItem, barIndex) => {
+            return {
+              value: barItem,
+            };
+          }),
+        };
+      });
+
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          className: "incom-echart-tooltip",
+          formatter: (params) => {
+            let html = `<span class="name">${params[0].axisValue}</span>`;
+            html += `<div class="incom-echart-tooltip ">
+                <span class="text text-color_1">${params[0].data.value}</span>个
+               </div>`;
+
+            return html;
+          },
+        },
+        grid: {
+          left: "2%",
+          right: "10%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        legend: {
+          right: "2%",
+        },
+        yAxis: {
+          type: "category",
+          data: xAxisValue,
+        },
+        xAxis: {
+          type: "value",
+        },
+        series: [...seriesBarList],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById(this.echartsId);
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+<style>
+.incom-echart-tooltip {
+  width: 80px;
+}
+.incom-echart-tooltip .name {
+    padding-left: 10px;
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+   position: relative;
+}
+.incom-echart-tooltip .name::before {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  content: " ";
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+  background: #4198ff;
+
+}
+.incom-echart-tooltip .text {
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+.incom-echart-tooltip .text:last-of-type {
+  margin: 0;
+}
+.incom-echart-tooltip .text-color_1 {
+  color: #4198ff;
+}
+
+
+</style>
+
+<style lang="scss" scoped>
+.incom-echarts-line {
+  flex: 1;
+  height: calc(100% - 40px);
+  box-sizing: border-box;
+}
+</style>

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

+export default {
+    "typeOne": {
+        seriesData: [{
+            name: "产值规模",
+            type: "level_2",
+            echartType: "bar",
+            value: [],
+        }],
+
+    },
+    "typeThree": {
+        seriesData: [{
+            value: [687, 212, 193, 156],
+        }],
+
+    },
+    "typeTwo": {
+        seriesData: [{
+            value: [687, 212, 193, 156],
+        }],
+    },
+}
\ No newline at end of file

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

+<template>
+  <MapTitle text="资源开放共享创新总览" />
+
+  <div class="echarts-search">
+    <div class="title">各市资源开放共享创新指标情况</div>
+  </div>
+
+  <div id="shareTargetBar" class="target-bar"></div>
+</template>
+<script lang="ts">
+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 = [
+  "杭州",
+  "宁波",
+  "温州",
+  "湖州",
+  "嘉兴",
+  "绍兴",
+  "金华",
+  "衢州",
+  "舟山",
+  "台州",
+  "丽水",
+];
+let MAP_ECHARTS = null;
+/**
+ * 产业融合发展总览——柱状图
+ */
+export default defineComponent({
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      value: 1,
+      options: [
+        { label: "得分情况", value: 1 },
+        { label: "军转民收入及增长率", value: 2 },
+        { label: "规模以上企业收入及增长率", value: 3 },
+        { label: "国防科工产值", value: 4 },
+      ],
+
+      mapEcharts: null,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  watch: {
+    seriesData() {
+      MAP_ECHARTS.showLoading();
+      MAP_ECHARTS.setOption(this.optionBar, true);
+      MAP_ECHARTS.hideLoading();
+    },
+  },
+  computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    seriesData() {
+      return Mock[this.curDataType];
+    },
+    optionBar() {
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {},
+          className: "target-bar-tooltip",
+          formatter:
+            "<span class='title'>{b0}</span>: <br /> <span class='bar-text'>{c0}</span> 分",
+        },
+        legend: {},
+        grid: {
+          top: 0,
+          left: "-5%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          show: false,
+          max: 20,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisValue,
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "#4198ff",
+            },
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "top",
+              // formatter: "{c}亿元"
+            },
+            data: this.seriesData,
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById("shareTargetBar");
+      MAP_ECHARTS = echarts.init(dom);
+      MAP_ECHARTS.setOption(this.optionBar);
+      this.mapEcharts = MAP_ECHARTS;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+<style>
+.target-bar-tooltip .title {
+  color: #333;
+  font-weight: bold;
+}
+.target-bar-tooltip .bar-text {
+  padding-left: 10px;
+  color: #4198ff;
+}
+</style>
+<style lang="scss" scoped>
+.echarts-search {
+  padding-left: 10px;
+  .title {
+    color: #4198ff;
+    margin: 10px 0;
+    font-size: 16px;
+  }
+}
+
+.target-bar {
+  flex: 1;
+  min-height: 250px;
+  height: calc(100% - 50px);
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+</style>

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

+export default {
+    "typeOne": [],
+    "typeThree": [13.2, 14, 10, 10, 14, 12.5, 7.5, 13.5, 10, 12, 10],
+    "typeTwo": [13.2, 14, 10, 10, 14, 12.5, 7.5, 13.5, 10, 12, 10],
+
+}
\ No newline at end of file