比例修改

杨磊

2025-04-08 7f6fa75678e36a992f3037ce530d0226f0dd2128

 src/views/directory/index.vue

@@ -22,7 +22,16 @@
    <!-- 图表显示 -->
    <div class="charts-main" v-if="activeTabs == 'chart'">
      <div class="radial-tree-container">
        <div ref="chart" style="width: 100%; height: 600px"></div>
        <div ref="chart" style="width: 100%; height: 70vh"></div>
      </div>

      <div class="legend">
        <div class="tagItem" v-for="(item, index) in legendList" :key="index">
          <div class="tagColor" :style="{ background: item.color }"></div>
          <div class="tagText" :style="{ color: item.color }">
            {{ item.name }}
          </div>
        </div>
      </div>
      <transition name="el-fade-in-linear">
        <div class="tooltipBox" v-show="tooltipShow">
@@ -36,6 +45,10 @@
              text-align: center;
            "
          >
            <div class="closeBtn" @click="tooltipShow = false">
              <i class="el-icon-close"></i>
            </div>

            <div style="display: flex">
              <div
                style="
@@ -111,7 +124,10 @@
    <!-- 列表显示 -->
    <div class="page-main" v-if="activeTabs == 'list'">
      <div v-for="(item, index) in universityList" :key="index">
        <div class="table-title" v-if="item.studentList && item.studentList.length > 0">
        <div
          class="table-title"
          v-if="item.studentList && item.studentList.length > 0"
        >
          <div class="table-title-left">
            <p class="table-title-name">{{ item.name }}</p>
            <p class="table-title-degree">{{ item.degree }}</p>
@@ -121,7 +137,10 @@
            <img :src="[item.isShow ? topIcon : bottomIcon]" alt="" />
          </div>
        </div>
        <table cellpadding="100" v-if="item.studentList && item.studentList.length > 0 && item.isShow">
        <table
          cellpadding="100"
          v-if="item.studentList && item.studentList.length > 0 && item.isShow"
        >
          <tr class="table-heading">
            <th>姓名</th>
            <th>性别</th>
@@ -338,6 +357,28 @@
      chartData: treeData,
      currentNodeInfo: {},
      tooltipShow: false,
      legendList: [
        {
          color: "#87A7B9",
          name: "北京中医大学",
        },
        {
          color: "#C48787",
          name: "北京师范大学",
        },
        {
          color: "#6F8F5A",
          name: "中国中医科学院",
        },
        {
          color: "#937950",
          name: "广州中医药大学",
        },
        {
          color: "#8D77B3",
          name: "拜师弟子",
        },
      ],
    };
  },

@@ -400,12 +441,12 @@
          },
        },
        textStyle: {
          color: "#bc1c00" // 设置整体字体颜色为红色
          color: "#bc1c00", // 设置整体字体颜色为红色
        },
        edgeLabel: {
          normal: {
            color: "#bc1c00" // 设置线条的颜色为红色
          }
            color: "#bc1c00", // 设置线条的颜色为红色
          },
        },
        series: [
          {
@@ -452,22 +493,10 @@
      };

      this.chart.setOption(option);

      this.chart.on(
        "showTip",
        debounce((event) => {
          console.log("显示时的回调", event);
          this.tooltipShow = true;
        }, 500)
      );

      this.chart.on(
        "hideTip",
        debounce((event) => {
          console.log("隐藏时的回调", event);
          this.tooltipShow = false;
        }, 500)
      );
      this.chart.on("click", (params) => {
        console.log("点击时的回调", params);
        this.tooltipShow = true;
      });
    },
    handleResize() {
      if (this.chart) {
@@ -627,7 +656,29 @@
  max-width: 500px;
  background-color: #fdf8f0;
  position: absolute;
  bottom: -60px;
  right: 40px;
  top: 12vh;
}
.closeBtn {
  position: absolute;
  top: 10px;
  right: 0;
  cursor: pointer;
}
.legend {
  position: absolute;
  bottom: 300px;
  left: 100px;
}
.tagItem {
  display: flex;
  margin-top: 20px;
}
.tagColor {
  width: 20px;
  height: 20px;
}
.tagText {
  margin-left: 30px;
}
</style>