Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/analyze.vue

@@ -44,12 +44,7 @@
               <span> {{ item.name }}</span>
             </div>
           </div>
-          <eP2
+          <eP2 :list="data.DataViewing" :year="data.leftCenterYear"></eP2>
-            :list="data.DataViewing"
-            :list1="data.leftCenter3"
-            :list2="data.leftCenter4"
-            :year="data.leftCenterYear"
-          ></eP2>
         </div>
       </div>
     </div>
@@ -65,7 +60,7 @@
         <div class="minTopNum">
           <div
             class="numItem"
-            v-for="(item, inex) in minData.minTop"
+            v-for="(item, index) in minData.minTop"
             :key="index"
           >
             {{ item }}
@@ -119,7 +114,7 @@
             <i></i>
           </div>
         </div>
-          <!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
+        <!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
         <right2></right2>
       </div>
       <div class="flex1">
@@ -136,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";
@@ -170,7 +172,7 @@ const data = reactive({
     {
       name: "医保支出万元以上",
       value: "11112",
-      show: false,
+      show: true,
       data: ["100", "120", "199", "133", "210"], //医保支出万元以上
     },
     {
@@ -189,19 +191,19 @@ const data = reactive({
       name: "糖尿病",
       value: "1241",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //糖尿病
+      data: ["100", "120", "19", "133", "210"], //糖尿病
     },
     {
       name: "高血脂",
       value: "1414",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血脂
+      data: ["100", "120", "199", "13", "210"], //高血脂
     },
     {
       name: "高血糖",
       value: "2355",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血糖
+      data: ["100", "120", "199", "133", "10"], //高血糖
     },
     {
       name: "残疾",
@@ -228,11 +230,16 @@ const data = reactive({
       data: ["100", "120", "199", "133", "210"], //其他疾病
     },
   ],
-  DataViewing: {}, //数据查看
+  DataViewing: [
-  leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
+    {
-  leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
+      name: "医保支出万元以上",
-  leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
+      data: ["100", "120", "199", "133", "210"], //医保支出万元以上
+    },
+  ], //数据查看
   leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
+  // leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
+  // leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
+  // leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
 
   zccs1: ["图书馆", "交通出行", "景区"], //一码通
   zccs2: ["100", "130", "220"], //一码通
@@ -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>
@@ -569,8 +573,10 @@ onBeforeMount(() => {});
     display: flex;
     flex-wrap: wrap;
     color: #ffffff;
+    margin-top: 14px;
     .ViewDataTop {
       width: 114px;
+      height: 132px;
       display: flex;
       align-items: center;
       flex-direction: column;
@@ -581,9 +587,10 @@ onBeforeMount(() => {});
         background-size: 100% 100%;
         width: 80px;
         height: 80px;
-        margin-bottom: -24px;
+        margin-bottom: -28px;
         text-align: center;
         line-height: 100px;
+        animation: moveUpDown 2s infinite;
       }
       .ViewDataTopimg_1 {
         background-image: url(@/assets/images/sjfx/sjfx1.png);
@@ -594,18 +601,31 @@ onBeforeMount(() => {});
       }
       .ViewDataBottomimg {
         background-image: url(@/assets/images/sjfx/sjfx2.png);
-        background-repeat: no-repeat;
+        animation: scaleUpDown 2s infinite;
-        background-size: 100% 100%;
+        // transform: scale(1.3);
-        width: 80px;
-        height: 80px;
-        margin-bottom: -24px;
       }
       .ViewDataBottomimg_1 {
         background-image: url(@/assets/images/sjfx/sjfx3.png);
-        background-repeat: no-repeat;
+        margin-top: 4px;
-        background-size: 100% 100%;
+      }
-        width: 105px;
+
-        height: 57px;
+      @keyframes moveUpDown {
+        0%,
+        100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-10px);
+        }
+      }
+      @keyframes scaleUpDown {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
       }
     }
   }

src/view/echart_analyze/eP2.vue

@@ -1,81 +1,113 @@
 <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 ser = 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: "5%",
+    top: "3%",
-    right: "10%",
+    right: "5%",
     textStyle: {
       fontSize: 16,
       color: "#ffffff",
     },
   },
+  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: {
       trigger: "axis",
       padding: [20, 10, 20, 10],
-      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
+      formatter: data.formatter,
     },
