要求根據(jù)數(shù)據(jù)生成結(jié)構(gòu)圖荧缘，花了點(diǎn)時(shí)間用的g6

法人.png

<template>
  <div class="g6-wrapper">
    <div id="mountNode"></div>
  </div>
</template>
<script type='text/ecmascript-6'>
import G6 from "@antv/g6";
import dagre from "dagre"
// import g6Data from "./textData.js";
import {getTreeSceneProcessList} from "@/api/scene.js";
export default {
  props: ['sceneId'],
  data() {
    return {
      g6Data :[]
    };
  },
  mounted() {
    this.getTreeSceneProcessList();
    // this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        // 得到流程圖繪制對(duì)象
        var g = new dagre.graphlib.Graph();
        /**
         * g.setDefaultEdgeLabel不能省去灭美，否則會(huì)報(bào)錯(cuò)
         * Error in nextTick: "TypeError: Cannot set property 'points' of undefined"
         */
        g.setDefaultEdgeLabel(function() {
          return {};
        });
        g.setGraph({
          rankdir: "TB" //控制方向top-bottom
        });
        //繪制節(jié)點(diǎn)
        this.g6Data.nodes.forEach(node => {
          let len = node.processName.length,calcStrLen = 8,ellipsis = '…';
          let tempLabel= node.processName.substring(0,calcStrLen);
          if(len>8){
            tempLabel += ('\n' +  node.processName.substring(calcStrLen,2*calcStrLen));
          }
          if(len>16){
            tempLabel += ellipsis;
          }
          node.id = node.processRelateId;
          node.label = tempLabel;
          g.setNode(node.processRelateId, {
            width: 150,
            height: 50
          });
        });
        //繪制連接
        this.g6Data.edges.forEach(edge => {
          g.setEdge(edge.source, edge.target);
        });
        dagre.layout(g);
        var coord = 0;
        //g.nodes()返回圖中節(jié)點(diǎn)的 id 數(shù)組
        g.nodes().forEach((node, i) =>{
          coord = g.node(node);
          this.g6Data.nodes[i].x = coord.x;
          this.g6Data.nodes[i].y = coord.y;
        });
        //g.edges()返回圖中所有的邊
        g.edges().forEach((edge, i)=> {
          coord = g.edge(edge);
          this.g6Data.edges[i].startPoint = coord.points[0];
          this.g6Data.edges[i].endPoint = coord.points[coord.points.length ];
          this.g6Data.edges[i].controlPoints = coord.points.slice(1,coord.points.length);
        });
        G6.registerNode(
          "operation",
          {
            drawShape: function draw(cfg, group){
              var rect = group.addShape("rect", {
                attrs: {
                  x: -75,
                  y: -20,
                  width: 150,
                  height: 60,
                  radius: 10,
                  stroke: "#BDC3CC",
                  fill: "#fff",
                  fillOpacity: 0.45,
                  lineWidth: 2
                }
              });
              group.addShape('circle', {
                attrs: {
                  x: -53,
                  y: 10,
                  r: 15,
                  fill: '#7D8998',
                },
                name: 'circle-shape',
              });
              group.addShape("text", {
                attrs: {
                  text: 'L' + cfg.processLevel  || "",
                  x: -60,
                  y: 10,
                  fill: "#fff",
                  fontSize:14,
                  textAlign: "left",
                  textBaseline: "middle"
                }
              });
              // const _text = group.addShape("text", {
              //   attrs: {
              //     text: cfg.processName,
              //     x: -30,
              //     y: 9,
              //     fill: "#595959",
              //     fontSize:10,
              //     textAlign: "left",
              //     textBaseline: "middle"
              //   }
              // });
              return rect;
            }
          },"single-shape"
        );
        var graph = new G6.Graph({
          container: "mountNode",
          width: window.innerWidth*0.79, 
          height: 600,
          pixelRatio: 2,
          // fitView: true,
          // fitViewPadding:80,
          modes: {
            default: [
              "drag-canvas",'zoom-canvas',
              {
                type: 'tooltip',
                formatText: function formatText(model) {
                  return model.processName;
                }
              }
            ]
          },
          defaultNode: {
            type: "operation",
            labelCfg: {
              style: {
                fill: "#595959",
                fontSize: 12,
                textAlign: "left",
                textBaseline: "middle",
                x:-30,
                y:9
              }
            }
          },
          defaultEdge: {
            type: "polyline",
            style: {
              stroke: '#999',
              lineWidth:1
            }
          }
        });
        graph.data(this.g6Data);
        graph.render();
        graph.on('node:click', (evt)=> {
          const shape = evt.target;
          const node = evt.item;
            console.log(shape,node)
            // this.$emit('nextstep');
        });
        graph.on('node:mouseenter', function(evt) {
          const node = evt.item;
          graph.setItemState(node, 'hover', true);
          graph.updateItem(node, {
            style:{
              fill: '#ecf5ff',
              stroke: '#0091FF',
              lineWidth:1
            },
            labelCfg: {
              style: {
                fill: '#0091FF',
                fontSize: 12,
                textAlign: "left",
                textBaseline: "middle",
                x:-30,
                y:9
              }
            },
          });
        });
        graph.on('node:mouseleave', function(evt) {
          const node = evt.item;
          graph.setItemState(node, 'hover', false);
          graph.updateItem(node, {
            style:{
              fill: '#fff',
              stroke: '#BDC3CC',
              lineWidth:2
            },
            labelCfg: {
              style: {
                fill: "#595959",
                fontSize: 12,
                textAlign: "left",
                textBaseline: "middle",
                x:-30,
                y:9
              },
            },
          });
        });
      });
    },
    getTreeSceneProcessList(){
      getTreeSceneProcessList('b01311175e8c11eaaf620050568b17c3').then(res=>{
        console.log(res)
        this.g6Data = res;
        this.init();
      })
    }
  }
};
</script>
<style lang='less' scoped>
.g6-wrapper {
  width: 100%;
  height: 600px;
  border: 1px solid #999;
}
</style>
<style lang="less">
.g6-wrapper {
  // 由于 G6 沒有內(nèi)置任何 tooltip 的樣式，用戶需要自己定義樣式
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    font-size: 12px;
    color: #000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
  .node-shape{
    white-space:wrap;
    cursor:pointer;
  }
}
</style>