比例修改

杨磊

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="
@@ -344,12 +357,33 @@
      chartData: treeData,
      currentNodeInfo: {},
      tooltipShow: false,
      legendList: [
        {
          color: "#87A7B9",
          name: "北京中医大学",
        },
        {
          color: "#C48787",
          name: "北京师范大学",
        },
        {
          color: "#6F8F5A",
          name: "中国中医科学院",
        },
        {
          color: "#937950",
          name: "广州中医药大学",
        },
        {
          color: "#8D77B3",
          name: "拜师弟子",
        },
      ],
    };
  },

  mounted() {
    this.initChart();

    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
@@ -362,10 +396,15 @@
    changeTab(key) {
      this.activeTabs = key;
      console.log(this.activeTabs, "activeTabs");
      if (key == "chart") {
        this.$nextTick(() => {
          this.initChart();
          window.addEventListener("resize", this.handleResize);
        });
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      const option = {
        tooltip: {
          trigger: "item",
@@ -402,12 +441,12 @@
          },
        },
        textStyle: {
          color: "#bc1c00" // 设置整体字体颜色为红色
          color: "#bc1c00", // 设置整体字体颜色为红色
        },
        edgeLabel: {
          normal: {
            color: "#bc1c00" // 设置线条的颜色为红色
          }
            color: "#bc1c00", // 设置线条的颜色为红色
          },
        },
        series: [
          {
@@ -454,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) {
@@ -574,10 +601,12 @@
    /* 移除最后一行的下边框 */
  }
}

.charts-main {
  // background-color: #000;
  position: relative;
}

.table-title {
  display: flex;
  align-items: center;
@@ -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>