z-render-blood v2.0.2

z-render-blood

使用

当前版本依赖zrender@4.0.4，lodash@4.17.10，并使用npm管理

#加载依赖

npm install

项目中使用

// html
<template>
  <div class="hello">
 <div id="topologyGraph" style="width: 100%;height: 800px"></div>
    <button id="downImage">保存为图片</button>
    <button id="downPDF">保存为PDF</button>

    <div id="openProductBox" style="display: none; padding: 10px;">
        <table id="openProductTable" lay-filter="openProductTable"></table>
    </div>
  </div>
</template>
//  引入模块
import zRenderBlood from 'z-render-blood'
//初始化
var graph = zRenderBlood.topology.init(document.getElementById('topologyGraph'));


        //  配置信息
        var options = {
            data: zRenderBlood.dataList, //测试数据源
            dataId: 'dataId', //default: 'id'
            dataPId: 'dataPId', //default: 'pId'
            dataTitle: function(data) { //default: 'title'
                return data.name + '(' + data.version + ')'
            },
			// 线的颜色
            lineColor:{
              warningColor:'#e74c3c',
              normalColor:'rgba(0,0,0,.3)',
              infoColor:'green'
            },
            dataText: 'name',
            //dataText: function(data) { //default: 'text'
            //   return data.name.length > 6 ? data.name.substr(0, 6) + '...' + '(' + 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: zRenderBlood.$('#topologyGraph').width()
                },
                node: {
                    bgColor: '#a5b9cc', //default: '#a5b9cc'
                    textColor: '#fff', //default: '#fff'
                    width: 120, //default: 120
                    height: 25 //default: 25
                }
            }
        };
        var nodeList = zRenderBlood.topologyTools.recursionGraphNodeData(options);

        graph.create(nodeList);
    //点击事件
    graph.on('click', function(params) {
        console.log(params)

    });
    // 导出图片
    zRenderBlood.downLoadImage('#downImage','#topologyGraph')
    // 导出PDF
    zRenderBlood.downLoadPDF('#downPDF','#topologyGraph')

数据格式

    [{
            "otherData": "组织机构组织机构组织机构",
            "status": "0",
            "name": "组织机构",
            "version": "1.0",
            "dataId": "1"
        },
        {
            "otherData": "其他数据",
            "status": "1",
            "dataPId": "1",
            "name": "节点名称2",
            "version": "1.0",
            "dataId": "2"
        },
        {
            "otherData": "其他数据",
            "status": "1",
            "dataPId": "2",
            "name": "节点名称3",
            "version": "1.0",
            "dataId": "3"
        }]