onlinenew_manage/src/views/dataOverview/Echart3.vue

<template>
  <div class="content-box1">
    <div class="chart-wrap">
      <!-- 右上角表头 -->
      <div class="chart-header">
        <span class="h-rate">入住率</span>
        <span class="h-checked">已入住数</span>
        <span class="h-slash">/</span>
        <span class="h-total">床位开放总数</span>
      </div>
      <!-- ECharts 挂载点 -->
      <div ref="stayChartRef" class="chart-inner"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, nextTick, computed } from "vue";
import * as echarts from "echarts";
import { https } from "@/utils/request";
import { ElMessage } from "element-plus";

const stayChartRef = ref(null);
let stayChartInstance = null;

const props = defineProps({
  yearId: {
    type: [String, Number],
    default: "",
  },
});

const stayData = ref([]);

// 安全计算Y轴标签，空数据不会报错
const yData = computed(() => {
  if (!Array.isArray(stayData.value) || stayData.value.length === 0) return [];
  return stayData.value.map((item) => `${item.college}|${item.gender}`);
});

// 学院分隔虚线
const drawSeparators = () => {
  if (!stayChartInstance || !stayData.value.length) return;
  const lines = [];
  for (let i = 1; i < stayData.value.length; i += 2) {
    if (i + 1 >= stayData.value.length) continue;
    const y1 = stayChartInstance.convertToPixel({ yAxisIndex: 0 }, i);
    const y2 = stayChartInstance.convertToPixel({ yAxisIndex: 0 }, i + 1);
    const x1 = stayChartInstance.convertToPixel({ xAxisIndex: 0 }, 0);
    const x2 = stayChartInstance.convertToPixel({ xAxisIndex: 0 }, 100);
    if (y1 && y2 && x1 && x2) {
      lines.push({
        type: "line",
        shape: { x1, y1: (y1 + y2) / 2, x2, y2: (y1 + y2) / 2 },
        style: { stroke: "#ddd", lineWidth: 1, lineDash: [4, 4] },
        z: 100,
        silent: true,
      });
    }
  }
  stayChartInstance.setOption({ graphic: lines }, false);
};

