gx

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 >
@@ -12,13 +12,21 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} <br />{a3}:{c3}",
   },
   legend: {
     data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    top: "8%",
+    right: "15%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
-    left: "3%",
-    right: "4%",
+    left: "1%",
+    right: "10%",
     bottom: "3%",
     containLabel: true,
   },
@@ -27,28 +35,89 @@ 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: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
     {
       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/eP2_2.vue

@@ -0,0 +1,145 @@
+<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",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} <br />{a3}:{c3}",
+  },
+  legend: {
+    data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
+    top: "8%",
+    right: "15%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    left: "1%",
+    right: "10%",
+    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: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+    {
+      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 >
@@ -10,49 +10,94 @@ import * as echarts from "echarts";
 const chart = ref(); // 创建DOM引用
 
 let option = {
-
   tooltip: {
-    trigger: 'axis'
+    trigger: "axis",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
   },
   legend: {
-    data: ['80-90补贴人次', '90-98补贴人次', '99以上补贴人次']
+    data: ["职工养老保险金额", "城乡养老保险金额"],
+    top: "8%",
+    right: "11%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
+    left: "1%",
+    right: "10%",
+    bottom: "3%",
+    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补贴人次',
-      type: 'line',
-      stack: 'Total',
-      data: [120, 132, 101, 134, 90]
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
     },
     {
-      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]
-    },
+      name: "职工养老保险金额",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
 
-  ]
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
+      data: [120, 132, 101, 134, 90],
+    },
+    {
+      name: "城乡养老保险金额",
+      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,167 @@
+<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",
+    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+  },
+  legend: {
+    top: "8%",
+    right: "11%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    left: "1%",
+    right: "10%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  calculable: true,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"],
+    },
+     {
+      axisTick: false,
+      type: "category",
+      data: ["2019", "2020", "2021", "2022", "2023"],
+      axisLabel: {
+        show: false,
+      },
+    },
+
+  ],
+
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+     {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)"
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
+
+  ],
+  series: [
+    {
+      name: "特困补助金额",
+      type: "bar",
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      barWidth: "18%",
+      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)",
+          },
+        ]),
+      },
+    },
+    {
+      name: "低保补助金额",
+      type: "bar",
+      data: [2.6, 5.9, 9.0, 26.4, 28.7],
+      barWidth: "18%",
+      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)",
+          },
+        ]),
+      },
+    },
+    {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      barWidth: 50,
+    },
+  ],
+};
+
+// 使用生命钩子
+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

@@ -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 >
@@ -12,51 +12,146 @@ const chart = ref(); // 创建DOM引用
 let option = {
   tooltip: {
     trigger: "axis",
+    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+    // formatter: function (params) {
+    //   console.log(1111111,params);
+    //   let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
+    //   const result =circle +
+    //       params[0].color +
+    //       `"></span>` +
+    //       params[0].name +
+    //       ": " +
+    //       params[0].value;
+    //   // const result = (title ? title + '<br />' : '') + params[0].name + ': ' + params[0].value;
+    //   return result;
+    // },
   },
   legend: {
-    data: ["职工养老保险发放人次", "城乡养老保险发放人次"],
+    top: "8%",
+    right: "11%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
+    left: "1%",
+    right: "10%",
+    bottom: "0%",
+    containLabel: true,
   },
   calculable: true,
   xAxis: [
     {
       type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
       data: ["2019", "2020", "2021", "2022", "2023"],
     },
+    {
+      axisTick: false,
+      type: "category",
+      data: ["2019", "2020", "2021", "2022", "2023"],
+      axisLabel: {
+        show: false,
+      },
+    },
   ],
+
   yAxis: [
     {
       type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+    {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
     },
   ],
   series: [
     {
       name: "职工养老保险发放人次",
       type: "bar",
-      data: [
-        2.0, 4.9, 7.0, 23.2, 25.6
-      ],
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      barWidth: "18%",
+      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)",
+          },
+        ]),
       },
     },
     {
       name: "城乡养老保险发放人次",
       type: "bar",
-      data: [
-        2.6, 5.9, 9.0, 26.4, 28.7
-      ],
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
+      data: [2.6, 5.9, 9.0, 26.4, 28.7],
+      barWidth: "18%",
+      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)",
+          },
+        ]),
       },
     },
