1

src/view/echarts/eP2.vue

@@ -14,10 +14,16 @@ let option = {
     trigger: "axis",
   },
   legend: {
-    data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    top: "8%",
+    right: "15%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
-    left: "3%",
+    left: "1%",
     right: "4%",
     bottom: "3%",
     containLabel: true,
@@ -27,28 +33,80 @@ let option = {
     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",
-      data: [120, 132, 101, 134, 90],
+      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],
     },
   ],

src/view/echarts/eP3.vue

@@ -10,49 +10,98 @@ import * as echarts from "echarts";
 const chart = ref(); // 创建DOM引用
 
 let option = {
-
   tooltip: {
-    trigger: 'axis'
+    trigger: "axis",
   },
   legend: {
-    data: ['80-90补贴人次', '90-98补贴人次', '99以上补贴人次']
+    // data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    top: "8%",
+    right: "15%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
-    left: '3%',
+    left: "1%",
-    right: '4%',
+    right: "4%",
-    bottom: '3%',
+    bottom: "3%",
-    containLabel: true
+    containLabel: true,
   },
 
   xAxis: {
-    type: 'category',
+    type: "category",
     // boundaryGap: false,
-    data: ['1月', '2月', '3月', '4月', '5月']
+    data: ["1月", "2月", "3月", "4月", "5月"],
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
   },
   yAxis: {
-    type: 'value'
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(226, 226, 226, 0.3)",
+        width: 1,
+      },
+    },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
   },
   series: [
     {
-      name: '80-90补贴人次',
+      name: "80-90补贴人次",
-      type: 'line',
+      type: "line",
-      stack: 'Total',
+      stack: "Total",
-      data: [120, 132, 101, 134, 90]
+      symbol: "emptyCircle",
-    },
-    {
-      name: '90-98补贴人次',
-      type: 'line',
-      stack: 'Total',
-      data: [220, 182, 191, 234, 290]
-    },
-    {
-      name: '99以上补贴人次',
-      type: 'line',
-      stack: 'Total',
-      data: [150, 232, 201, 154, 190]
-    },
 
-  ]
+      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],
+    },
+  ],
 };
 
 // 使用生命钩子

src/view/echarts/eP3_2.vue

@@ -0,0 +1,126 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 220px"></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: {
+    top: "8%",
+    right: "5%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    left: "1%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+  },
+  calculable: true,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+         splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(226, 226, 226, 0.3)",
+        width: 1,
+      },
+    },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "职工养老保险发放人次",
+      type: "bar",
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      showBackground: true,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(142, 187, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(142, 187, 255, 0.20)",
+          },
+        ]),
+      },
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+    {
+      name: "城乡养老保险发放人次",
+      type: "bar",
+      data: [2.6, 5.9, 9.0, 26.4, 28.7],
+      showBackground: true,
+         itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(23, 237, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(23, 237, 255, 0.20)",
+          },
+        ]),
+      },
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+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/pie.vue

@@ -14,34 +14,68 @@ let option = {
     trigger: "axis",
   },
   legend: {
-    data: ["职工养老保险发放人次", "城乡养老保险发放人次"],
+    top: "8%",
+    right: "5%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
-    left: '3%',
+    left: "1%",
-    right: '4%',
+    right: "4%",
-    bottom: '3%',
+    bottom: "3%",
-    containLabel: true
+    containLabel: true,
   },
   calculable: true,
   xAxis: [
     {
       type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
       data: ["2019", "2020", "2021", "2022", "2023"],
     },
   ],
   yAxis: [
     {
       type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
     },
   ],
   series: [
     {
       name: "职工养老保险发放人次",
       type: "bar",
-      data: [
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
-        2.0, 4.9, 7.0, 23.2, 25.6
-      ],
       showBackground: true,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(142, 187, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(142, 187, 255, 0.20)",
+          },
+        ]),
+      },
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
       },