// 图表初始化函数，增加DOM判空兜底
const stayInitChart = async (yearId) => {
  // 核心修复：先判断DOM是否存在，不存在直接终止，防止invalid dom
  if (!stayChartRef.value) return;

  // 实例存在则销毁重建，避免重复初始化报错
  if (stayChartInstance) {
    stayChartInstance.dispose();
    stayChartInstance = null;
  }
  stayChartInstance = echarts.init(stayChartRef.value);

  let params = { yearId };
  let res = await https.get("/welcome/api/welcomeStudent/collegeStudentStay", "params", params);
  console.log(res, "各学院住宿情况统计");

  if (res.code == 200) {
    const rawList = res.data;
    // 空数据兜底模板
    const emptyTemplate = [
      { college: "交通运输学院", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "交通运输学院", gender: "女", checked: 0, total: 0, rate: 0 },
      { college: "人工智能学院", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "人工智能学院", gender: "女", checked: 0, total: 0, rate: 0 },
      { college: "智能制造学院", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "智能制造学院", gender: "女", checked: 0, total: 0, rate: 0 },
      { college: "商学院", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "商学院", gender: "女", checked: 0, total: 0, rate: 0 },
      { college: "交通与土木工程学院", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "交通与土木工程学院", gender: "女", checked: 0, total: 0, rate: 0 },
      { college: "艺术与体育", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "艺术与体育", gender: "女", checked: 0, total: 0, rate: 0 },
      { college: "文法学院", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "文法学院", gender: "女", checked: 0, total: 0, rate: 0 },
      { college: "数智五金产业学院", gender: "男", checked: 0, total: 0, rate: 0 },
      { college: "数智五金产业学院", gender: "女", checked: 0, total: 0, rate: 0 },
    ];

    if (!rawList || rawList.length === 0) {
      stayData.value = emptyTemplate;
    } else {
      const tempArr = [];
      const sortOrder = [
        "交通运输学院",
        "人工智能学院",
        "智能制造学院",
        "商学院",
        "交通与土木工程学院",
        "艺术与体育",
        "文法学院",
        "数智五金产业学院",
      ];
      rawList.forEach((item) => {
        let name = item.collegeName === "艺术与体育学院" ? "艺术与体育" : item.collegeName;
        tempArr.push({
          college: name,
          gender: "男",
          checked: item.maleCheck,
          total: item.maleTotal,
          rate: item.maleRate,
        });
        tempArr.push({
          college: name,
          gender: "女",
          checked: item.femaleCheck,
          total: item.femaleTotal,
          rate: item.femaleRate,
        });
      });
      tempArr.sort((a) => sortOrder.indexOf(a.college));
      stayData.value = tempArr;
    }

    const rateList = stayData.value.map((item) => item.rate);
    const bgGrayList = stayData.value.map(() => 100);

    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
        formatter: (params) => {
          const row = stayData.value[params[0].dataIndex];
          return `${row.college} - ${row.gender}<br/>入住率：${row.rate}%<br/>已入住：${row.checked}<br/>床位总数：${row.total}`;
        },
      },
      grid: {
        left: 10,
        right: 230, // 加宽右侧预留空间，文字不会挤压
        top: 40,
        bottom: 10,
        containLabel: true,
      },
      xAxis: {
        type: "value",
        max: 100,
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
      },
      yAxis: {
        type: "category",
        inverse: true,
        data: yData.value,
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: {
          margin: 12,
          formatter: (value) => {
            const [college, gender] = value.split("|");
            return gender === "男"
              ? `{college|${college}}{gap|}{genderMale|男}`
              : `{spacer|}{gap|}{genderFemale|女}`;
          },
          rich: {
            college: { color: "#333", fontSize: 14,  width: 140 },
            spacer: { width: 140 },
            gap: { width: 10 },
            genderMale: { color: "#2F7FFF", fontSize: 12, width: 20 },
            genderFemale: { color: "#FF6B6B", fontSize: 12, width: 20 },
          },
        },
      },
      series: [
        {
          // 灰色 100% 背景条 —— label 挂在这里，不管数据有没有都在右侧
          name: "总床位基底",
          type: "bar",
          data: bgGrayList,
          barWidth: 8,
          itemStyle: { color: "#E8E8E8", borderRadius: [0, 4, 4, 0] },
          silent: true,
          animation: false,
          label: {
            show: true,
            position: "right",
            distance: 20,
            formatter: (params) => {
              const row = stayData.value[params.dataIndex];
              const colorKey = row.gender === "男" ? "blueNum" : "redNum";
              return `{rateTxt|${row.rate}%}  {${colorKey}|${row.checked}}{slash| / }{totalTxt|${row.total}}`;
            },
            rich: {
              rateTxt: {
                color: "#d93025",
                fontSize: 13,
                fontWeight: "bold",
                width: 40,
              },
              blueNum: {
                color: "#2F7FFF",
                fontSize: 13,
                fontWeight: "bold",
                width: 60,
                align: "right",
              },
              redNum: {
                color: "#FF6B6B",
                fontSize: 13,
                fontWeight: "bold",
                width: 60,
                align: "right",
              },
              slash: {
                color: "#333",
                fontSize: 13,
                width: 15,
                align: "center",
              },
              totalTxt: {
                color: "#333",
                fontSize: 13,
                fontWeight: "bold",
                width: 80,
              },
            },
          },
        },
        {
          // 已入住占比：男蓝女橙
          name: "已入住占比",
          type: "bar",
          data: rateList,
          barWidth: 8,
          barGap: "-100%",
          itemStyle: {
            color: (params) => stayData.value[params.dataIndex].gender === "男" ? "#2F7FFF" : "#FF6B6B",
            borderRadius: [0, 4, 4, 0],
          },
          label: { show: false },
        },
      ],
    };
    stayChartInstance.setOption(option);
    stayChartInstance.on("finished", function drawOnce() {
      setTimeout(drawSeparators, 0);
      stayChartInstance.off("finished", drawOnce);
    });
  } else {
    ElMessage({ type: "error", showClose: true, message: res.message, center: true });
  }
};

const handleResize = () => {
  if (stayChartRef.value && stayChartInstance) {
    stayChartInstance.resize();
    stayChartInstance.on("finished", function drawOnce() {
      setTimeout(drawSeparators, 0);
      stayChartInstance.off("finished", drawOnce);
    });
  }
};

// 监听年份，去掉immediate，挂载完成后再执行
watch(
  () => props.yearId,
  (newVal) => {
    nextTick(() => stayInitChart(newVal));
  }
);

onMounted(() => {
  // 仅DOM挂载完成后执行初始化，彻底解决DOM不存在问题
  nextTick(() => stayInitChart(props.yearId));
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  if (stayChartInstance) stayChartInstance.dispose();
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped lang="scss">
.content-box1 {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto 0;
  background-color: #ffffff;
  color: #000;
  display: flex;
  flex-direction: column;
  overflow: auto;

  .system_title {
    height: 45px;
    border-radius: 0 12px 0 0;
    background: rgb(243, 249, 255);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    h4 {
      font-size: 15px;
      padding: 0 5px 0 20px;
      margin: 0;
    }
  }

  .chart-wrap {
    position: relative;
    width: 100%;
    height: 480px;
  }
  .chart-inner {
    width: 100%;
    height: 100%;
  }
  .chart-header {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 260px; /* 和grid.right保持一致，表头对齐下方文字 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    font-size: 13px;
    color: #666;
    font-weight: bold;
    z-index: 10;
    user-select: none;
    pointer-events: none;
    span {
      display: inline-block;
      flex-shrink: 0;
    }
    .h-rate { width: 70px; text-align: right; }
    .h-checked { width: 70px; text-align: right; }
    .h-slash { width: 25px; text-align: center; }
    .h-total { width: 60px; text-align: left; }
  }
}
</style>