-    legend: data.len,
+    legend: data.legend,
     grid: {
-      top: "25%",
+      top: "35%",
       left: "6%",
       right: "6%",
       bottom: "3%",
@@ -85,11 +117,8 @@ const getOption = () => {
       type: "category",
       data: data.year,
       axisLabel: {
-        //坐标轴刻度标签的相关设置
+        color: "#ffffff",
-        textStyle: {
+        fontSize: 16,
-          color: "#ffffff",
-          fontSize: 16,
-        },
       },
     },
     yAxis: [
@@ -104,24 +133,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",
@@ -133,7 +151,6 @@ const getOption = () => {
       },
       {
         type: "value",
-        // name: "糖尿病",
         splitLine: {
           show: false,
           lineStyle: {
@@ -142,21 +159,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",
@@ -167,66 +179,39 @@ 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 = ser.value;
-  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,
-      });
-    });
-  }
-};
-
-// 监听数据
 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);
+    updateSeries();
-    data.len.data=data.name;
+    getOption();
-    // console.log(55555, data.name);
-    setChart1();
     setChart();
   }
 );
-// 使用生命钩子
+
-onBeforeMount(() => {
+onMounted(() => {
-  setTimeout(() => {
+  data.list = props.list;
-    data.list = props.list;
+  data.year = props.year;
-    data.year = props.year;
+  updateSeries();
-    ser.value[0].data = data.year.map((item) => 0);
+  getOption();
-    setChart1();
+  setChart();
-    getOption();
-    setChart();
-  }, 600);
 });
 </script>
 

src/view/echart_analyze/right1.vue

@@ -115,7 +115,7 @@ let option = {
         // formatter: '{c}%' // 这里是数据展示的时候显示的数据
       }, // 柱子上方的数值
       itemStyle: {
-        normal: {
+        // normal: {
           borderWidth: 1,
           //   borderColor: "rgba(0, 183, 255, 1)",
           borderRadius: [0, 0, 50, 0], //圆角边框
@@ -123,7 +123,7 @@ let option = {
             { offset: 0, color: "rgba(0, 183, 255, 0)" },
             { offset: 1, color: "rgba(0, 183, 255, 1)" },
           ]),
-        },
+        // },
       },
       barWidth: 10,
       data: data2,

src/view/echart_analyze/right2.vue

@@ -10,7 +10,6 @@ import * as echarts from "echarts";
 const chart = ref(); // 创建DOM引用
 
 const colors = [
-
   {
     left: "rgba(234, 162, 57, .16)",
     right: "rgba(234, 162, 57, .6)",
@@ -32,11 +31,13 @@ const colors = [
     bottom: "rgba(60, 143, 255, .46)",
     front: "rgba(60, 143, 255, .66)",
   },
-
 ];
-const maxList = [90, 90, 90, 90, 90, 90, 90];
+const maxList = ref([]);
-const valueList = [20, 53, 47, 65, 29, 11, 50];
+const valueList = [20, 53, 47, 65, 29, 11, 10];
-
+const data = reactive({
+  option: {},
+  Max: 100,
+});
 // 注册5个面图形:左侧、前面、右面、上面、下面
 //c0:左下角，c1：右下角,c2:右上角，c3：左上角
 // 绘制左侧面-ok rgba(103, 180, 233, 0.04)
@@ -145,290 +146,304 @@ echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
 echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
 echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
 echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}:{c1}",
+    },
+    grid: {
+      left: 10,
+      right: 0,
+      bottom: 20,
+      top: 20,
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: [
+          "小奔通",
+          "两慢病",
+          "水费",
+          "就业招工",
+          "零工市厂匹配",
+          "医保",
+          "交通出行",
+        ],
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
 
-const option = {
+        axisTick: {
-  tooltip: {
+          show: false,
-    trigger: "axis",
+        },
-    formatter: "{b0}:{c1}",
+        axisLabel: {
-  },
+          show: true,
-  grid: {
+          color: "#fff",
-    left: 10,
+          fontSize: 16,
-    right: 0,
+          formatter: function (value) {
-    bottom: 20,
+            return value.length > 3 ? value.slice(0, 2) + "..." : value;
-    top: 20,
+          },
-    containLabel: true,
+        },
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: [
-        "小奔通",
-        "两慢病",
-        "水费",
-        "就业招工",
-        "零工市厂匹配",
-        "医保",
-        "交通出行",
-      ],
-      axisLine: {
-        show: false,
       },
-      offset: 10,
+      {
+        type: "category",
+        data: [
+          "小奔通",
+          "两慢病",
+          "水费",
+          "就业招工",
+          "零工市厂匹配",
+          "医保",
+          "交通出行",
+        ],
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
 
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+          color: "#fff",
+          fontSize: 16,
+        },
+      },
+    ],
+    yAxis: {
+      min: 0,
+      // max: 200,
+      max: data.Max,
+      interval: 20,
+      type: "value",
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
       axisTick: {
         show: false,
       },
       axisLabel: {
         show: true,
-        color: "#fff",
         fontSize: 16,
-        formatter: function (value) {
-
-          return value.length > 3 ? value.slice(0, 2) + "..." : value;
-        },
-      },
-    },
-    {
-      type: "category",
-      data: [
-        "小奔通",
-        "两慢病",
-        "水费",
-        "就业招工",
-        "零工市厂匹配",
-        "医保",
-        "交通出行",
-      ],
-      axisLine: {
-        show: false,
-      },
-      offset: 10,
-
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
         color: "#fff",
-        fontSize: 16,
       },
     },
