222

YM

2024-05-17 0b4fa4b2cfd68528d15aa71557425a7a80e3fc41

 src/pages/inherit/index.vue

@@ -110,10 +110,13 @@
  onLoad(options) {
    this.idIndex = options.id;
    console.log("optionsoptionsoptions", options.id);
    getDynasty()
  },
  mounted() {
    this.getStatistics();
    this.getData();
    this.getDynasty()

  },
  methods: {
    getStatistics() {
@@ -155,18 +158,18 @@
      //通过 $ref 进行挂载
      let myChart = echarts.init(this.$refs.barChart);

      let FontSize = 12; // 字体大小
      let FontSize = 18; // 字体大小
      let BorderWidth = 2; // 边框大小
      let SymbolSize = 80; // 尺寸距离
      let Distance = 10;
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        FontSize = 20;
        BorderWidth = 5;
        SymbolSize = 100;
        Distance = 33;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        FontSize = 20;
        BorderWidth = 4;
        SymbolSize = 90;
        Distance = 22;
@@ -179,14 +182,14 @@

      let option = {
        title: {
          text: [""]
          text: [""],
        },
        backgroundColor: {
          type: "image",
          image: "/static/image/WMBg.png",
          repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
          position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
          position: "center center", // 背景图片的位置，可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        animationDurationUpdate: 1500,
@@ -195,13 +198,13 @@
          {
            type: "graph",
            layout: "force",
            symbolSize: 120,
            symbolSize: 100,
            //是否允许用户拖动图片
            roam: true,
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
              fontSize: FontSize, // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
@@ -216,7 +219,7 @@
                // params.data 是边的数据对象，你可以在这里定义关系名
                // 例如，你可以根据 source 和 target 的名称来定义关系名
                return params.data.relationName; // 如果定义了 relationName 则显示它，否则显示“父子”
              }
              },
            },
            //各个节点
            data: this.nodeData,
@@ -224,20 +227,25 @@
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
              curveness: 0,
            },
            force: {
              // initLayout: 'circular',
              // gravity: 0
              friction: 0.1,
              repulsion: 500,
              edgeLength: 6
            }
          }
        ]
              edgeLength: 6,
            },
          },
        ],
      };
      //进行渲染
      myChart.setOption(option);
      myChart.getZr().on("click", (params) => {
        if (!params.target) {
          this.showTool = false;
        }
      });
      myChart.on("click", (params) => {
        console.log(params.event.offsetX, params.event.offsetY);
        if (params.componentType === "series") {
@@ -248,6 +256,8 @@
            id: params.data.identifier,
            name: encodeURIComponent(params.data.name)
          };
        } else {
          this.showTool = false;
        }
      });
    },
@@ -419,8 +429,8 @@
  box-shadow: 1px 1px 5px #888888;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 0.25rem;
  width: 1.4rem;
  height: 0.3rem;
  margin-left: 0.2rem;
  border-radius: 0.13rem;
  float: left;
@@ -433,8 +443,8 @@
  box-shadow: 1px 1px 5px #888888;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 0.25rem;
  width: 1.6rem;
  height: 0.3rem;
  float: left;
  margin-left: 0.2rem;
  border-radius: 0.13rem;
@@ -454,7 +464,7 @@
}
.filterText {
  margin-left: 10px;
  font-size: 16px;
  font-size: 0.16rem;
}
.fontColor {
  color: #827e44 !important;