+    {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      barWidth: 50,
+    },
   ],
 };
 

src/view/echarts/pie3d.vue

@@ -14,33 +14,25 @@ const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 2
 
 const pieData = [
     {
-        name: "A", //名称
-        value: 10, //值
+        name: "60-70岁", //名称
+        value: 1012431431, //值
     },
     {
-        name: "B",
-        value: 8,
+        name: "70-80岁",
+        value: 85425345,
     },
     {
-        name: "C",
-        value: 2,
+        name: "80-90岁",
+        value: 2543256,
     },
     {
-        name: "D",
-        value: 6,
+        name: "90-100岁",
+        value: 5432535,
     },
     {
-        name: "E",
-        value: 5,
-    },
-    {
-        name: "F",
-        value: 1,
-    },
-    {
-        name: "G",
-        value: 5
-    },
+        name: "100岁以上",
+        value: 56,
+    }
 ]
 
 const serData = pieData.map((dItem, index) => {
@@ -152,40 +144,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
     //         },
     //         z: function (u, v) {
-    //             return Math.cos(v) > 0 ? -4 : -4;
-    //         },
-    //     },
-    // });
-    // series.push({
-    //     name: 'mouseoutSeries',
-    //     type: 'surface',
-    //     parametric: true,
-    //     wireframe: {
-    //         show: false,
-    //     },
-    //     itemStyle: {
-    //         opacity: 0.5,
-    //         color: '#fff',
-    //     },
-    //     parametricEquation: {
-    //         u: {
-    //             min: 0,
-    //             max: Math.PI * 2,
-    //             step: Math.PI / 20,
-    //         },
-    //         v: {
-    //             min: 1.5,
-    //             max: 3,
-    //             step: Math.PI / 20,
-    //         },
-    //         x: function (u, v) {
-    //             return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) *1;
-    //         },
-    //         y: function (u, v) {
-    //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI)*1;
-    //         },
-    //         z: function (u, v) {
-    //             return Math.cos(v) > 0 ? -4 : -4;
+    //             return Math.cos(v) > 0 ? -6 : -7;
     //         },
     //     },
     // });
@@ -206,19 +165,19 @@ function getPie3D(pieData, internalDiameterRatio) {
                 "#F4BB29",
                 "#49C384",
             ],
-            width: '30%',
+            width: '40%',
             //图例列表的布局朝向。
-            // orient: "vertical",
-            right: 0,
+            orient: "vertical",
+            right: 20,
             // bottom: 20,
             top: 'center',
             // left: '10px',
             //图例文字每项之间的间隔
-            itemGap: 20,
+            itemGap: 10,
             show: true,
             icon: "rect",
             itemHeight: 10,
-            itemWidth: 10,
+            itemWidth: 25,
             textStyle: {
                 //图例字体大小
                 fontSize: 14,
@@ -227,15 +186,21 @@ function getPie3D(pieData, internalDiameterRatio) {
             },
 
             //格式化图例文本
-            // formatter: function (name) {
-            //     var target;
-            //     for (var i = 0, l = pieData.length; i < l; i++) {
-            //         if (pieData[i].name == name) {
-            //             target = pieData[i].value;
-            //         }
-            //     }
-            //     return `${name}   ${target}`;
-            // },
+            formatter: function (name) {
+                var target;
+                for (var i = 0, l = pieData.length; i < l; i++) {
+                    if (pieData[i].name == name) {
+                        target = pieData[i].value;
+                    }
+                }
+                if(name == '90-100岁'){
+                    return `   ${name}           ${target} 人`;
+                }else if(name == '100岁以上'){
+                    return `   ${name}          ${target} 人`;
+                }else{
+                    return `   ${name}             ${target} 人`;
+                }
+            },
         },
         //移动上去提示的文本内容
         tooltip: {
@@ -256,7 +221,7 @@ function getPie3D(pieData, internalDiameterRatio) {
                         `<div style='color:rgba(214, 243, 255, 0.9);'>` +
                         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                         `${params.seriesName}<br/>` +
-                        `<span style='margin-right:20px'>${value}</span>` +
+                        `<span style='margin-right:20px'>${value}人</span>` +
                         `<span >${bfb}%</span>` +
                         `</div>`
                     );
@@ -269,14 +234,14 @@ function getPie3D(pieData, internalDiameterRatio) {
         grid3D: {
             viewControl: {
                 autoRotate: true,
-                rotateSensitivity: 1, //设置为0无法旋转
-                zoomSensitivity: 1, //设置为0无法缩放
+                rotateSensitivity: 0, //设置为0无法旋转
+                zoomSensitivity: 0, //设置为0无法缩放
                 panSensitivity: 0, //设置为0无法平移
                 alpha: 25, //角度(这个很重要 调节角度的)
-                distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+                distance: 90, //调整视角到主体的距离，类似调整zoom(这是整体大小)
             },
-            top: '0',
-            left: '-100',
+            top: '-30',
+            left: '-120',
             width: '100%',
             show: false,
             boxHeight: 20,

src/view/echarts/ylJHSY.vue

@@ -11,7 +11,9 @@ const chart = ref(); // 创建DOM引用
 
 const data = [120, 200, 150, 80, 70, 110, 130];
 const lineData = [150, 230, 224, 218, 135, 147, 260];
-const max = data.concat(lineData).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+const max = data
+  .concat(lineData)
+  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
 // 背景颜色
 const color = [
   {
@@ -39,6 +41,7 @@ const color = [
 const option = {
   tooltip: {
     trigger: "axis",
+    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
     axisPointer: {
       type: "cross",
       label: {
@@ -63,6 +66,7 @@ const option = {
     {
       type: "category",
       //   name: "计划生育补贴金额/元",
+
       data: ["2019", "2020", "2021", "2022", "2023"],
     },
     {
@@ -77,6 +81,13 @@ const option = {
       scale: true,
       name: "计划生育人数",
       max: max,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
     },
     {
       type: "value",
@@ -84,6 +95,13 @@ const option = {
       name: "计划生育补贴金额/元",
       min: 0,
       max: max,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
       //   max: 300,
       //   position: "right",
       //   boundaryGap: [0.2, 0.2]

src/view/yl.vue

@@ -1,47 +1,115 @@
 <template>
   <div class="module">
-    <div class="displayFlex">
-      <div class="flex1">
+    <div class="displayFlex left_bg" >
+      <div class="flex1" >
         <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"
-              style="width: 130px; height: 30px"
+              v-else
+              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_3">
-          <!-- <span class="text">基本信息</span> -->
+      <div class="flex1" style="margin-top:10px;">
+        <div class="yd_title left_2">
+          <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>
-        <eP3></eP3>
+        <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">基本信息</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>
-        <eP2></eP2>
+        <eP3 v-if="leftchoose.third == '1'"></eP3>
+        <eP3_2 v-else></eP3_2>
       </div>
     </div>
-    <div class="displayFlex">
+    <div class="displayFlex center_bg">
       <div class="flex1">
-        <div class="yd_title">
-          <span class="text">活动数据分析</span>
+        <div class="yd_title center_1">
+        </div>
+        <div class="minTopPart">
+          <div class="mtpImg1"></div>
+          <div class="mtpImg2"></div>
+          <div class="mtpImg3"></div>
+          <div class="mtpText1">5888811</div>
+          <div class="mtpText2">18%</div>
         </div>
-        <waterBall></waterBall>
         <ePie3d></ePie3d>
       </div>
       <div class="flex1">
         <div class="yd_title familyPlanning">
           <!-- <span class="text">计划生育</span> -->
         </div>
-        <div style="width: 100%; height: 400px">
+        <div style="width: 100%; height: 280px">
           <ylJHSY></ylJHSY>
         </div>
       </div>
@@ -115,7 +183,9 @@
 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";
 import eGraph from "./echarts/graph.vue";
 import ePie3d from "./echarts/pie3d.vue";
@@ -123,26 +193,39 @@ import ePie3d from "./echarts/pie3d.vue";
 import ylJHSY from "./echarts/ylJHSY.vue";
 import ylSMFW from "./echarts/ylSMFW.vue";
 import ylXZZC from "./echarts/ylXZZC.vue";
-
+import { ref, onMounted, onBeforeMount } from "vue";
+const leftchoose = ref({
+  first: "1",
+  second: "1",
+  third: "1",
+});
+const change = (name, index) => {
+  leftchoose.value[name] = index;
+};
 </script>
 
 <style lang="scss" scoped>
 .displayFlex {
+  box-sizing: border-box;
+  // height: 90vh;
   display: flex;
   flex-direction: column;
   // flex: 1;
   width: 33.333333333%;
 }
+
 .flex1 {
   flex: 1;
-  padding: 0 28px;
+  // padding: 0 28px;
   box-sizing: border-box;
 }
+
 .flex2 {
   // flex: 1;
   padding: 0 38px;
   box-sizing: border-box;
 }
+
 .module {
   display: flex;
 }
@@ -152,9 +235,10 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   // background-repeat: no-repeat;
   // background-size: 100% 100%;
   box-sizing: border-box;
-  width: 100%;
+  width: 94%;
   height: 36px;
   position: relative;
+
   .text {
     display: flex;
     position: absolute;
@@ -163,25 +247,29 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     font-weight: bold;
     color: #ffffff;
     position: absolute;
-    right: 33px;
+    right: 5px;
     top: 3px;
   }
 }
+
 .familyPlanning {
   background-image: url(@/assets/YLTitle/titleImg9.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .mechanism {
   background-image: url(@/assets/YLTitle/titleImg10.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .service {
   background-image: url(@/assets/YLTitle/titleImg11.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .serviceBox {
   display: flex;
   flex-direction: column;
@@ -191,6 +279,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     width: 182px;
     height: 35px;
   }
+
   .serviceTop {
     display: flex;
     justify-content: space-between;
@@ -205,6 +294,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .ylimg {
         width: 205px;
         height: 239px;
@@ -212,6 +302,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
 
       .medicalServiceTop {
         position: relative;
+
         span {
           position: absolute;
           left: 38px;
@@ -228,11 +319,13 @@ import ylXZZC from "./echarts/ylXZZC.vue";
       }
     }
   }
+
   .mealAssistance {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     .mealAssistanceimg {
       width: 495px;
       height: 35px;
@@ -245,28 +338,51 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_2 {
   background-image: url(@/assets/images/gllrbt.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_3 {
   background-image: url(@/assets/images/tkjz.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-.text_1_left {
-  //   background-image: url(@/assets/images/ylbx_1.png);
-  // background-repeat: no-repeat;
-  // background-size: 100% 100%;
-  width: 100px;
-  height: 50px;
+
+.center_1 {
+  background-image: url(@/assets/YLTitle/titleImg8.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_bg {
+  width:642px;
+  height: 100%;
+  box-sizing: border-box;
+  padding-left:50px;
+  margin-right:28px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_bg{
+    width:582px;
+  height: 100%;
+  box-sizing: border-box;
+  padding-left:10px;
+  margin-right:28px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 .basicInformation {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding-top: 22px;
+
   .basicInformation_item {
     flex: 0 0 50%;
     padding: 0 2px;
@@ -275,10 +391,12 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     box-sizing: border-box;
     display: flex;
     align-items: center;
+
     .icon {
       width: 79px;
       height: 47px;
     }
+
     .right {
       margin-left: 4px;
 
@@ -288,6 +406,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
         background-repeat: no-repeat;
         background-position: bottom;
         margin-bottom: 4px;
+
         span {
           font-size: 12px;
           font-weight: 400;
@@ -296,6 +415,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
           margin-left: 2px;
         }
       }
+
       p {
         font-size: 16px;
         font-weight: bold;
@@ -306,6 +426,50 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   }
 }
 
+.visitLog {
+  .visitLog_item {
+    display: flex;
+    align-items: center;
+    background-image: url(@/assets/img_12.png);
+    background-size: 100% 100%;
+    margin-top: 16px;
+    padding: 15px 8px;
+    box-sizing: border-box;
+
+    img {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    .visitLog_item_box {
+      flex: auto;
+
+      h4 {
+        font-size: 18px;
+        font-family: MicrosoftYaHei;
+        font-weight: bold;
+        color: #0096ff;
+        margin-bottom: 2px;
+      }
+
+      p {
+        font-size: 12px;
+        font-family: SourceHanSansCN;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 6px;
+      }
+    }
+
+    .check {
+      font-size: 12px;
+      font-family: SourceHanSansCN;
+      font-weight: 400;
+      color: #0096ff;
+      line-height: 20px;
+    }
+  }
+}
 
 .history {
   padding-top: 12px;
@@ -323,6 +487,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .unit {
       font-weight: 500;
       font-size: 14px;
@@ -332,15 +497,18 @@ import ylXZZC from "./echarts/ylXZZC.vue";
       font-style: normal;
       font-family: PingFangSC, PingFang SC;
     }
+
     .historyimg {
       width: 182px;
       height: 35px;
     }
   }
+
   img {
     width: 154px;
     height: 136px;
   }
+
   p {
     margin-top: 12px;
     font-size: 12px;
@@ -356,6 +524,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
   align-items: center;
   justify-content: center;
   margin: 12px 0 20px;
+
   span {
     text-align: center;
     background: rgba(0, 89, 130, 0.73);
@@ -369,9 +538,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     margin: 0 10px;
   }
 }
+
 .property {
   display: flex;
   padding: 14px 0 10px;
+
   .property_box {
     background-image: url(@/assets/img_05.png);
     background-size: 100% 100%;
@@ -380,12 +551,14 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     height: 91px;
     margin: 0 12px;
     text-align: center;
+
     h5 {
       font-size: 14px;
       font-weight: 400;
       color: #ffffff;
       margin: 9px 0 16px;
     }
+
     p {
       font-size: 21px;
       font-weight: bold;
@@ -393,6 +566,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     }
   }
 }
+
 .activity {
   h5 {
     font-size: 14px;
@@ -402,9 +576,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     border-bottom: 2px solid rgba(0, 164, 250, 1);
     margin-bottom: 17px;
   }
+
   .activity_content {
     margin: 0 -6px 12px;
     display: flex;
+
     .activity_box {
       width: 50%;
       display: inline-block;
@@ -412,6 +588,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
       box-sizing: border-box;
       background-color: rgba(15, 28, 54, 1);
       padding: 12px 12px 19px;
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -422,26 +599,31 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     }
   }
 }
+
 .monitor {
   .monitor_box {
     display: flex;
     padding: 8px 0;
     border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
     img {
       width: 115px;
       height: 84px;
       margin-right: 21px;
     }
+
     .monitor_box_text {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+
       h4 {
         font-size: 14px;
         font-weight: 400;
         color: #ffffff;
         line-height: 20px;
       }
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -451,4 +633,71 @@ import ylXZZC from "./echarts/ylXZZC.vue";
     }
   }
 }
+
+.minTopPart {
+  width: 530px;
+  height: 174px;
+  background-image: url(@/assets/minTopBg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 4px auto;
+  position: relative;
+
+  .mtpImg1 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop1.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    left: 23px;
+  }
+
+  .mtpImg2 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    right: 23px;
+  }
+  .mtpImg3 {
+    width: 125px;
+    height: 36px;
+    background-image: url(@/assets/minTop3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 316px;
+    left: 84px;
+  }
+
+  .mtpText1 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    left: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #FFFFFF;
+  }
+  .mtpText2 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    right: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #FFFFFF;
+  }
+}
 </style>