From 3f951d5d0a2bdae8fb251233465aeeb2f2946627 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Mon, 13 May 2024 10:53:21 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=8D=AB=E7=94=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/echarts_hygiene/eP5.vue  | 394 +++++++++++++++---------------
 src/view/echarts_hygiene/eP7.vue  |  58 +++--
 src/view/echarts_hygiene/gxy.vue  | 238 +++++++++---------
 src/view/echarts_hygiene/pie.vue  | 291 ++++++++++++----------
 src/view/echarts_hygiene/pie2.vue | 207 +++++++++-------
 src/view/echarts_hygiene/tnb.vue  |  55 +++--
 src/view/hygiene.vue              |  52 +++-
 7 files changed, 719 insertions(+), 576 deletions(-)

diff --git a/src/view/echarts_hygiene/eP5.vue b/src/view/echarts_hygiene/eP5.vue
index d9a6766..febeb8d 100644
--- a/src/view/echarts_hygiene/eP5.vue
+++ b/src/view/echarts_hygiene/eP5.vue
@@ -1,216 +1,224 @@
 <template>
-  <div
-    ref="chart"
-    style="width: 100%;height: 400px"
-  ></div>
+  <div ref="chart" style="width: 100%; height: 400px"></div>
 </template>
 
 <script setup >
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
 const chart = ref(); // 创建DOM引用
-const data1 = [
-  "龙游县人民医院",
-  "龙游县中医院",
-  "龙游县横山镇中心卫生院",
-  "龙游县溪水镇中心卫生院",
-  "龙游县龙游街道社区卫生服务中心",
-  "龙游县塔石镇中心卫生院",
-  "龙游县罗家县中心卫生院",
-];
-let option = {
-  tooltip: {
-    trigger: "axis",
-    // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
-  },
-
-  grid: {
-    top: "13%",
-    left: "1%",
-    right: "10%",
-    bottom: "0%",
-    containLabel: true,
-  },
-  calculable: true,
-  xAxis: [
-    {
-      type: "category",
-      axisLabel: {
-        formatter: function (params) {
-          var str = ""; // 最终拼接成的字符串
-          var paramsLen = params.length; // 获取每项文字的个数
-          var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
-          var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
-          if (paramsLen > len) {
-            //大于设定的len就换行，不大于就不变化
-            for (var i = 0; i < rowNumber; i++) {
-              var temp = ""; // 表示每一次截取的字符串
-              var start = i * len; // 开始截取的位置
-              var end = start + len; // 结束截取的位置
-              if (i == rowNumber - 1) {
-                // 最后一次不换行
-                temp = params.substring(start, paramsLen);
-              } else {
-                // 每一次拼接字符串并换行
-                temp = params.substring(start, end) + "\n";
-              }
-              str += temp; // 最终拼成的字符串
-            }
-          } else {
-            // 给新的字符串赋值
-            str = params;
-          }
-          return str; //返回字符串
-        },
-        textStyle: {
-          color: "#ffffff",
-        },
-        rotate: 40,
-      },
-      data: data1,
+const data = reactive({
+  list: [],
+  jgmc: [],
+  rs: [],
+  option: {},
+  bg: [],
+});
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
     },
-  ],
 
-  yAxis: [
-    {
-        name:'在册数',
-      type: "value",
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(226, 226, 226, 0.2)",
-          width: 1,
-        },
-      },
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ccc",
-        },
-      },
-          axisLine: {
-        //y轴线的颜色以及宽度
-        show: false,
-        lineStyle: {
-          color: "#ffffff",
-          width: 1,
-          type: "solid",
-        },
-      },
+    grid: {
+      top: "13%",
+      left: "15%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
     },
