GOJS1

我的代码

<template>
  <el-card
    :style="fullHeight"
    shadow="never"
    v-loading="executeFlag"
    element-loading-text
    ref="topTable"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)"
  >
    <div :id="idName" class="myDiagram"></div>
  </el-card>
</template>

<script>

  export default {
    data () {
      return {
        executeFlag : false,
        idName:"myDiagramDiv1",
        fullHeight: {
          height: 100+"%",
          "z-index":100,
          margin: 0 + "px",
        },
        myDiagram: {}, //画布对象
      }
    },
    computed: {
      documentClientHeight: {
        get() {
          return this.$store.state.common.documentClientHeight
        }
      },
    },
    mounted() {

      //初始化画布
      this.init();
    },
    created(){
      this.setHeight()
    },
    activated(){

    },
    components: {
    },

    methods: {
      //设置高度
      setHeight(){
      },
      init(){
        var _this = this;
        var $ = go.GraphObject.make;
        let myDiagram = $(
          go.Diagram,
          _this.idName, //为DIV HTML元素创建一个图表
          {
            "grid.visible":true,  //网格线

            initialAutoScale: go.Diagram.Uniform,  // an initial automatic zoom-to-fit
            initialContentAlignment: go.Spot.Center, //初始化居中
            // initialPosition: new go.Point(-500, -500),  //这里定义 节点所在位置
            // contentAlignment: go.Spot.Center,  // 画布位置,定义后就不能拖动画布了，画布位置交由gojs管理

            scale:1.0,    //初始视图大小比例
            minScale:0.5,//最小视图的缩小比例
            maxScale:1.5,//最大视图的放大比例

            layout:
              $(go.ForceDirectedLayout,  // automatically spread nodes apart 力导向布局
                { maxIterations: 200, defaultSpringLength: 30, defaultElectricalCharge: 100 })
            //获取或设置在执行强制定向的自动布局时要执行的最大迭代数
            //获取或设置由springLength计算的默认值。初始值是50
            //获取或设置电费计算的默认值。初始值是150。
          }
        );
        this.myDiagram = myDiagram;

        //官网地址 https://gojs.net.cn/samples/conceptMap.html
        myDiagram.nodeTemplateMap.add("main",
          $(go.Node, "Auto",  // the whole node panel
            nodeStyle(),
            { locationSpot: go.Spot.Center },  定位点将位于每个节点的中心
            // define the node's outer shape, which will surround the TextBlock
            $(go.Shape, "Rectangle",
              mainShapeStyle(),
            ),

            $(go.TextBlock,
              mainTextStyle(),

              new go.Binding("text", "text")
            )
          )
        );
        //中心节点样式
        function mainShapeStyle() {
          return {
            name: "SHAPE",
            stroke: "#4472C4",   //边框颜色
            strokeWidth: 4,        //边框宽度
            fill: "#f0f0f0",       //填充颜色
            portId: "", // 中心
            fromLinkable: false,   //是否允许连接线 连接本节点
            toLinkable: false
          };
        }
        //中心节点文字样式
        function mainTextStyle() {
          return{
            font: "bold 20pt helvetica, bold arial, sans-serif",
            margin: 20
          };
        }
        myDiagram.nodeTemplateMap.add("assistant",
          $(go.Node, "Auto",  // the whole node panel
            nodeStyle(),
            { locationSpot: go.Spot.Center },  定位点将位于每个节点的中心
            // define the node's outer shape, which will surround the TextBlock
            $(go.Shape, "Rectangle",
              assistantShapeStyle(),
            ),

            $(go.TextBlock,
              assistantTextStyle(),
              new go.Binding("text", "text")
            )
          )
        );
        //周围节点样式
        function assistantShapeStyle() {
          return {
            name: "SHAPE",
            stroke: "#4472C4",
            strokeWidth: 2,
            fill: "#f0f0f0",
            portId: "",
            fromLinkable: false,
            toLinkable: false
          };
        }
        //周围节点文字样式
        function assistantTextStyle() {
          return{
            font: "bold 10pt helvetica, bold arial, sans-serif",
            margin: 20
          };
        }
        //模仿 交互式分析
        // myDiagram.nodeTemplate = $(
        //   go.Node,
        //   "Table",
        //   {isShadowed: false},
        //   nodeStyle(),
        //   new go.Binding("location"),
        //   $(
        //     go.Panel,
        //     "Auto",
        //     $(go.Panel,"Vertical",
        //       $(go.Panel, "Auto",
        //         $(go.Shape,
        //           { margin: 0, fill: "#3D6480", strokeWidth: 0, width: 44, height: 44 },
        //           new go.Binding("geometry", "geo", geoFunc),//geo是数据库里的字段
        //         ),
        //       ),
        //       $(
        //         go.Panel,
        //         "Horizontal",
        //         $(
        //           go.TextBlock,
        //           textStyle(),
        //           {
        //             column: 1,
        //             margin: new go.Margin(8, 2, 8, 2),
        //             maxSize: new go.Size(80, NaN),
        //             wrap: go.TextBlock.WrapFit,
        //             alignment: go.Spot.TopRight
        //           },
        //           new go.Binding("text").makeTwoWay()
        //         )
        //       )
        //     ),
        //     {
        //       // 这个工具提示装饰由所有节点共享
        //       toolTip: $(
        //         go.Adornment,
        //         "Auto",
        //         $(go.Shape, {fill: "#FFFFCC"}),
        //         $(
        //           go.TextBlock,
        //           {margin: 8}, //工具提示显示了调用nodeInfo（data）的结果
        //           new go.Binding("text", "", nodeInfo)
        //         )
        //       ),
        //     }
        //   ),
        //   makePort("T", go.Spot.Top, go.Spot.Top, false, true),
        //   makePort("L", go.Spot.Left, go.Spot.Left, true, true),
        //   makePort("R", go.Spot.Right, go.Spot.Right, true, true),
        //   makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
        // );

        //节点 文字样式
        function textStyle() {
          return {
            font: "bold 11pt Helvetica, Arial, sans-serif",
            stroke: "#00A9A2" //"whitesmoke"
          };
        }
        function nodeStyle() {
          return [
            {doubleClick: _this.nodeDoubleClick},
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), //loc是数据库保存的字段
            {
              locationSpot: go.Spot.Center
            }
          ];
        }

        function geoFunc(geoname) {
          var geo = icons[geoname];
          if (geo === undefined){
            geo = icons["heart"]
          };  // use this for an unknown icon name 对未知的图标名称使用此名称
          if (typeof geo === "string") {
            geo = icons[geoname] = go.Geometry.parse(geo, true);  // fill each geometry 填满每个几何图形
          }
          // console.log('mmmmmmm',geo);
          return geo;
        }
        //节点对象的 Tooltip 信息
        function nodeInfo(d) {
          let str = "111111";
          return str;
        }
        function makePort(name, align, spot, output, input) {
          var horizontal =
            align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
          // 这个端口基本上就是一个透明的矩形，它沿着节点的一侧延伸，
          // 当鼠标经过时，它就变成了颜色
          return $(go.Shape, {
            fill: "transparent", // 在mouseEnter事件处理程序中更改为颜色
            strokeWidth: 0, // no stroke
            width: horizontal ? NaN : 8, // 如果不是水平拉伸，只有8宽
            height: !horizontal ? NaN : 8, // 如果不是垂直拉伸，就是8高
            alignment: align, // 将端口对齐到主形状上
            stretch: horizontal
              ? go.GraphObject.Horizontal
              : go.GraphObject.Vertical,
            portId: name, // 将这个对象声明为一个“端口”
            fromSpot: spot, // 声明链接可以在这个端口上连接
            fromLinkable: output, // 声明用户是否可以从这里获取链接
            toSpot: spot, // 声明链接可以在这个端口上连接
            toLinkable: input, // 声明用户是否可以在这里画链接
            cursor: "pointer", // 显示一个不同的光标来指示潜在的链接点
            mouseEnter: function (e, port) {
              // 端口参数是这个形状
              if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
            },
            mouseLeave: function (e, port) {
              port.fill = "transparent";
            }
          });
        }

        myDiagram.linkTemplate =
          $(go.Link,  // the whole link panel
            {isShadowed: false}, //阴影

            $(go.Shape,  // the link shape  线
              {isPanelMain: true, strokeWidth: 2},
              new go.Binding('stroke', 'color'),
            ),

            $(go.Shape,  // the arrowhead  箭头 OpenTriangle
              { toArrow: "standard", strokeWidth: 2 ,margin:15,},
              new go.Binding('stroke', 'color'),//这个是表示连续箭头的颜色，在linkDataArray中设置color属性
            ),

            // $(go.Panel, "Auto",  连接线上的文字框 的 样式
            //     $(
            //       go.Shape,
            //       "RoundedRectangle", // the link shape
            //       {fill: "#919191", stroke: null}
            //     ),
            //   // $(
            //   //   go.TextBlock,
            //   //   {
            //   //     font: "10pt helvetica, arial, sans-serif",
            //   //     stroke: "#F8F8F8",
            //   //     margin: 2,
            //   //     editable: true,
            //   //     wrap: go.TextBlock.WrapFit,
            //   //     alignment: go.Spot.TopRight
            //   //   },
            //   //   new go.Binding("text").makeTwoWay()
            //   // )
            //   )
          );

        var nodeDataArray = [
          { key: 4, category:"main", text: "调控数据中心" ,geo:"dianlibianyaqiraozu",},
          { key: 5, category:"assistant", text: "运检中心" ,geo:"dianlibianyaqiraozu",},
          { key: 6, category:"assistant", text: "规划系统",geo:"dianlibianyaqiraozu", },
          { key: 7, category:"assistant", text: "PMS" ,geo:"dianlibianyaqiraozu",},
          { key: 8, category:"assistant", text: "交易中心" ,geo:"dianlibianyaqiraozu",},
          { key: 9, category:"assistant", text: "OMS",geo:"dianlibianyaqiraozu", },
          { key: 10, category:"assistant", text: "OPS",geo:"dianlibianyaqiraozu", },
          { key: 11, category:"assistant", text: "TMR",geo:"dianlibianyaqiraozu", },
        ];
        var linkDataArray = [
          { from: 4, to: 5, text: "combine\nto form" ,color:"red"},
          { from: 4, to: 6, text: "include"  ,color:"red"},
          { from: 4, to: 7, text: "are"  ,color:"red"},
          { from: 4, to: 8, text: "are"  ,color:"red"},
          { from: 4, to: 9, text: "are"  ,color:"red"},
          { from: 4, to: 10, text: "are" ,color:"green" },
          { from: 4, to: 11, text: "are"  ,color:"yellow"},
        ];
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

      },

      // 双击 节点 或者点击设置 事件
      nodeDoubleClick(e, obj) {

      },
    }
  }
