1. 安装：

npm i cytoscape --save

2. 引入：main.js

import cytoscape from ‘cytoscape‘;Vue.prototype.$cytoscape = cytoscape;

3. demo代码：

<template> <div id="MainCy" style="width: 100%;height: 100%;"></div></template><script> export default { mounted() { var cy = this.$cytoscape({ container: document.getElementById(‘MainCy‘), layout: { name: ‘grid‘, rows: 2, cols: 2 }, style: [{ selector: ‘node‘, style: { ‘content‘: ‘data(name)‘, ‘background-color‘: ‘magenta‘, ‘background-image‘: ‘url(img/shixian.png)‘, } }, { selector: ‘edge‘, style: { ‘content‘: ‘data(relationship)‘, ‘curve-style‘: ‘bezier‘, ‘target-arrow-shape‘: ‘triangle‘, ‘color‘: ‘red‘, } }, // some style for the extension { selector: ‘.eh-handle‘, style: { ‘background-color‘: ‘red‘, ‘width‘: 12, ‘height‘: 12, ‘shape‘: ‘ellipse‘, ‘overlay-opacity‘: 0, ‘border-width‘: 12, // makes the handle easier to hit ‘border-opacity‘: 0 } }, { selector: ‘.eh-hover‘, style: { ‘background-color‘: ‘red‘ } }, { selector: ‘.eh-source‘, style: { ‘border-width‘: 2, ‘border-color‘: ‘red‘ } }, { selector: ‘.eh-target‘, style: { ‘border-width‘: 2, ‘border-color‘: ‘red‘ } }, { selector: ‘.eh-preview, .eh-ghost-edge‘, style: { ‘background-color‘: ‘red‘, ‘line-color‘: ‘red‘, ‘target-arrow-color‘: ‘red‘, ‘source-arrow-color‘: ‘red‘ } }, { selector: ‘.eh-ghost-edge.eh-preview-active‘, style: { ‘opacity‘: 0 } } ], elements: { nodes: [{ data: { id: ‘j‘, name: ‘Jerry‘ } }, { data: { id: ‘e‘, name: ‘Elaine‘ } }, { data: { id: ‘k‘, name: ‘Kramer‘ } }, { data: { id: ‘g‘, name: ‘George‘ } } ], edges: [{ data: { source: ‘j‘, target: ‘e‘ } }, { data: { source: ‘j‘, target: ‘k‘ } }, { data: { source: ‘j‘, target: ‘g‘ } }, { data: { source: ‘e‘, target: ‘j‘ } }, { data: { source: ‘e‘, target: ‘k‘, relationship: ‘1‘ } }, { data: { source: ‘k‘, target: ‘j‘, relationship: ‘2‘ } }, { data: { source: ‘k‘, target: ‘e‘, relationship: ‘3‘ } }, { data: { source: ‘k‘, target: ‘g‘, relationship: ‘4‘ } }, { data: { source: ‘g‘, target: ‘j‘, relationship: ‘5‘ } } ] } }); cy.nodes().on(‘click‘, (evt) => { console.log(evt) }); cy.edges().on(‘click‘, (evt) => { console.log(evt) }); }, }</script>

demo效果：