-  
-  ],
-  series: [
-    {
-      name: "职工医疗保险发放人次",
-      type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6,100,50],
-      barWidth: 20,
-      itemStyle: {
-        normal: {
-          color: function (params) {
-            let colorList = [
-              ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
-              ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
-              ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
-            ];
-            if (params.dataIndex == 0) {
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
-                  {
-                    offset: 0,
-                    color: "rgba(23, 237, 255, 1)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(23, 237, 255, 0.20)",
-                  },
-                ],
-                false
-              );
-            } else if (params.dataIndex % 3 == 0) {
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
-                  {
-                    offset: 0,
-                    color: "rgba(23, 237, 255, 1)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(23, 237, 255, 0.20)",
-                  },
-                ],
-                false
-              );
-            } else if (params.dataIndex % 2 == 0) {
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
-                  {
-                    offset: 0,
-                    color: "rgba(255, 243, 119, 1)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(255, 242, 142, 0.20)",
-                  },
-                ],
-                false
-              );
-            } else {
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, //y->y2
-                [
-                  {
-                    offset: 0,
-                    color: "rgba(142, 187, 255, 1)",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(142, 187, 255, 0.20)",
-                  },
-                ],
-                false
-              );
-            }
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          // formatter: function (params) {
+          //   var str = ""; // 最终拼接成的字符串
+          //   var paramsLen = params.length; // 获取每项文字的个数
+          //   var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
+          //   var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+          //   if (paramsLen > len) {
+          //     //大于设定的len就换行，不大于就不变化
+          //     for (var i = 0; i < rowNumber; i++) {
+          //       var temp = ""; // 表示每一次截取的字符串
+          //       var start = i * len; // 开始截取的位置
+          //       var end = start + len; // 结束截取的位置
+          //       if (i == rowNumber - 1) {
+          //         // 最后一次不换行
+          //         temp = params.substring(start, paramsLen);
+          //       } else {
+          //         // 每一次拼接字符串并换行
+          //         temp = params.substring(start, end) + "\n";
+          //       }
+          //       str += temp; // 最终拼成的字符串
+          //     }
+          //   } else {
+          //     // 给新的字符串赋值
+          //     str = params;
+          //   }
+          //   return str; //返回字符串
+          // },
+          textStyle: {
+            color: "#ffffff",
+          },
+          rotate: 40,
+        },
+        data: data.jgmc,
+      },
+    ],
+
+    yAxis: [
+      {
+        name: "在册数",
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.2)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            width: 1,
+            type: "solid",
           },
         },
       },
-    },
-  ],
+    ],
+    series: [
+      {
+        name: "职工医疗保险发放人次",
+        type: "bar",
+        data: data.rs,
+        barWidth: 20,
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              let colorList = [
+                ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
+                ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
+                ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
+              ];
+              if (params.dataIndex == 0) {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1, //y->y2
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(23, 237, 255, 1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(23, 237, 255, 0.20)",
+                    },
+                  ],
+                  false
+                );
+              } else if (params.dataIndex % 3 == 0) {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1, //y->y2
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(23, 237, 255, 1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(23, 237, 255, 0.20)",
+                    },
+                  ],
+                  false
+                );
+              } else if (params.dataIndex % 2 == 0) {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1, //y->y2
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 243, 119, 1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 242, 142, 0.20)",
+                    },
+                  ],
+                  false
+                );
+              } else {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1, //y->y2
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(142, 187, 255, 1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(142, 187, 255, 0.20)",
+                    },
+                  ],
+                  false
+                );
+              }
+            },
+          },
+        },
+      },
+    ],
+  };
 };
-
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+};
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.list.forEach((item, index) => {
+      data.jgmc.push(item.jgmc);
+      data.rs.push(item.rs);
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_hygiene/eP7.vue b/src/view/echarts_hygiene/eP7.vue
index 0780201..a84b8c3 100644
--- a/src/view/echarts_hygiene/eP7.vue
+++ b/src/view/echarts_hygiene/eP7.vue
@@ -3,13 +3,29 @@
 </template>
 
 <script setup >
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
-
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year:{
+    type: Array,
+    default: () => [],
+  }
+});
+const data= reactive({
+  list:[],
+  year:[],
+  option:{},
+  bg:[],
+})
 const chart = ref(); // 创建DOM引用
