Visjs option参数配置

var options = {
    autoResize: true,
    height: '100%',
    width: '100%',
    locale: 'en', //默认语言
    locales: locales,
    locales: {//国际语言化
        en: {
            edit: 'Edit',
            del: 'Delete selected',
            //等等，可以进行多语言
        }
    },
    clickToUse: false, //当配置点击，只有当激活时，它才会对鼠标和触摸事件做出反应
    configure: {
        enabled: true, //打开或关闭配置界面。
        filter: 'nodes,edges', //String, Array, Boolean, Function 显示所有选项
        container: undefined, //这允许您将配置列表放在另一个HTML容器中，而不是在网络之下。
        showButton: true //显示配置器底部的生成选项按钮。
    },
    edges: {//关系线控制
        width: 2,//关系线宽度
        title: undefined,
        value: undefined,
        widthConstraint: false,
        arrows: {//箭头
            to: {
                enabled: true,//箭头是否显示、开启
                scaleFactor: 0.5,//箭头的大小
                type: 'arrow',//箭头的类型：circle,bar,arrows
                from: true //箭头指向from节点
            },
        },
        // shadow: true,//连接线阴影配置
        shadow: {
            enabled: false,
            color: 'rgba(0,0,0,0.5)',
            size: 10,
            x: 5,
            y: 5
        },
        // smooth: true,//是否显示方向箭头
        smooth: {
            enabled: true, //打开和关闭平滑曲线。
            type: "dynamic", //'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'
            roundness: 0.5 //接受范围：(0-1.0)
        },
        font: {
            size: 5, // px
            color: 'green',
            align: 'horizontal',
            face: 'arial', //标签文本的字体。
            background: 'none',
            strokeWidth: 2, // px 字体边线宽度。作为背景矩形的替代，可以在文本周围画出笔划。当提供高于0的值时，将画出笔划。
            strokeColor: '#ffffff', //字体边线颜色。
            align: 'horizontal', //字体位置。可能的选择：'horizontal','top','middle','bottom'。对齐方式决定标签在边缘上的对齐方式。默认值为horizontal和标签保持水平，不管边缘的方位如何。
            vadjust: 0, //针对垂直位置进行调整。（正是下降）。
            multi: false, //绘制标签的字体（false-基本字体绘制的纯文本，true或“HTML”-标签可以是多字体的，带有粗体、斜体和代码标记，'markdown'或'md'-多字体的，带有粗体、斜体和代码标记）
            bold: {  //定义标签中粗体字体的样式
                color: '#343434',
                size: 14, // px
                face: 'arial',
                vadjust: 0,
                mod: 'bold'
            },
            ital: { //定义标签中斜体字体的样式。
                color: '#343434',
                size: 14, // px
                face: 'arial',
                vadjust: 0,
                mod: 'italic',
            },
            boldital: { //定义标签中粗体斜体字体的样式
                color: '#343434',
                size: 14, // px
                face: 'arial',
                vadjust: 0,
                mod: 'bold italic'
            },
            mono: { //在标签文本中确定等宽字字体时，添加到字体的字符串和大小。
                color: '#343434',
                size: 15, // px
                face: 'courier new',
                vadjust: 2,
                mod: ''
            }
        },
        selfReferenceSize: 30, //参考尺寸
        length: 50,//关系线线长设置，数字较大最好以100位单位修改可看出差异
        dashes: false,//关系线虚线，false不是，true是
        arrowStrikethrough: true,//关系线与节点处无缝隙
        color: {
            color: 'red',//关系线颜色设置
            highlight: 'black',//点击关系线时的颜色
            hover: '#848484',
            inherit: 'from',
            opacity: 1.0
        },
        background: {
            enabled: true,
            color: '#ff0000'
        },
        selectionWidth: 1,
        selfReferenceSize: 20
    },
    nodes: {//节点配置
        shape: 'circle', //形状
        widthConstraint: 250,
        margin: 10,
        borderWidth: 1,//节点边框的宽度,单位为px
        borderWidthSelected: 2, //节点被选中时边框的宽度，单位为px
        color: {
            border: '#2B7CE9',//节点边框颜色
            background: '#97C2FC',//节点背景颜色
            highlight: {//节点选中时状态颜色高亮
                border: '#2B7CE9',
                background: '#D2E5FF'
            },
            hover: {//节点鼠标滑过时状态颜色
                border: '#2B7CE9',
                background: '#D2E5FF'
            }
        },
        font: {//字体配置
            color: '#343434',//颜色
            size: 14, // 大小，单位px
            face: 'arial',//字体
            background: 'none',//背景
            align: 'center',//位置left right center
        },
        shadow: true
    },
    groups: {},
    layout: {
        randomSeed: 1,//配置每次生成的节点位置都一样，参数为数字1、2等
        hierarchical: {
            direction: 'UD',//UD:上下 DU:下上 LR:左右 RL:右左
            sortMethod: 'directed'
        }, //层级结构显示}
    },
    interaction: {
        dragNodes: false,//是否能拖动节点
        dragView: false,//是否能拖动画布
        hideEdgesOnDrag: true,//拖动画布时是否隐藏连接线
        hideNodesOnDrag: true,//拖动画布时是否隐藏节点
        hover: true,//鼠标移过后加粗该节点和连接线
        keyboard: true,//
        multiselect: true,//按 ctrl 多选
        navigationButtons: true,//是否显示控制按钮
        selectable: false,//是否可以点击选择
        selectConnectedEdges: false,//选择节点后是否显示连接线
        hoverConnectedEdges: false,//鼠标滑动节点后是否显示连接线
        tooltipDelay: 200,
        zoomView: true//是否能缩放画布
    },
    manipulation: {
        enabled: true, //是否启用编辑
        initiallyActive: false,
        addNode: (data, callback) => {
            //点击新增节点的事件
        },
        addEdge: (data, callback) => {
            //点击连线的事件
        },
        editNode: (data, callback) => {
            //编辑点击的事件
        },
        editEdge: (data, callback) => {
            //编辑连线的事件
            console.log(data);
            callback(data);
        },
        deleteNode: (data, callback) => {
            //删除节点的事件
            console.log(data);
            callback(data);
        },
        deleteEdge: (data, callback) => {
            //删除连线的事件
            console.log(data);
            callback(data);
        },
    },
    physics: {
        physics: {
            enabled: true, //自由布局或固定布局
            forceAtlas2Based: {
                gravitationalConstant: -200,
                centralGravity: 0.065,
                springLength: 150,
                springConstant: 1.9,
                avoidOverlap: 0.5
            },
            maxVelocity: 115,
            minVelocity: 3.03,
            solver: 'forceAtlas2Based',
            timestep: 0.16,
            stabilization: {
                iterations: 2000,
                onlyDynamicEdges: false,
                fit: true
            }
        },
    }
};
// locales具有以下格式：
var locales = {
    en: {
        edit: '编辑',
        del: '删除选定',
        back: '返回',
        addNode: '添加节点',
        addEdge: '添加关联',
        editNode: '编辑节点',
        editEdge: '编辑关联',
        addDescription: '单击空白处来放置一个新节点。',
        edgeDescription: '单击一个节点并拖动到另一个节点以连接它们。',
        editEdgeDescription: '单击控制点并将其拖动到节点以连接到它。',
        createEdgeError: '无法将边缘链接到集群。',
        deleteClusterError: '不能删除集群。',
        editClusterError: '不能编辑集群。'
    }
}
/**
 * vue2vis
 *  <network
      id="myNetwork"
      class="graphdiv"
      :nodes="nodes"
      :edges="edges"
      :options="options"
      @select-node="selectNode" //点击事件
      @oncontext="showMenu"     //右击事件
      @after-drawing="afterDrawing" //绘图初始化加载事件
      v-contextmenu:menu
      ref="network"
    ></network>

    this.$refs.network.fit();// 画布对象居中事件

    const nodeId:any = this.$refs.network.getNodeAt(params.pointer.DOM)// 获取节点id
*/