1

YM

2024-07-12 0326804dd7bf985d1912abbab10dec84923acef6

 src/pages/inherit/index.vue

@@ -95,7 +95,7 @@
          </div>
        </div>
      </div>
      <div style="padding-left: 0.5rem; margin-top: 20px">
      <div style="padding-left: 0.5rem; margin-top: 0.1rem">
        共 {{ totalCount }}个世医
      </div>
    </div>
@@ -122,7 +122,13 @@
        :style="{ top: toolTop, left: toolLeft }"
      >
        <div class="toolItem" @click="gotoDetail(1)">个人信息</div>
        <div class="toolItem" @click="gotoDetail(2)">世医文化</div>
        <div
          class="toolItem"
          style="position: relative; top: -40px"
          @click="gotoDetail(2)"
        >
          世医文化
        </div>
        <div class="toolItem" @click="gotoDetail(3)">世医传承</div>
      </div>
    </div>
@@ -288,29 +294,59 @@
              friction: 0.1,
              repulsion: 500,
              edgeLength: 6
            },
            selectedMode: "single",
            select: {
              itemStyle: {
                color: "#e8f3ff",
                borderColor: "#284e74",
                borderWidth: "3"
              }
            }
          }
        ]
      };
      let selectData = [];
      //进行渲染
      myChart.setOption(option);
      myChart.getZr().on("click", (params) => {
        if (!params.target) {
      // myChart.getZr().on("click", (params) => {
      //   console.log(params);
      //   console.log(selectData);
      //   if (!params.target) {
      //     this.showTool = false;
      //   }
      // });
      myChart.on("click", (params) => {
        if (selectData.length > 0) {
          let x = params.event.target.transform[4];
          let y = params.event.target.transform[5];
          if (params.componentType === "series") {
            this.showTool = true;
            this.toolTop = y - 70 + "px";
            this.toolLeft = x - 163 + "px";
            this.toolInfo = {
              id: params.data.identifier,
              name: encodeURIComponent(params.data.name)
            };
          } else {
            this.showTool = false;
          }
        }
      });
      myChart.on("selectchanged", (params) => {
        if (params.fromAction == "select") {
          selectData = params.selected[0].dataIndex;
        } else {
          selectData = [];
          this.showTool = false;
        }
      });
      myChart.on("click", (params) => {
        if (params.componentType === "series") {
          this.showTool = true;
          this.toolTop = params.event.offsetY + "px";
          this.toolLeft = params.event.offsetX + "px";
          this.toolInfo = {
            id: params.data.identifier,
            name: encodeURIComponent(params.data.name)
          };
        } else {
          this.showTool = false;
        }
      myChart.on("graphroam", (params) => {
        this.showTool = false;
        myChart.dispatchAction({
          type: "unselect",
          dataIndex: selectData
        });
      });
    },
    gotoDetail(type) {
@@ -421,6 +457,7 @@
  font-size: 0.12rem;
  cursor: pointer;
  background-color: #fff;
  display: inline-block;
}
.toolItem:hover {
  background-color: #efefef;
@@ -464,12 +501,12 @@
  display: flex;
  margin-top: 0.2rem;
  width: 100%;
  padding: 0.1rem 0.5rem;
  padding: 0 0.5rem;
}
.condition {
  display: flex;
  width: 100%;
  padding: 0.1rem 0.5rem;
  padding: 0 0.5rem;
}
.filterList {
  flex: 1;
@@ -482,7 +519,6 @@
  box-shadow: 1px 1px 5px #888888;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 0.3rem;
  margin-left: 0.2rem;
  border-radius: 0.13rem;
@@ -490,13 +526,14 @@
  margin-top: 0.02rem;
  margin-bottom: 0.1rem;
  cursor: pointer;
  padding: 0 0.1rem;
}
.conditionItem {
  display: flex;
  box-shadow: 1px 1px 5px #888888;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  padding: 0 0.1rem;
  height: 0.3rem;
  float: left;
  margin-left: 0.2rem;
@@ -517,7 +554,7 @@
}
.filterText {
  margin-left: 10px;
  font-size: 0.16rem;
  font-size: 0.14rem;
}
.fontColor {
  color: #827e44 !important;