-const data1 = ["2019", "2020", "2021", "2022", "2023"];
-let option = {
+
+const getOption = () => {
+data.option = {
   tooltip: {
     trigger: "axis",
     formatter: "{b0}<br />{a0}:{c0} ",
@@ -33,12 +49,12 @@ let option = {
         },
       },
 
-      data: data1,
+      data: data.year,
     },
     {
       axisTick: false,
       type: "category",
-      data: data1,
+      data: data.year,
       axisLabel: {
         show: false,
       },
@@ -102,7 +118,7 @@ let option = {
     {
       name: "体检人数",
       type: "bar",
-      data: [120, 49, 70, 232, 25.6],
+      data: data.list,
       barWidth: 20,
       itemStyle: {
         normal: {
@@ -191,28 +207,32 @@ let option = {
       itemStyle: {
         color: "rgba(221, 242, 255, 0.1)",
       },
-      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      data: data.bg.map(() => 100),
       barWidth: 50,
     },
   ],
 };
-
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+}
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+}
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list
+    data.year = props.year
+    data.year.forEach(()=>{
+      data.bg.push(0)
+    })
+    getOption()
+    setChart()
+  }, 600)
 });
+
 </script>
 
 <style scoped>
diff --git a/src/view/echarts_hygiene/gxy.vue b/src/view/echarts_hygiene/gxy.vue
index 4bc1cfb..b1b1de1 100644
--- a/src/view/echarts_hygiene/gxy.vue
+++ b/src/view/echarts_hygiene/gxy.vue
@@ -1,131 +1,151 @@
 <template>
-  <div ref="chart" style="width: 100%;height:210px;"></div>
+  <div ref="chart" style="width: 100%; height: 210px"></div>
 </template>
 
 <script setup >
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
 const chart = ref(); // 创建DOM引用
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  bg: [],
+});
 
-let option = {
-  tooltip: {
-    trigger: "axis",
-    padding: [20, 10, 20, 10],
-    formatter: "{b0}<br />{a1}:{c1} ",
-  },
-  grid: {
-    top:'5%',
-    left: "1%",
-    right: "10%",
-    bottom: "3%",
-    containLabel: true,
-  },
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} ",
+    },
+    grid: {
+      top: "5%",
+      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: "#ffffff",
-      },
-    },
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: "rgba(226, 226, 226, 0.3)",
-        width: 1,
-      },
-    },
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
-      textStyle: {
-        color: "#ffffff",
-      },
-    },
-  },
-  series: [
-    {
-      name: "背景",
-      type: "bar",
-      data: [0, 0, 0, 0, 0],
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    },
-    {
-      name: "高血压人数",
-      type: "line",
-      stack: "Total",
-      symbol: "emptyCircle",
-
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
-      },   areaStyle: {
-        color: "#F4F65B",
-        normal: {
-          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-          color: new echarts.graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1,
-            [
-              {
-                offset: 0,
-                // color: 'RGBA(184, 204, 241, 1)'
-                color: 'rgba(0, 252, 255, 0.50)',
-              },
-              {
-                offset: 1,
-                color: "rgba(0, 252, 255, 0)",
-              },
-            ],
-            false
-          ),
-          shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      // splitArea: {
+      //   show: true,
+      //   interval: '10',
+      //   areaStyle: {
+      //     color: ["rgba(255, 255, 255, 0.10)"],
+      //     width:10,
+      //   },
+      // },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
         },
       },
-
-      data: [120, 182, 191, 234, 200],
     },
-  
-  ],
-};
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+    },
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "高血压人数",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
 
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        areaStyle: {
+          color: "#F4F65B",
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  // color: 'RGBA(184, 204, 241, 1)'
+                  color: "rgba(0, 252, 255, 0.50)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0, 252, 255, 0)",
+                },
+              ],
+              false
+            ),
+            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+
+        data: data.list,
+      },
+    ],
+  };
+};
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+};
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_hygiene/pie.vue b/src/view/echarts_hygiene/pie.vue
index 781f6a5..8d0f248 100644
--- a/src/view/echarts_hygiene/pie.vue
+++ b/src/view/echarts_hygiene/pie.vue
@@ -1,164 +1,189 @@
 <template>
-  <div ref="chart" style="width: 100%; height:250px;"></div>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
 </template>
 
 <script setup >
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  zgffrc: [], //职工医疗保险发放人次
+  cxffrc: [], //城乡医疗保险发放人次
+  year: [],
+  option: {},
+  bg:[],
+});
+
 const chart = ref(); // 创建DOM引用
 
