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,13 +66,13 @@ const data2 = [
   "21307",
   "20000",
 ];
-
-let option = {
+const getOption = () => {
+  data.option = {
     grid: {
       left: "2%",
       right: "10%",
-    bottom: "2%",
       top: "4%",
+      bottom: "6%",
       containLabel: true,
     },
     tooltip: {
@@ -98,7 +122,7 @@ let option = {
         axisLine: {
           show: false,
         },
-      data: data1,
+        data: data.list1,
       },
     ],
     series: [
@@ -126,15 +150,36 @@ let option = {
           // },
         },
         barWidth: 10,
-      data: data2,
+        data: data.list2,
       },
     ],
   };
+};
 
-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>