gx

src/view/analyze.vue

@@ -131,7 +131,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+} from "vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
 import http from "@/utils/request.js";
@@ -255,51 +262,48 @@ const minData = reactive({
 });
 // 数据查看
 const onViewData = (value, i) => {
+  clearInterval(interval); //清除定时器
   data.ViewData[i].show = !data.ViewData[i].show;
   data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
     name: item.name,
     data: item.data,
   }));
-  // console.log(data.DataViewing, 666);
-
-  // switch (value) {
-  //   case "医保支出万元以上":
-  //     data.ViewData[i].show = !data.ViewData[i].show;
-  //     break;
-  //   case "大病住院":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "高血压":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "糖尿病":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "高血脂":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "高血糖":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "残疾":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "低保":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "特困":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "其他疾病":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   default:
-  //     break;
-  // }
 };
-onMounted(() => {});
+const onViewData1 = (i) => {
+  data.ViewData[i].show = !data.ViewData[i].show;
+  data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
+    name: item.name,
+    data: item.data,
+  }));
+};
+
+let interval;
+let currentIndex = ref(0);
+
+const toggleShow = () => {
+  const length = data.ViewData.length;
+  if (length === 0) return;
+  const current = currentIndex.value;
+  const nextIndex = (currentIndex.value + 1) % length;
+  // 取反当前索引和下一个索引的 show 值
+  // data.ViewData[current].show = !data.ViewData[current].show;
+  data.ViewData[nextIndex].show = !data.ViewData[nextIndex].show;
+  onViewData1(current);
+  currentIndex.value = nextIndex;
+};
+
+const startAutoSwitching = () => {
+  interval = setInterval(toggleShow, 6000); // 每6秒切换一次
+};
+onMounted(() => {
+  startAutoSwitching();
+});
 
 onBeforeMount(() => {});
+
+onBeforeUnmount(() => {
+  clearInterval(interval); //清除定时器
+});
 </script>
 
 <style lang="scss" scoped>

src/view/echart_analyze/eP2 copy.vue