-let option = {
-  tooltip: {
-    trigger: "axis",
-    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
-  },
-  legend: {
-    top: "6%",
-    right: "11%",
-    textStyle: {
-      fontSize: 12,
-      color: "#ffffff",
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
     },
-  },
-  grid: {
-    top:'23%',
-    left: "1%",
-    right: "10%",
-    bottom: "0%",
-    containLabel: true,
-  },
-  calculable: true,
-  xAxis: [
-    {
-      type: "category",
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
+    legend: {
+      top: "6%",
+      right: "11%",
+      textStyle: {
+        fontSize: 12,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "23%",
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        data: data.year,
+      },
+      {
+        axisTick: false,
+        type: "category",
+        data: data.year,
+        axisLabel: {
+          show: false,
         },
       },
-      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,
+    yAxis: [
+      {
+        type: "value",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+          },
         },
       },
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
+      {
+        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,
         },
       },
-    },
-    {
-      type: "value",
-      min: 0,
-      max: 100,
-      splitLine: {
-        show: false,
-        lineStyle: {
-          type: "solid",
-          color: "rgb(221, 242, 255,0.1)",
+    ],
+    series: [
+      {
+        name: "职工医疗保险发放人次",
+        type: "bar",
+        data: data.zgffrc,
+        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)",
+            },
+          ]),
         },
       },
-      axisLine: {
-        show: false,
-        lineStyle: {
-          type: "dotted",
+      {
+        name: "城乡医疗保险发放人次",
+        type: "bar",
+        data: data.cxffrc,
+        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)",
+            },
+          ]),
         },
       },
-      axisLabel: {
-        show: false,
-        fontSize: 14,
-        fontFamily: "MicrosoftYaHei",
-        color: "#DEF1FF",
-        lineHeight: 19,
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0.1)",
+        },
+        data: data.bg.map(() => 100),
+        barWidth: 50,
       },
-    },
-  ],
-  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'));
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+};
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.year;
+    data.list.forEach((item) => {
+      data.zgffrc.push(item.zgffrc);
+      data.cxffrc.push(item.cxffrc);
+      data.bg.push("");
+    })
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_hygiene/pie2.vue b/src/view/echarts_hygiene/pie2.vue
index 7d634a5..ab1c420 100644
--- a/src/view/echarts_hygiene/pie2.vue
+++ b/src/view/echarts_hygiene/pie2.vue
@@ -1,121 +1,142 @@
 <template>
-  <div ref="chart" style="width: 100%; height:250px;"></div>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
 </template>
 
 <script setup >
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
-
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  zgffje: [], //职工医疗保险发放人次
+  cxffje: [], //城乡医疗保险发放人次
+  year: [],
+  option: {},
+  bg: [],
+});
 const chart = ref(); // 创建DOM引用
 
-let option = {
-  tooltip: {
-    trigger: "axis",
-    padding: [20, 10, 20, 10],
-    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
-  },
-  legend: {
-    data: ["职工医疗保险金额", "城乡医疗保险金额"],
-    top: "6%",
-    right: "11%",
-    textStyle: {
-      fontSize: 12,
-      color: "#ffffff",
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
     },
-  },
-  grid: {
-    top:'23%',
-    left: "1%",
-    right: "10%",
-    bottom: "3%",
-    containLabel: true,
-  },
-
-  xAxis: {
-    type: "category",
-    // boundaryGap: false,
-    data: ["1月", "2月", "3月", "4月", "5月"],
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
+    legend: {
+      data: ["职工医疗保险金额", "城乡医疗保险金额"],
+      top: "6%",
+      right: "11%",
       textStyle: {
+        fontSize: 12,
         color: "#ffffff",
       },
     },
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: "rgba(226, 226, 226, 0.3)",
-        width: 1,
-      },
+    grid: {
+      top: "23%",
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
     },
-    axisLabel: {
-      //坐标轴刻度标签的相关设置
-      textStyle: {
-        color: "#ffffff",
-      },
-    },
-  },
-  series: [
-    {
-      name: "背景",
-      type: "bar",
-      data: [0, 0, 0, 0, 0],
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    },
-    {
-      name: "职工医疗保险金额",
-      type: "line",
-      stack: "Total",
-      symbol: "emptyCircle",
 
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+        },
       },
-      data: [120, 132, 101, 134, 90],
     },
