记录 echarts 实现关系图样式

    async _getTopology() {
      let { data } = await getTopology();
      if (data && data.accountInfoList && data.accountInfoList.length) {
        data.nodes =
          (data &&
            data.accountInfoList &&
            data.accountInfoList.length &&
            data.accountInfoList.map((item, index) => {
              return {
                id: item.fenterpriseId,
                name: item.fenterpriseName,
                funifiedSocialCreditCode: item.funifiedSocialCreditCode,
                value: "",
                label: {
                  show: true,
                  position: "right",
                  formatter: "{b}",
                  borderRadius: 3,
                  padding: [6, 14],
                  color: index % 2 === 0 ? "#000" : "#fff",
                  backgroundColor: index % 2 === 0 ? "#00EDFF" : "#6F32FF"
                }
              };
            })) ||
          [];
        data.links = data.accountAisleRelationList;
        Object.assign(this.jsondata, data);
        this.initgxtu();
      }
    },
    initgxtu() {
      let that = this;
      var gxechart = echarts.init(document.getElementById("gxechart"));
      gxechart.showLoading();
      var graph = this.jsondata;
      gxechart.hideLoading();
      let gxoption = {
        tooltip: {},
        grid: {
          top: "0px",
          left: "50px",
          right: "50px",
          bottom: "0px",
          width: "auto", //图例宽度
          height: "90%" //图例高度
        },
        series: [
          {
            type: "graph",
            layout: "circular",
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            edgeSymbol: ["circle", "arrow"],
            symbol: "circle",
            symbolSize: 15,
            labelLayout: {
              hideOverlap: true
            },
            layout: "force",
            force: {
              initLayout: "circular",
              repulsion: 1900,
              layoutAnimation: false
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: "source",
              opacity: 0.2,
              curveness: 0.3
            },
            focusNodeAdjacency: true,
            legendHoverLink: true,
            itemStyle: {
              color: function(params) {
                if (params.dataIndex % 2 == 0) {
                  return "#00EDFF";
                }
                return "#6F32FF";
              }
            },
            emphasis: {
              focus: "adjacency",
              itemStyle: {
                shadowColor: "rgba(0, 0, 0, 0.4)",
                shadowBlur: 15
              },
              lineStyle: {
                width: 3
              }
            },
            left:-500
          }
        ]
      };
      gxechart.setOption(gxoption);
      gxechart.on("click", function(node) {
        if (node.dataType == "node") {
          that.nodeInfo = {
            name: node.name,
            funifiedSocialCreditCode: node.data.funifiedSocialCreditCode
          };
          that.entId = node.data.id;
          that.visible = true;
        }
      });
    },

其中,接口返回数据格式大致如下:

 效果图如下:

 

posted @ 2022-01-11 11:42  茶记忆  阅读(979)  评论(0编辑  收藏  举报