-  ],
+    series: [
-  yAxis: {
+      //阴影部分
-    min: 0,
+      {
-    max: 100,
+        type: "custom",
-    interval: 20,
+        renderItem: function (params, api) {
-    type: "value",
+          console.log(api);
-    axisLine: {
+          const location = api.coord([api.value(0), api.value(1)]);
-      show: true,
+          return {
-      lineStyle: {
+            type: "group",
-        color: "rgba(255, 255, 255, .16)",
+            children: [
-      },
+              {
-    },
+                type: "CubeBottom_1",
-    splitLine: {
+                shape: {
-      show: true,
+                  api,
-      lineStyle: {
+                  x: location[0],
-        type: "dashed",
+                  y: location[1],
-        color: "rgba(255, 255, 255, .16)",
+                  xAxisPoint: api.coord([api.value(0), 0]),
-      },
+                },
-    },
+                style: {
-    axisTick: {
+                  fill: "rgba(103, 180, 233, .16)",
-      show: false,
+                },
-    },
-    axisLabel: {
-      show: true,
-      fontSize: 16,
-      color: "#fff",
-    },
-  },
-  series: [
-    //阴影部分
-    {
-      type: "custom",
-      renderItem: function (params, api) {
-        console.log(api);
-        const location = api.coord([api.value(0), api.value(1)]);
-        return {
-          type: "group",
-          children: [
-            {
-              type: "CubeBottom_1",
-              shape: {
-                api,
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
               },
-              style: {
+              {
-                fill: "rgba(103, 180, 233, .16)",
+                type: "CubeLeft_1",
+                shape: {
+                  api,
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: "rgba(103, 180, 233, .04)",
+                },
               },
-            },
+              {
-            {
+                type: "CubeFront_1",
-              type: "CubeLeft_1",
+                shape: {
-              shape: {
+                  api,
-                api,
+                  x: location[0],
-                x: location[0],
+                  y: location[1],
-                y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
-                xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: "rgba(103, 180, 233, .16)",
+                },
               },
-              style: {
+              {
-                fill: "rgba(103, 180, 233, .04)",
+                type: "CubeRight_1",
+                shape: {
+                  api,
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: "rgba(103, 180, 233, .08)",
+                },
               },
-            },
+              {
-            {
+                type: "CubeTop_1",
-              type: "CubeFront_1",
+                shape: {
-              shape: {
+                  api,
-                api,
+                  x: location[0],
-                x: location[0],
+                  y: location[1],
-                y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
-                xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: "rgba(103, 180, 233, .26)",
+                },
               },
-              style: {
+            ],
-                fill: "rgba(103, 180, 233, .16)",
+          };
-              },
-            },
-            {
-              type: "CubeRight_1",
-              shape: {
-                api,
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
-              },
-              style: {
-                fill: "rgba(103, 180, 233, .08)",
-              },
-            },
-            {
-              type: "CubeTop_1",
-              shape: {
-                api,
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
-              },
-              style: {
-                fill: "rgba(103, 180, 233, .26)",
-              },
-            },
-          ],
-        };
-      },
-      data: maxList,
-    },
-    {
-      type: "custom",
-      renderItem: (params, api) => {
-        const location = api.coord([api.value(0), api.value(1)]);
-
-        return {
-          type: "group",
-          children: [
-            {
-              type: "CubeBottom_1",
-              shape: {
-                api,
-                xValue: api.value(0),
-                yValue: api.value(1),
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
-              },
-              style: {
-                fill: colors[`${params.dataIndexInside % 3}`]["bottom"],
-              },
-            },
-            {
-              type: "CubeLeft_1",
-              shape: {
-                api,
-                xValue: api.value(0),
-                yValue: api.value(1),
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
-              },
-              style: {
-                fill: colors[`${params.dataIndexInside % 3}`]["left"],
-              },
-            },
-            {
-              type: "CubeFront_1",
-              shape: {
-                api,
-                xValue: api.value(0),
-                yValue: api.value(1),
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
-              },
-              style: {
-                fill: colors[`${params.dataIndexInside % 3}`]["front"],
-              },
-            },
-            {
-              type: "CubeRight_1",
-              shape: {
-                api,
-                xValue: api.value(0),
-                yValue: api.value(1),
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
-              },
-              style: {
-                fill: colors[`${params.dataIndexInside % 3}`]["right"],
-              },
-            },
-            {
-              type: "CubeTop_1",
-              shape: {
-                api,
-                xValue: api.value(0),
-                yValue: api.value(1),
-                x: location[0],
-                y: location[1],
-                xAxisPoint: api.coord([api.value(0), 0]),
-              },
-              style: {
-                fill: colors[`${params.dataIndexInside % 3}`]["top"],
-              },
-            },
-          ],
-        };
-      },
-
-      data: valueList,
-    },
-    //顶部字体
-    {
-      type: "bar",
-      xAxisIndex: 1,
-      label: {
-        show: true,
-        fontSize: 18,
-        position: "top",
-        color: "#ffffff",
-        formatter: function (data) {
-          return data.value -5;
         },
+        data: maxList.value,
       },
-      itemStyle: {
+      {
-        color: "rgba(221, 242, 255, 0)",
+        type: "custom",
-      },
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
 
-      data: valueList.map((item) => item + 5),
+          return {
-      barWidth: 20,
+            type: "group",
-    },
+            children: [
-  ],
+              {
+                type: "CubeBottom_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[`${params.dataIndexInside % 3}`]["bottom"],
+                },
+              },
+              {
+                type: "CubeLeft_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[`${params.dataIndexInside % 3}`]["left"],
+                },
+              },
+              {
+                type: "CubeFront_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[`${params.dataIndexInside % 3}`]["front"],
+                },
+              },
+              {
+                type: "CubeRight_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[`${params.dataIndexInside % 3}`]["right"],
+                },
+              },
+              {
+                type: "CubeTop_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[`${params.dataIndexInside % 3}`]["top"],
+                },
+              },
+            ],
+          };
+        },
+
+        data: valueList,
+      },
+      //顶部字体
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        label: {
+          show: true,
+          fontSize: 18,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value - 5;
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0)",
+        },
+
+        data: valueList.map((item) => item + 5),
+        barWidth: 20,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+const getMaxCeilingValue = (arr) => {
+  let max = Math.max(...arr);
+  return Math.ceil(max / 100) * 100;
 };
 
-onMounted(() => {
+onBeforeMount(() => {
-  var myChart = echarts.init(chart.value);
+  setTimeout(() => {
-
+    data.Max = getMaxCeilingValue(valueList);
-  myChart.setOption(option);
+    maxList.value = valueList.map((item) => data.Max * 0.9);
+    getOption();
+    setChart();
+  }, 600);
 });
+
 </script>
 
 <style lang="scss" scoped>
 </style>
+

src/view/echart_analyze/ylXZZC.vue

@@ -179,7 +179,7 @@ const getOption = () => {
         barMaxWidth: 20, // 每一个都要设置
         barMinWidth: 5, // 每一个都要设置
         itemStyle: {
-          normal: {
+          // normal: {
             borderWidth: 1,
             borderColor: "rgba(0, 183, 255, 1)",
             borderRadius: [0, 0, 50, 0], //圆角边框
@@ -187,7 +187,7 @@ const getOption = () => {
               { offset: 0, color: "rgba(26, 255, 217, 0)" },
               { offset: 1, color: "rgba(0, 183, 255, 1)" },
             ]),
-          },
+          // },
         },
         label: {
           show: true,

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>