-    {
-      name: "城乡医疗保险金额",
-      type: "line",
-      stack: "Total",
-      symbol: "emptyCircle",
-
-      symbolSize: 10,
-      itemStyle: {
-        borderColor: "#2468FF",
-        borderWidth: 1,
-        color: "#2468FF",
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+        },
       },
-
-      data: [150, 232, 201, 154, 190],
     },
-  ],
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "职工医疗保险金额",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        data: data.zgffje,
+      },
+      {
+        name: "城乡医疗保险金额",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+
+        data: data.cxffje,
+      },
+    ],
+  };
 };
-
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+};
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.year;
+    data.list.forEach((item) => {
+      data.zgffje.push(item.zgffje);
+      data.cxffje.push(item.cxffje);
+      data.bg.push("");
+    });
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 
diff --git a/src/view/echarts_hygiene/tnb.vue b/src/view/echarts_hygiene/tnb.vue
index ae6776a..8e066a8 100644
--- a/src/view/echarts_hygiene/tnb.vue
+++ b/src/view/echarts_hygiene/tnb.vue
@@ -3,13 +3,30 @@
 </template>
 
 <script setup >
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
-const chart = ref(); // 创建DOM引用
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year:{
+    type: Array,
+    default: () => [],
+  }
+});
+const data= reactive({
+  list:[],
+  year:[],
+  option:{},
+  bg:[],
+})
 
-let option = {
+const chart = ref(); // 创建DOM引用
+const getOption = () => {
+  data.option = {
   tooltip: {
     trigger: "axis",
     padding: [20, 10, 20, 10],
@@ -26,7 +43,7 @@ let option = {
   xAxis: {
     type: "category",
     // boundaryGap: false,
-    data: ["1月", "2月", "3月", "4月", "5月"],
+    data: data.year,
     // splitArea: {
     //   show: true,
     //   interval: '10',
@@ -62,7 +79,7 @@ let option = {
     {
       name: "背景",
       type: "bar",
-      data: [0, 0, 0, 0, 0],
+      data: data.bg,
       showBackground: true,
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
@@ -106,27 +123,31 @@ let option = {
           shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
         },
       },
-      data: [120, 182, 191, 234, 200],
+      data: data.list,
     },
   ],
 };
-
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+}
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
 
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
+}
 
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list
+    data.year = props.year
+    data.year.forEach(()=>{
+      data.bg.push(0)
+    })
+    getOption()
+    setChart()
+  }, 600)
 });
+
 </script>
 
 <style scoped>
diff --git a/src/view/hygiene.vue b/src/view/hygiene.vue
index 60f3074..86e1d2a 100644
--- a/src/view/hygiene.vue
+++ b/src/view/hygiene.vue
@@ -30,16 +30,16 @@
             />
           </span>
         </div>
-        <ePie v-if="leftchoose.first == '1'"></ePie>
-        <ePie2 v-else></ePie2>
+        <ePie v-if="leftchoose.first == '1'"  :list='data.medicalInsurance.ffrc' :year='data.medicalInsurance.year'></ePie>
+        <ePie2 v-else :list='data.medicalInsurance.ffje' :year='data.medicalInsurance.year'></ePie2>
       </div>
 
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_3"></div>
         <div class="sm_title_1"></div>
-        <tnb></tnb>
+        <tnb :list='data.lmb.tnbrs' :year='data.lmb.year'></tnb>
         <div class="sm_title_2"></div>
-        <gxy></gxy>
+        <gxy :list='data.lmb.gxyrs' :year='data.lmb.year'></gxy>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -51,7 +51,7 @@
             <div class="right">
               <div class="right_top">门急诊人次</div>
               <img src="@/assets/images/hygiene/jt.png" class="right_center" />
-              <div class="right_bottom">867.371</div>
+              <div class="right_bottom">{{data.mz.mjzrc}}</div>
             </div>
           </div>
           <div class="item">
@@ -59,7 +59,7 @@
             <div class="right">
               <div class="right_top">住院人数</div>
               <img src="@/assets/images/hygiene/jt.png" class="right_center" />
-              <div class="right_bottom">6.723</div>
+              <div class="right_bottom">{{data.mz.zyrs}}</div>
             </div>
           </div>
         </div>
@@ -96,7 +96,7 @@
         <div class="yd_title familyPlanning"></div>
         <!-- 计划生育 -->
         <!-- <div style="width: 100%; "> -->
