diff --git a/index.html b/index.html
index bf22dc2..ca0e704 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>公共服务一体化驾驶舱</title>
+    <script src="https://webapi.amap.com/maps?v=2.0&key=92c48d6015b3c1a023a22506c2581e6d"></script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/assets/images/sjfx/gygws.png b/src/assets/images/sjfx/gygws.png
new file mode 100644
index 0000000..5868f9b
Binary files /dev/null and b/src/assets/images/sjfx/gygws.png differ
diff --git a/src/assets/images/sjfx/pxrc.png b/src/assets/images/sjfx/pxrc.png
new file mode 100644
index 0000000..d7ae148
Binary files /dev/null and b/src/assets/images/sjfx/pxrc.png differ
diff --git a/src/view/analyze.vue b/src/view/analyze.vue
index db0c4cf..6d559b6 100644
--- a/src/view/analyze.vue
+++ b/src/view/analyze.vue
@@ -79,12 +79,18 @@
           </div>
         </div>
 
-        <div style="width: 100%; height: 200px; margin: 20px 0">
-          <img
-            src="../assets/images/sjfx/minImg.jpg"
-            style="width: 100%; height: 100%"
-            alt=""
-          />
+        <div class="jypx">
+          <div class="minPieImg2">就业培训</div>
+          <jypx></jypx>
+          <div class="jypx_right">
+            <div class="jypx_right_item" v-for="item in jypxList">
+              <img :src="item.img" alt="" />
+              <div class="jypx_right_item_right">
+                <div class="jypx_name">{{ item.name }}</div>
+                <div class="jypx_value">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="flex1">
@@ -124,7 +130,7 @@
             <i></i>
           </div>
         </div>
-        <img src="@/assets/images/sjfx/map.png" alt="" class="map" />
+       <Map class="map"></Map>
       </div>
     </div>
   </div>
@@ -141,6 +147,7 @@ import {
 } from "vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
+import jypx from "./echart_analyze/jypx.vue";
 import http from "@/utils/request.js";
 import Pie3dMt from "./echart_analyze/pie3dMt.vue";
 import Pie3dMt2 from "./echart_analyze/pie3dMt2.vue";
@@ -153,8 +160,23 @@ import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
 import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
 import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
 import ViewDataimg3 from "@/assets/images/sjfx/sjfx3.png";
-
+import jypx1 from "@/assets/images/sjfx/pxrc.png";
+import jypx2 from "@/assets/images/sjfx/gygws.png";
+import Map from "./echart_analyze/map.vue";
 const showR = ref(false); //loading