@@ -49,10 +83,20 @@ let option = {
     {
       name: "城乡养老保险发放人次",
       type: "bar",
-      data: [
+      data: [2.6, 5.9, 9.0, 26.4, 28.7],
-        2.6, 5.9, 9.0, 26.4, 28.7
-      ],
       showBackground: true,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(23, 237, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(23, 237, 255, 0.20)",
+          },
+        ]),
+      },
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
       },

src/view/yl.vue

@@ -5,28 +5,90 @@
         <div class="yd_title left_1">
           <span class="text">
             <img
+              v-if="leftchoose.first == '1'"
               src="@/assets/images/ylbx_1.png"
-              style="width: 130px; height: 30px"
+              style="width: 130px; height: 30px; cursor: pointer"
             />
             <img
-              src="@/assets/images/ylbx_2.png"
+              v-else
-              style="width: 130px; height: 30px"
+              src="@/assets/images/ylbx_1_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('first', '1')"
+            />
+            <img
+              v-if="leftchoose.first == '2'"
+              src="@/assets/images/ylbx_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+            />
+            <img
+              v-else
+              src="@/assets/images/ylbx_2_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('first', '2')"
             />
           </span>
         </div>
-        <ePie></ePie>
+        <ePie v-if="leftchoose.first == '1'"></ePie>
+        <ePie2 v-else></ePie2>
       </div>
       <div class="flex1">
         <div class="yd_title left_2">
-          <!-- <span class="text">基本信息</span> -->
+          <span class="text">
+            <img
+              v-if="leftchoose.second == '1'"
+              src="@/assets/images/gllrbt_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+            />
+            <img
+              v-else
+              src="@/assets/images/gllrbt_1_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('second', '1')"
+            />
+            <img
+              v-if="leftchoose.second == '2'"
+              src="@/assets/images/gllrbt_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+            />
+            <img
+              v-else
+              src="@/assets/images/gllrbt_2_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('second', '2')"
+            />
+          </span>
         </div>
         <eP2></eP2>
       </div>
       <div class="flex1">
         <div class="yd_title left_3">
-          <!-- <span class="text">基本信息</span> -->
+          <span class="text">
+            <img
+              v-if="leftchoose.third == '1'"
+              src="@/assets/images/tkjz_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+            />
+            <img
+              v-else
+              src="@/assets/images/tkjz_1_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('third', '1')"
+            />
+            <img
+              v-if="leftchoose.third == '2'"
+              src="@/assets/images/tkjz_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+            />
+            <img
+              v-else
+              src="@/assets/images/tkjz_2_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('third', '2')"
+            />
+          </span>
         </div>
-        <eP3></eP3>
+        <eP3 v-if="leftchoose.third == '1'"></eP3>
+        <eP3_2 v-else></eP3_2>
       </div>
     </div>
     <div class="displayFlex">
@@ -101,16 +163,20 @@ import eBubble from "./echarts/bubble.vue";
 import ePie from "./echarts/pie.vue";
 import eP2 from "./echarts/eP2.vue";
 import eP3 from "./echarts/eP3.vue";
+import eP3_2 from "./echarts/eP3_2.vue";
 import ePie2 from "./echarts/pie2.vue";
 import eGraph from "./echarts/graph.vue";
 import ePie3d from "./echarts/pie3d.vue";
 import waterBall from "./echarts/waterBall.vue";
 import { ref, onMounted, onBeforeMount } from "vue";
-const leftchoose =ref({
+const leftchoose = ref({
-  first:'1',
+  first: "1",
-  second:'2',
+  second: "1",
-  third:'3'
+  third: "1",
-})
+});
+const change = (name, index) => {
+  leftchoose.value[name] = index;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -144,7 +210,7 @@ const leftchoose =ref({
     font-weight: bold;
     color: #ffffff;
     position: absolute;
-    right: 33px;
+    right: 5px;
     top: 3px;
   }
 }