-        <eP5></eP5>
+        <eP5 :list='data.jsbgl'></eP5>
         <!-- </div> -->
       </div>
     </div>
@@ -105,12 +105,12 @@
         <div class="yd_title mechanism"></div>
         <div class="history">
           <div class="history1">
-            <div class="va">2048</div>
+            <div class="va">{{data.fyglrs.ycfrc}}</div>
             <img src="@/assets/images/hygiene/yf.png" alt="" />
             <div class="historyimg">孕产妇系统管理人数</div>
           </div>
           <div class="history1">
-            <div class="va">21810</div>
+            <div class="va">{{data.fyglrs.etrs}}</div>
             <img src="@/assets/images/hygiene/et.png" alt="" />
             <div class="historyimg">0-6岁儿童系统管理人数</div>
           </div>
@@ -118,12 +118,12 @@
       </div>
       <div class="flex1" style="flex: 1.1">
         <div class="yd_title service"></div>
-        <eP7></eP7>
+        <eP7 :list='data.jktj.jktjrs' :year='data.jktj.year'></eP7>
       </div>
       <div class="flex1">
         <div class="yd_title last"></div>
         <div class="table">
-          <div class="item" v-for="i in 15">
+          <div class="item" v-for="i in data.jkhd">
             3月2日健康日，在龙中公园进行健康活动宣
           </div>
         </div>
@@ -144,7 +144,8 @@ import eP4 from "./echarts_hygiene/eP4.vue";
 import eP4_1 from "./echarts_hygiene/eP4_1.vue";
 import tnb from "./echarts_hygiene/tnb.vue";
 import gxy from "./echarts_hygiene/gxy.vue";