+//就业培训
+const jypxList = reactive([
+  {
+    name: "培训人次",
+    value: "5000",
+    img: jypx1,
+  },
+  {
+    name: "公益岗位数",
+    value: "3815",
+    img: jypx2,
+  },
+]);
 const data = reactive({
   datashow: null,
   backgroundImageUrl: ViewDataimg,
@@ -694,4 +716,67 @@ onBeforeUnmount(() => {
     z-index: 2;
   }
 }
+//就业培训
+.jypx {
+  width: 100%;
+  height: 200px;
+  margin: 20px 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.minPieImg2 {
+  position: absolute;
+  width: 137px;
+  height: 20px;
+  background-image: url(@/assets/images/sjfx/minPieT.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  font-size: 16px;
+  color: #ffffff;
+  line-height: 22px;
+  letter-spacing: 4px;
+  top: 185px;
+  left: 25px;
+  z-index: 2;
+}
+.jypx_right {
+  display: flex;
+  flex-direction: column;
+  margin-left: 35px;
+  .jypx_right_item {
+    display: flex;
+    align-items: center;
+    img {
+      width: 70px;
+      height: 60px;
+    }
+    .jypx_right_item_right {
+      margin-left: 15px;
+      .jypx_name {
+        letter-spacing: 1px;
+        font-size: 18px;
+        line-height: 25px;
+      }
+      .jypx_value {
+        font-size: 22px;
+        color: #ffffff;
+        line-height: 30px;
+        letter-spacing: 1px;
+      }
+    }
+  }
+  .jypx_right_item:first-child {
+    margin-bottom: 20px;
+    .jypx_name {
+      color: #00ebff;
+    }
+  }
+  .jypx_right_item:last-child {
+    .jypx_name {
+      color: #a5cdff;
+    }
+  }
+}
 </style>
diff --git a/src/view/echart_analyze/jypx.vue b/src/view/echart_analyze/jypx.vue
new file mode 100644
index 0000000..2835fb3
--- /dev/null
+++ b/src/view/echart_analyze/jypx.vue
@@ -0,0 +1,130 @@
+<template>
+  <div ref="chart" style="width: 60%; height: 180px"></div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  month: [],
+  option: {},
+});
+let datas = [
+  {
+    name: "制造业",
+    value: 36.3,
+  },
+  {
+    name: "服务业",
+    value: 22.8,
+  },
+  {
+    name: "食品医疗",
+    value: 18.7,
+  },
+  {
+    name: "科技",
+    value: 16.4,
+  },
+  {
+    name: "其他",
+    value: 5.8,
+  },
+];
+const getOption = () => {
+  data.option = {
+    title: {
+      // 圆环标题
+      text: "就业率", // 主标题
+      textStyle: {
+        // 主标题样式
+        color: "#fff",
+    
+        fontSize: 16,
+      },
+      left: "24%", // 定位到适合的位置
+      top: "38%", // 定位到适合的位置
+      subtext: `100%`, // 副标题
+      subtextStyle: {
+        // 副标题样式
+        color: "#00FFFB",
+        fontSize: 22,
+        fontWeight: "bold",
+      },
+      textAlign: "center", // 主、副标题水平居中显示
+    },
+    legend: {
+      itemHeight: 8,
+      itemWidth: 8,
+      icon: "rect",
+      orient: "vertical",
+      top: "center",
+      right: "0%",
+      textStyle: {
+        align: "left",
+        color: "#ffffff",
+        verticalAlign: "middle",
+        rich: {
+          name: {
+            width: 80,
+            fontSize: 18,
+          },
+          value: {
+            width: 30,
+            align: "right",
+            fontFamily: "Medium",
+            fontSize: 20,
+          },
+          rate: {
+            width: 20,
+            align: "right",
+            fontSize: 18,
+          },
+        },
+      },
+      data: datas,
+      formatter: (name) => {
+        if (datas.length) {
+          const item = datas.filter((item) => item.name === name)[0];
+          return `{name|${name}}{value| ${item.value}} {rate| %}`;
+        }
+      },
+    },
+    tooltip: {
+      trigger: "item",
+      formatter: "{b}:{d}%",
+    },
+    series: [
+      {
+        name: "",
+        type: "pie",
+        radius: ["45%", "90%"],
+        center: ["25%", "50%"],
+        roseType: "radius",
+        label: {
+          show:false,
+        },
+        data: datas,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>
diff --git a/src/view/echart_analyze/map.vue b/src/view/echart_analyze/map.vue
new file mode 100644
index 0000000..f2a94c5
--- /dev/null
+++ b/src/view/echart_analyze/map.vue
@@ -0,0 +1,45 @@
+<template>
+  <div id="amap-container" class="amap-container" />
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+} from "vue";
+const longAndLat = [108.94703, 34.25943];
+const init = () => {
+  var map = new AMap.Map("amap-container", {
+    // 地图中心位置
+    center: longAndLat,
+    resizeEnable: true,
+    // 主题色
+    mapStyle: "amap://styles/darkblue",
+    // 地图层级
+    zoom: 12,
+  });
+  // 实时路况图层
+  var trafficLayer = new AMap.TileLayer.Traffic({
+    zIndex: 10,
+    zooms: [7, 20],
+  });
+  trafficLayer.setMap(map);
+};
+
+onMounted(() => {
+  init();
+});
+</script>
+<style lang="scss" scoped>
+::v-deep .amap-logo {
+            display: none!important; ;
+     } 
+::v-deep .amap-copyright {
+          bottom:-100px;
+           display: none!important;;
+    }  
+
+</style>
\ No newline at end of file
