gx

src/view/analyze.vue

@@ -260,7 +260,7 @@ const onViewData = (value, i) => {
     name: item.name,
     data: item.data,
   }));
-  console.log(data.DataViewing, 666);
+  // console.log(data.DataViewing, 666);
 
   // switch (value) {
   //   case "医保支出万元以上":

src/view/echart_analyze/eP2 copy.vue

@@ -0,0 +1,257 @@
+<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/echart_analyze/eP2.vue

@@ -1,72 +1,92 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 260px"></div>
+  <div ref="chart" style="width: 100%; height: 320px"></div>
 </template>
 
 <script setup>
-import { onBeforeMount, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
-// 局部引入echarts核心模块
 import * as echarts from "echarts";
 
-const chart = ref(); // 创建DOM引用
+const chart = ref();
 const clear = ref(false);
 const props = defineProps({
-  list: {
+  list: Array,
-    type: Array,
+  year: 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: [],
+  formatter: "{b0}<br />",
-  len: {
+  series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+  legend: {
     data: [],
-    top: "0%",
+    top: "3%",
     right: "5%",
     textStyle: {
       fontSize: 16,
       color: "#ffffff",
     },
   },
-  formatter: "{b0}<br />",
+  bgColor: ["#2468FF", "#E8FF00", "#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#57FF33", "#33FFA1", "#A133FF", "#FF5733"],
 });
 
+const updateSeries = () => {
+  data.series = [
+    {
+      name: "背景",
+      type: "bar",
+      data: data.year.map(() => 0),
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ];
+
+  if (data.list.length > 0) {
+    data.list.forEach((item, index) => {
+      const color = data.bgColor[index % data.bgColor.length];
+      data.series.push({
+        yAxisIndex: 0,
+        name: item.name,
+        type: "line",
+        symbol: "emptyCircle",
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: color,
+          borderWidth: 1,
+          color: color,
+        },
+        label: {
+          show: true,
+          color: color,
+          formatter: (data) => data.value,
+        },
+        data: item.data,
+      });
+    });
+  }
+
+  data.legend.data = data.list.map((item) => item.name);
+  data.formatter =
+    "{b0}<br />" +
+    data.list
+      .map((_, index) => `{a${index + 1}}:{c${index + 1}}<br />`)
+      .join("");
+};
+
 const getOption = () => {
   data.option = {
     tooltip: {
@@ -74,7 +94,7 @@ const getOption = () => {
       padding: [20, 10, 20, 10],
       formatter: data.formatter,
     },
-    legend: data.len,
+    legend: data.legend,
     grid: {
       top: "35%",
       left: "6%",
@@ -86,7 +106,6 @@ const getOption = () => {
       type: "category",
       data: data.year,
       axisLabel: {
-        //坐标轴刻度标签的相关设置
         textStyle: {
           color: "#ffffff",
           fontSize: 16,
@@ -105,24 +124,13 @@ const getOption = () => {
             width: 1,
           },
         },
-        min: 0, // 设置Y轴最小值
+        min: 0,
-        max: function (value) {
+        max: (value) =>
-          // 自定义Y轴最大值，确保数据点显示在顶部
+          Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50,
-          return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
-        },
         nameTextStyle: {
-          // 设置Y轴名称的样式
+          fontSize: 14,
-          fontSize: 14, // 这里设置字体大小为20
         },
-        // axisLabel: {
-        //   //坐标轴刻度标签的相关设置
-        //   textStyle: {
-        //     color: "#ffffff",
-        //     fontSize: 16,
-        //   },
-        // },
         axisLine: {
-          //y轴线的颜色以及宽度
           show: false,
           lineStyle: {
             color: "#ffffff",
@@ -134,7 +142,6 @@ const getOption = () => {
       },
       {
         type: "value",
-        // name: "糖尿病",
         splitLine: {
           show: false,
           lineStyle: {
@@ -143,21 +150,16 @@ const getOption = () => {
             width: 1,
           },
         },
-        min: 0, // 设置Y轴最小值
+        min: 0,
-        max: function (value) {
+        max: (value) =>
-          // 自定义Y轴最大值，确保数据点显示在顶部
+          Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50,
-          return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
-        },
         nameTextStyle: {
-          // 设置Y轴名称的样式
+          fontSize: 14,
-          fontSize: 14, // 这里设置字体大小为20
         },
         axisLabel: {
           show: false,
-          //坐标轴刻度标签的相关设置
         },
         axisLine: {
-          //y轴线的颜色以及宽度
           show: false,
           lineStyle: {
             color: "#ffffff",
@@ -168,54 +170,18 @@ const getOption = () => {
         },
       },
     ],
-    series: data.ser,
+    series: data.series,
   };
 };
 
 const setChart = () => {
-  var myChart = echarts.init(chart.value);
+  const 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) => {
@@ -225,32 +191,18 @@ watch(
       clear.value = false;
     }
     data.list = newVal;
-    data.name = props.list.map((item) => item.name);
+    updateSeries();
-    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(() => {
+onMounted(() => {
-  setTimeout(() => {
+  data.list = props.list;
-    data.list = props.list;
+  data.year = props.year;
-    data.year = props.year;
+  updateSeries();
-    sers.value[0].data = data.year.map((item) => 0);
+  getOption();
-    setChart1();
+  setChart();
-    getOption();
-    setChart();
-  }, 600);
 });
 </script>