gx

src/view/analyze.vue

@@ -112,7 +112,7 @@
             <i></i>
           </div>
         </div>
-        <right1></right1>
+        <right1 :list="data.wjybrysl"></right1>
       </div>
       <div class="flex1">
         <div class="yd_title right_2">
@@ -260,6 +260,7 @@ const data = reactive({
       data: ["0", "0", "0", "0", "0", "0"], //医保支出万元以上
     },
   ], //数据查看
+  wjybrysl: [],
   leftCenterYear: ["2019", "2020", "2021", "2022", "2023", "2024"], //年份
   zccs1: ["图书馆", "公共自行车", "小奔通"], //一码通
   zccs2: ["100", "3924", "3905"], //一码通
@@ -360,8 +361,10 @@ const getData = async () => {
       ageBt.forEach((key, index) => {
         data.whistleblower.culeTotal.data[index] = res.data.lnr.rksj[key];
       });
-
       data.leftCenterYear = res.data.dataShow.year;
+
+      data.wjybrysl = res.data.wjybrysl;
+      console.log(data.wjybrysl,1111);
       data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; //高血压
       data.ViewData[2].value = res.data.dataShow.gxyrs.total; //高血压年份
       data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //糖尿病

src/view/echart_analyze/right1.vue

@@ -3,11 +3,35 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onMounted,
+  onBeforeMount,
+  reactive,
+  defineProps,
+  ref,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
-const chart = ref(null); // 创建DOM引用
+const chart = ref(); // 创建DOM引用
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const data = reactive({
+  list: [],
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+});
+
 const data1 = [
   "大街乡",
   "社阳乡",
@@ -42,80 +66,80 @@ const data2 = [
   "21307",
   "20000",
 ];
-
-let option = {
-  grid: {
-    left: "2%",
-    right: "10%",
-    bottom: "2%",
-    top: "4%",
-    containLabel: true,
-  },
-  tooltip: {
-    trigger: "axis", //axis , item
-  },
-  // backgroundColor: '#002D54',
-  xAxis: {
-    type: "value",
-    splitLine: {
-      lineStyle: {
-        color: "rgba(77, 128, 254, 0.2)",
-        type: "line",
-      },
+const getOption = () => {
+  data.option = {
+    grid: {
+      left: "2%",
+      right: "10%",
+      top: "4%",
+      bottom: "6%",
+      containLabel: true,
     },
-    axisTick: {
-      show: true,
+    tooltip: {
+      trigger: "axis", //axis , item
     },
-    splitLine: {
-      show: false,
-    },
-    axisLabel: {
-      //  改变x轴字体颜色和大小
-      show: false,
-      textStyle: {
-        color: "#00c0fa",
-        fontSize: 19,
-      },
-    },
-  },
-  yAxis: [
-    {
-      type: "category",
-      inverse: true,
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: "#ffffff",
-          fontSize: "14",
+    // backgroundColor: '#002D54',
+    xAxis: {
+      type: "value",
+      splitLine: {
+        lineStyle: {
+          color: "rgba(77, 128, 254, 0.2)",
+          type: "line",
         },
       },
+      axisTick: {
+        show: true,
+      },
       splitLine: {
         show: false,
       },
-      axisTick: {
+      axisLabel: {
+        //  改变x轴字体颜色和大小
         show: false,
+        textStyle: {
+          color: "#00c0fa",
+          fontSize: 19,
+        },
       },
-      axisLine: {
-        show: false,
-      },
-      data: data1,
     },
-  ],
-  series: [
-    {
-      name: "未交医保人员",
-      type: "bar",
-      zlevel: 1,
-      label: {
-        show: true,
-        position: "right", // 位置
-        color: "#ffffff",
-        fontSize: 12,
-        distance: 10, // 距离
-        // formatter: '{c}%' // 这里是数据展示的时候显示的数据
-      }, // 柱子上方的数值
-      itemStyle: {
-        // normal: {
+    yAxis: [
+      {
+        type: "category",
+        inverse: true,
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff",
+            fontSize: "14",
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        data: data.list1,
+      },
+    ],
+    series: [
+      {
+        name: "未交医保人员",
+        type: "bar",
+        zlevel: 1,
+        label: {
+          show: true,
+          position: "right", // 位置
+          color: "#ffffff",
+          fontSize: 12,
+          distance: 10, // 距离
+          // formatter: '{c}%' // 这里是数据展示的时候显示的数据
+        }, // 柱子上方的数值
+        itemStyle: {
+          // normal: {
           borderWidth: 1,
           //   borderColor: "rgba(0, 183, 255, 1)",
           borderRadius: [0, 0, 50, 0], //圆角边框
@@ -123,18 +147,39 @@ let option = {
             { offset: 0, color: "rgba(0, 183, 255, 0)" },
             { offset: 1, color: "rgba(0, 183, 255, 1)" },
           ]),
-        // },
+          // },
+        },
+        barWidth: 10,
+        data: data.list2,
       },
-      barWidth: 10,
-      data: data2,
-    },
-  ],
+    ],
+  };
 };
 
-onMounted(() => {
+  // onMounted(() => {
+  //   var myChart = echarts.init(chart.value);
+  //   myChart.setOption(option);
+  // });
+const setChart = () => {
+  // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
-
-  myChart.setOption(option);
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+const setChart1 = () => {
+  data.list.forEach((item) => {
+    data.list1.push(item.xzjd);
+    data.list2.push(item.rs);
+  });
+  console.log(data.list1, data.list2);
+};
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    setChart1();
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>