1

src/view/echarts/eP2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 220px"></div>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
 </template>
 
 <script setup >
@@ -24,7 +24,7 @@ let option = {
   },
   grid: {
     left: "1%",
-    right: "4%",
+    right: "10%",
     bottom: "3%",
     containLabel: true,
   },

src/view/echarts/eP2_2.vue

@@ -0,0 +1,134 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+  },
+  legend: {
+    // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    top: "8%",
+    right: "15%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    left: "1%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+  },
+
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["1月", "2月", "3月", "4月", "5月"],
+    splitArea: {
+      show: true,
+      interval: '10',
+      areaStyle: {
+        color: ["rgba(255, 255, 255, 0.10)"],
+        width:10,
+      },
+    },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(226, 226, 226, 0.3)",
+        width: 1,
+      },
+    },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  series: [
+    {
+      name: "80-90补贴人次",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
+      data: [120, 132, 101, 134, 90],
+    },
+    {
+      name: "90-98补贴人次",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#E8FF00",
+        borderWidth: 1,
+        color: "#E8FF00",
+      },
+
+      data: [220, 182, 191, 234, 290],
+    },
+    {
+      name: "99以上补贴人次",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#2468FF",
+        borderWidth: 1,
+        color: "#2468FF",
+      },
+
+      data: [150, 232, 201, 154, 190],
+    },
+  ],
+};
+
+// 使用生命钩子
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped>
+</style>

src/view/echarts/eP3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 220px"></div>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
 </template>
 
 <script setup >
@@ -58,7 +58,7 @@ let option = {
   },
   series: [
     {
-      name: "80-90补贴人次",
+      name: "特困补助金额",
       type: "line",
       stack: "Total",
       symbol: "emptyCircle",
@@ -71,23 +71,9 @@ let option = {
       },
       data: [120, 132, 101, 134, 90],
     },
-    {
-      name: "90-98补贴人次",
-      type: "line",
-      stack: "Total",
-      symbol: "emptyCircle",
 
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#E8FF00",
-        borderWidth: 1,
-        color: "#E8FF00",
-      },
-
-      data: [220, 182, 191, 234, 290],
-    },
     {
-      name: "99以上补贴人次",
+      name: "低保补助金额",
       type: "line",
       stack: "Total",
       symbol: "emptyCircle",

src/view/echarts/eP3_2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 220px"></div>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
 </template>
 
 <script setup >
@@ -60,7 +60,7 @@ let option = {
   ],
   series: [
     {
-      name: "职工养老保险发放人次",
+      name: "特困发放人次",
       type: "bar",
       data: [2.0, 4.9, 7.0, 23.2, 25.6],
       showBackground: true,
@@ -81,7 +81,7 @@ let option = {
       },
     },
     {
-      name: "城乡养老保险发放人次",
+      name: "低保发放人次",
       type: "bar",
       data: [2.6, 5.9, 9.0, 26.4, 28.7],
       showBackground: true,

src/view/echarts/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 220px"></div>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
 </template>
 
 <script setup >
@@ -15,7 +15,7 @@ let option = {
   },
   legend: {
     top: "8%",
-    right: "5%",
+    right: "11%",
     textStyle: {
       fontSize: 12,
       color: "#ccc",
@@ -23,8 +23,8 @@ let option = {
   },
   grid: {
     left: "1%",
-    right: "4%",
+    right: "10%",
-    bottom: "3%",
+    bottom: "0%",
     containLabel: true,
   },
   calculable: true,

src/view/echarts/pie2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 220px"></div>
+  <div ref="chart" style="width: 100%; height: 200px"></div>
 </template>
 
 <script setup >
@@ -16,7 +16,7 @@ let option = {
   legend: {
     // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
     top: "8%",
-    right: "15%",
+    right: "11%",
     textStyle: {
       fontSize: 12,
       color: "#ccc",
@@ -24,7 +24,7 @@ let option = {
   },
   grid: {
     left: "1%",
-    right: "4%",
+    right: "10%",
     bottom: "3%",
     containLabel: true,
   },
@@ -58,7 +58,7 @@ let option = {
   },
   series: [
     {
-      name: "80-90补贴人次",
+      name: "职工养老保险金额",
       type: "line",
       stack: "Total",
       symbol: "emptyCircle",
@@ -72,22 +72,7 @@ let option = {
       data: [120, 132, 101, 134, 90],
     },
     {
-      name: "90-98补贴人次",
+      name: "城乡养老保险金额",
-      type: "line",
-      stack: "Total",
-      symbol: "emptyCircle",
-
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#E8FF00",
-        borderWidth: 1,
-        color: "#E8FF00",
-      },
-
-      data: [220, 182, 191, 234, 290],
-    },
-    {
-      name: "99以上补贴人次",
       type: "line",
       stack: "Total",
       symbol: "emptyCircle",

src/view/yl.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="module">
-    <div class="displayFlex">
+    <div class="displayFlex left_bg" >
       <div class="flex1" >
         <div class="yd_title left_1">
           <span class="text">
@@ -31,7 +31,7 @@
         <ePie v-if="leftchoose.first == '1'"></ePie>
         <ePie2 v-else></ePie2>
       </div>
-      <div class="flex1">
+      <div class="flex1" style="margin-top:10px;">
         <div class="yd_title left_2">
           <span class="text">
             <img
@@ -58,9 +58,10 @@
             />
           </span>
         </div>
-        <eP2></eP2>
+        <eP2 v-if="leftchoose.second == '1'"></eP2>
+        <eP2_2 v-else/>
       </div>
-      <div class="flex1">
+      <div class="flex1" style="margin-top:10px;">
         <div class="yd_title left_3">
           <span class="text">
             <img
@@ -212,6 +213,7 @@
 import eBubble from "./echarts/bubble.vue";
 import ePie from "./echarts/pie.vue";
 import eP2 from "./echarts/eP2.vue";
+import eP2_2 from "./echarts/eP2_2.vue";
 import eP3 from "./echarts/eP3.vue";
 import eP3_2 from "./echarts/eP3_2.vue";
 import ePie2 from "./echarts/pie2.vue";
@@ -236,11 +238,11 @@ const change = (name, index) => {
 .displayFlex {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  // flex: 1;
 }
 .flex1 {
-  flex: 1;
+  // flex: 1;
-  padding: 0 28px;
+  // padding: 0 28px;
   box-sizing: border-box;
 }
 .flex2 {
@@ -257,7 +259,7 @@ const change = (name, index) => {
   // background-repeat: no-repeat;
   // background-size: 100% 100%;
   box-sizing: border-box;
-  width: 100%;
+  width: 90%;
   height: 36px;
   position: relative;
   .text {
@@ -346,12 +348,14 @@ const change = (name, index) => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-.text_1_left {
+.left_bg {
-  //   background-image: url(@/assets/images/ylbx_1.png);
+  width:642px;
-  // background-repeat: no-repeat;
+  box-sizing: border-box;
-  // background-size: 100% 100%;
+  padding-left:50px;
-  width: 100px;
+  margin-right:28px;
-  height: 50px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 .basicInformation {
   display: flex;