-import { ref, onMounted, onBeforeMount } from "vue";
+import { ref,reactive, onMounted, onBeforeMount } from "vue";
+import http from "@/utils/request.js";
 const leftchoose = ref({
   first: "1",
   second: "1",
@@ -153,6 +154,33 @@ const leftchoose = ref({
 const change = (name, index) => {
   leftchoose.value[name] = index;
 };
+const data = reactive({
+  medicalInsurance:{},//医疗保险
+  lmb:{},//两慢病
+  mz:{},//门诊住院
+  jkda:[],//健康档案
+  jsbgl:[],//精神病管理
+  fyglrs:{},//系统管理
+  jktj:{},//65岁健康体检
+  jkhd:[],//健康活动
+})
+onBeforeMount(() => {
+  getData();
+});
+const getData = () => {
+  http.get("/api/ggfwyth/health").then((res) => {
+    if (res.code == 200) {
+      data.medicalInsurance = res.data.medicalInsurance;
+      data.lmb = res.data.lmb;
+      data.mz = res.data.mz;
+      // data.jkda = res.data.jkda;
+      data.jsbgl = res.data.jsbgl;
+      data.fyglrs = res.data.fyglrs;
+      data.jktj = res.data.jktj;
+      data.jkhd = res.data.jkhd;
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>

From b9bda9413cfe4df00b04f1af1dc5331251bd94ee Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Mon, 13 May 2024 11:03:34 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/echarts_yl/eP2.vue   | 8 ++++++--
 src/view/echarts_yl/eP2_2.vue | 8 ++++++--
 src/view/echarts_yl/eP3.vue   | 8 ++++++--
 src/view/echarts_yl/eP3_2.vue | 2 +-
 src/view/echarts_yl/pie.vue   | 2 +-
 src/view/echarts_yl/pie2.vue  | 8 ++++++--
 6 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/view/echarts_yl/eP2.vue b/src/view/echarts_yl/eP2.vue
index 09518f8..06fc40f 100644
--- a/src/view/echarts_yl/eP2.vue
+++ b/src/view/echarts_yl/eP2.vue
@@ -34,7 +34,8 @@ const data = reactive({
   list1: [],
   list2: [],
   year: [],
-  option: {}
+  option: {},
+  bg:[],
 })
 
 const getOption = () => {
@@ -99,7 +100,7 @@ const getOption = () => {
     {
       name: "背景",
       type: "bar",
-      data: [0, 0, 0, 0, 0],
+      data: data.bg,
       showBackground: true,
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
@@ -152,6 +153,9 @@ onBeforeMount(() => {
     data.list1 = props.list1
     data.list2 = props.list2
     data.year = props.year
+       data.year.forEach(()=>{
+      data.bg.push(0)
+    })
     getOption()
     setChart()
   }, 600)
diff --git a/src/view/echarts_yl/eP2_2.vue b/src/view/echarts_yl/eP2_2.vue
index 4c6560b..0344350 100644
--- a/src/view/echarts_yl/eP2_2.vue
+++ b/src/view/echarts_yl/eP2_2.vue
@@ -34,7 +34,8 @@ const data = reactive({
   list1: [],
   list2: [],
   year: [],
-  option: {}
+  option: {},
+  bg:[],
 })
 
 const getOption = () => {
@@ -99,7 +100,7 @@ const getOption = () => {
       {
         name: "背景",
         type: "bar",
-        data: [0, 0, 0, 0, 0],
+        data: data.bg,
         showBackground: true,
         backgroundStyle: {
           color: "rgba(180, 180, 180, 0.2)",
@@ -153,6 +154,9 @@ onBeforeMount(() => {
     data.list1 = props.list1
     data.list2 = props.list2
     data.year = props.year
+       data.year.forEach(()=>{
+      data.bg.push(0)
+    })
     getOption()
     setChart()
   }, 600)
diff --git a/src/view/echarts_yl/eP3.vue b/src/view/echarts_yl/eP3.vue
index c1354cb..a745d0a 100644
--- a/src/view/echarts_yl/eP3.vue
+++ b/src/view/echarts_yl/eP3.vue
@@ -34,7 +34,8 @@ const data = reactive({
   list1: [],
   list2: [],
   year: [],
-  option: {}
+  option: {},
+  bg:[],
 })
 
 const getOption = () =>{
@@ -91,7 +92,7 @@ const getOption = () =>{
     {
       name: "背景",
       type: "bar",
-      data: [0, 0, 0, 0, 0],
+      data: data.bg,
       showBackground: true,
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
@@ -140,6 +141,9 @@ onBeforeMount(() => {
     data.list1 = props.list1
     data.list2 = props.list2
     data.year = props.year
+       data.year.forEach(()=>{
+      data.bg.push(0)
+    })
     getOption()
     setChart()
   }, 600)
diff --git a/src/view/echarts_yl/eP3_2.vue b/src/view/echarts_yl/eP3_2.vue
index d54c23d..fc1de97 100644
--- a/src/view/echarts_yl/eP3_2.vue
+++ b/src/view/echarts_yl/eP3_2.vue
@@ -168,7 +168,7 @@ const getOption = () =>{
       itemStyle: {
         color: "rgba(221, 242, 255, 0.1)",
       },
-      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      data: data.year.map(() => 100),
       barWidth: 50,
     },
   ],
diff --git a/src/view/echarts_yl/pie.vue b/src/view/echarts_yl/pie.vue
index 33aebba..de9436b 100644
--- a/src/view/echarts_yl/pie.vue
+++ b/src/view/echarts_yl/pie.vue
@@ -163,7 +163,7 @@ const getOption = () => {
         itemStyle: {
           color: "rgba(221, 242, 255, 0.1)",
         },
-        data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+        data: data.year.map(() => 100),
         barWidth: 50,
       },
     ],
diff --git a/src/view/echarts_yl/pie2.vue b/src/view/echarts_yl/pie2.vue
index 7e7849e..16dfb20 100644
--- a/src/view/echarts_yl/pie2.vue
+++ b/src/view/echarts_yl/pie2.vue
@@ -33,7 +33,8 @@ const data = reactive({
   list1: [],
   list2: [],
   year: [],
-  option: {}
+  option: {},
+  bg:[],
 })
 const getOption = () => {
   data.option = {
@@ -89,7 +90,7 @@ const getOption = () => {
     {
       name: "背景",
       type: "bar",
-      data: [0, 0, 0, 0, 0],
+      data: data.bg,
       showBackground: true,
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",
@@ -139,6 +140,9 @@ onBeforeMount(() => {
     data.list1 = props.list1
     data.list2 = props.list2
     data.year = props.year
+    data.year.forEach(()=>{
+      data.bg.push(0)
+    })
     getOption()
     setChart()
   }, 600)