@@ -1,257 +0,0 @@
-<template>
-  <div ref="chart" style="width: 100%; height: 300px"></div>
-</template>
-
-<script setup>
-import { onBeforeMount, reactive, ref, watch } from "vue";
-// 局部引入echarts核心模块
-import * as echarts from "echarts";
-
-const chart = ref(); // 创建DOM引用
-const clear = ref(false);
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  list1: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  list2: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  year: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-});
-const sers = ref([
-  {
-    name: "背景",
-    type: "bar",
-    data: [],
-    showBackground: true,
-    backgroundStyle: {
-      color: "rgba(180, 180, 180, 0.2)",
-    },
-  },
-]);
-const data = reactive({
-  list: [],
-  list1: [],
-  list2: [],
-  year: [],
-  option: {},
-  bg: [],
-  name: [],
-  ser: [],
-  len: {
-    data: [],
-    top: "3%",
-    right: "5%",
-    textStyle: {
-      fontSize: 16,
-      color: "#ffffff",
-    },
-  },
-  formatter: "{b0}<br />",
-});
-
-const getOption = () => {
-  data.option = {
-    tooltip: {
-      trigger: "axis",
-      padding: [20, 10, 20, 10],
-      formatter: data.formatter,
-    },
-    legend: data.len,
-    grid: {
-      top: "35%",
-      left: "6%",
-      right: "6%",
-      bottom: "3%",
-      containLabel: true,
-    },
-    xAxis: {
-      type: "category",
-      data: data.year,
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-        },
-      },
-    },
-    yAxis: [
-      {
-        type: "value",
-        name: "人数/人",
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: "rgba(255, 255, 255, 0.2)",
-            fontSize: 16,
-            width: 1,
-          },
-        },
-        min: 0, // 设置Y轴最小值
-        max: function (value) {
-          // 自定义Y轴最大值，确保数据点显示在顶部
-          return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
-        },
-        nameTextStyle: {
-          // 设置Y轴名称的样式
-          fontSize: 14, // 这里设置字体大小为20
-        },
-        // axisLabel: {
-        //   //坐标轴刻度标签的相关设置
-        //   textStyle: {
-        //     color: "#ffffff",
-        //     fontSize: 16,
-        //   },
-        // },
-        axisLine: {
-          //y轴线的颜色以及宽度
-          show: false,
-          lineStyle: {
-            color: "#ffffff",
-            fontSize: 16,
-            width: 1,
-            type: "solid",
-          },
-        },
-      },
-      {
-        type: "value",
-        // name: "糖尿病",
-        splitLine: {
-          show: false,
-          lineStyle: {
-            color: "rgba(255, 255, 255, 0.2)",
-            fontSize: 16,
-            width: 1,
-          },
-        },
-        min: 0, // 设置Y轴最小值
-        max: function (value) {
-          // 自定义Y轴最大值，确保数据点显示在顶部
-          return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
-        },
-        nameTextStyle: {
-          // 设置Y轴名称的样式
-          fontSize: 14, // 这里设置字体大小为20
-        },
-        axisLabel: {
-          show: false,
-          //坐标轴刻度标签的相关设置
-        },
-        axisLine: {
-          //y轴线的颜色以及宽度
-          show: false,
-          lineStyle: {
-            color: "#ffffff",
-            fontSize: 16,
-            width: 1,
-            type: "solid",
-          },
-        },
-      },
-    ],
-    series: data.ser,
-  };
-};
-
-const setChart = () => {
-  var myChart = echarts.init(chart.value);
-  if (clear.value) {
-    myChart.clear();
-  }
-
-  myChart.setOption(data.option);
-};
-
-const setChart1 = () => {
-  data.ser.length = 0;
-  sers.value.forEach((item) => {
-    data.ser.push(item);
-  });
-  if (data.name.length > 0) {
-    data.list.forEach((item) => {
-      data.ser.push({
-        yAxisIndex: 0,
-        name: item.name,
-        type: "line",
-        symbol: "emptyCircle",
-        symbolSize: 10,
-        itemStyle: {
-          borderColor: "#2468FF",
-          borderWidth: 1,
-          color: "#2468FF",
-        },
-        label: {
-          show: true,
-          color: "#2468FF",
-          formatter: function (data) {
-            return data.value;
-          },
-        },
-
-        data: item.data,
-      });
-    });
-  }
-  // console.log("监听", data.ser);
-  // console.log("监听1", sers.value);
-};
-
-// 监听数据
-watch(
-  () => props.list,
-  (newVal, oldVal) => {
-    if (newVal.length < oldVal.length) {
-      clear.value = true;
-    } else {
-      clear.value = false;
-    }
-    data.list = newVal;
-    data.name = props.list.map((item) => item.name);
-    data.len.data = data.name;
-    sers.value[0].data = data.year.map((item) => 0);
-    data.formatter = "{b0}<br />";
-    if (data.name.length > 0) {
-      for (let i = 1; i <= data.name.length; i++) {
-        let s1 = `{a${i}}:{c${i}}<br />`;
-        data.formatter += s1;
-      }
-    }
-
-    setChart1();
-    getOption();
-    setChart();
-  }
-);
-// 使用生命钩子
-onBeforeMount(() => {
-  setTimeout(() => {
-    data.list = props.list;
-    data.year = props.year;
-    sers.value[0].data = data.year.map((item) => 0);
-    setChart1();
-    getOption();
-    setChart();
-  }, 600);
-});
-</script>
-
-<style scoped></style>

src/view/work.vue

@@ -176,7 +176,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
+import { ref, reactive, onMounted, onBeforeMount,onBeforeUnmount, computed } from "vue";
 import eP1 from "./echarts_work/eP1.vue";
 import eP2 from "./echarts_work/eP2.vue";
 import eP3 from "./echarts_work/eP3.vue";
@@ -449,6 +449,8 @@ onMounted(() => {
 
 onBeforeMount(() => {
   getData();
+});
+onBeforeUnmount(() => {
   clearInterval(interval); //清除定时器
 });
 </script>