</script>

<style scoped>
  .myDiagram {
    width:100%;
    height: 500px;
    background-color: #DAE4E4;
  }
</style>
<style>

</style>

官网代码

function init() {
	if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
	var $ = go.GraphObject.make;  // for conciseness in defining templates
	myDiagram =
		$(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
		  {
		initialAutoScale: go.Diagram.Uniform,  // an initial automatic zoom-to-fit
		contentAlignment: go.Spot.Center,  // align document to the center of the viewport
		layout:
		$(go.ForceDirectedLayout,  // automatically spread nodes apart
		  { maxIterations: 200, defaultSpringLength: 30, defaultElectricalCharge: 100 })
	});
	// define each Node's appearance
	myDiagram.nodeTemplate =
		$(go.Node, "Auto",  // the whole node panel
		  { locationSpot: go.Spot.Center },
		  // define the node's outer shape, which will surround the TextBlock
		  $(go.Shape, "Rectangle",
			{ fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }), stroke: "black" }),
		  $(go.TextBlock,
			{ font: "bold 10pt helvetica, bold arial, sans-serif", margin: 4 },
			new go.Binding("text", "text"))
		 );
	// replace the default Link template in the linkTemplateMap
	myDiagram.linkTemplate =
		$(go.Link,  // the whole link panel
		  $(go.Shape,  // the link shape
			{ stroke: "black" }),
		  $(go.Shape,  // the arrowhead
			{ toArrow: "standard", stroke: null }),
		  $(go.Panel, "Auto",
			$(go.Shape,  // the label background, which becomes transparent around the edges
			  {
		fill: $(go.Brush, "Radial", { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
		stroke: null
	}),
			$(go.TextBlock,  // the label text
			  {
		textAlign: "center",
		font: "10pt helvetica, arial, sans-serif",
		stroke: "#555555",
		margin: 4
	},
			  new go.Binding("text", "text"))
		   )
		 );
	// create the model for the concept map
	var nodeDataArray = [		
		{ key: 4, text: "Concepts" },
		{ key: 5, text: "Propositions" },
		{ key: 6, text: "Associated Feelings or Affect" },
		{ key: 7, text: "Perceived Regularities" },
		{ key: 8, text: "Labeled" },
		{ key: 9, text: "Hierarchically Structured" },
	];
	var linkDataArray = [
		{ from: 4, to: 5, text: "combine\nto form" },
		{ from: 4, to: 6, text: "include" },
		{ from: 4, to: 7, text: "are" },
		{ from: 4, to: 8, text: "are" },
		{ from: 4, to: 9, text: "are" }
	];
	myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
;
if(window.init) {init();}