开源软件名称：

topology-zrender

开源软件地址：

https://gitee.com/mliang/topology-zrender

开源软件介绍：

topology-zrender v2.0

示例

直接用浏览器打开index.html，使用前需要运行yarn install加载依赖

使用

当前版本依赖[email protected]，[email protected]，并使用yarn管理

#加载依赖yarn install

项目中加载

  <script src="node_modules/jquery/dist/jquery.min.js"></script>  <script src="node_modules/lodash/lodash.min.js"></script>  <script src="node_modules/zrender/dist/zrender.min.js"></script>  <script src="src/topology-zrender.js"></script>  <script src="src/topology-zrender-tools.js"></script>

项目中使用

<div id="topologyGraph" style="width: 100%;height: 100%"></div><script>  var graph = topology.init(document.getElementById('topologyGraph'));  getData().then(function(dataList) {    var options = {      data: dataList,      dataId: 'dataId', //default: 'id'      dataPId: 'dataPId', //default: 'pId'      dataTitle: function(data) { //default: 'title'        return data.name + '(' + data.version + ')'      },      dataText: 'name',      // dataText: function(data) { //default: 'text'      //   return data.name.length > 10 ? data.name.substr(0, 8) + '...' + '(' + data.version + ')' : data.name + '(' + data.version + ')'      // },      group: [{        mark: 'status', //data 中的分组属性        value: '0', //data 中的分组值        style: {          node: {            bgColor: '#2392f7',            textColor: '#fff'          }        }      }, {        mark: 'status',        value: '1',        style: {          node: {            bgColor: '#e74c3c', //default: style.node.bgColor            textColor: '#fff' //default: style.node.textColor          }        }      }],      style: {        drawingBoard: {          width: $('#topologyGraph').width()        },        node: {          bgColor: '#a5b9cc', //default: '#a5b9cc'          textColor: '#fff', //default: '#fff'          width: 120, //default: 120          height: 25 //default: 25        }      }    };    var nodeList = topologyTools.recursionGraphNodeData(options);    graph.create(nodeList);  });  graph.on('click', function(params) {    alert('graph.click');  });  function getData() {    return $.ajax({ url: 'src/data-untreated.json', dataType: "json" })  }</script>