Znz-tree-chart NPM

znz-tree-chart

基于 zrender 封装的树形图

包依赖解释

rollup 打包会处理相对路径，对于绝对路径是不会处理的。所以需要引入@rollup/plugin-node-resolve 插件处理
引入 cleanup()用于处理打包出来的代码无用的注释的问题，terser()代码压缩处理
cross-env:解决跨平台设置环境变量的 npm 包

开始使用

组件是通过内网 npm 仓库发布的，使用前，请确保已设置好内网 npm 源的 host：

192.168.86.82  repositories.compass.com
192.168.86.82  repositories-public.compass.com

然后在您的项目中添加对本组件的依赖：

npm i --save @znz/znz-tree-chart  --registry=http://repositories.compass.com/api/v4/projects/3606/packages/npm/

您也可以通过本地引入 js 的方式(也可以上传到您的资源服务器上以 cdn 形式引入)来使用或者调试组件，获取最新版的 umd 或 esm 规范的 js 文件，放到项目中:

项目运行

npm run Build

打包出来的 dist 然后使用 html 编写对应数据传入逻辑运行

组件配置项解释

图缩放适配配置

位置：直属于 option

adapt:{
  // 初始化时进行自适应缩放平移
  adaptOnInit: true,
  // 自适应缩放时scale值范围
  adaptScaleRange: [0, 1000],
  // 图形的四周留白比例，默认10%
  blankAroundRate: 0.1,
}

点配置样式解析

//  如果type不传入那么默认的是circle
 A: {
    // 画布位置信息
        position: [100, 200],
        // 暂时没有用
        value: 8,

        //点的配置信息（与zrender一致）
        opts: {
            // 点的样式
            style: {
              fill: 'blue', // 填充颜色
              stroke: 'black', // 描边颜色
              lineWidth: 1 // 描边宽度
            }
            // 点的样式配置，不同的形状配置也不同
            shape: {
                r: 40
            }
        }
    }

//  rootnodegroup根节点
 A: {
    // 画布位置信息
        position: [100, 200],
        // 组件类型
        type: 'rootnodegroup',
        value:{
            // 根节点中间值
            text:'xxx'
            // 根节点字体大小
            fontSize:14,
        },
        title:{
            // 根节点下部分名称
            text:'{a|xxx; b|这是b的样式}'
            // 整体文本大小
            fontSize:14,
            // 富文本
            rich: { a: { fill: 'green' }, b: { fill: 'red', fontSize: 16, fontWeight: 'bold' } }
        },
        //点的配置信息(与zrender一致)
        opts: {
            // 点的样式
            style: {
              fill: 'blue', // 填充颜色
              stroke: 'black', // 描边颜色
              lineWidth: 1 // 描边宽度
            }
            // 点的样式配置，不同的形状配置也不同
            shape: {
                r: 40
            }
        }
    }

//  childnode/childnodeplus/childnodeminus常规孩子节点
 A: {
    // 画布位置信息
        position: [100, 200],
        // 组件类型
        type: 'childnode/childnodeplus/childnodeminus',
        title:{
            // 孩子节点上部分标题
            text:'xxx'
            fontSize:14,
        },
        content:{
            // 孩子节点下部分内容文案
            text:'xxx',
            // 整体文本大小
            fontSize:14,
              // 富文本
            rich: { a: { fill: 'green' }, b: { fill: 'red', fontSize: 16, fontWeight: 'bold' } }
        },
        // 让节点高亮的效果配置文件
        highlight?: {
            color?: string;
        },
        //点的配置信息(与zrender一致)
        opts: {
            // 点的样式
            style: {
              fill: 'blue', // 填充颜色
              stroke: 'black', // 描边颜色
              lineWidth: 1 // 描边宽度
            }
            // 点的样式配置，不同的形状配置也不同
            shape: {
                height: 49,
                width: 150
            }
        }
    }

线配置逻辑

      lineOpts: {
    //  参考zrender中的线的配置逻辑
          style: {
            stroke: function (d) {
              if (d.value > 0) {
                return '#000000';
              }
              return '#ddd';
            },
            lineWdith: 1
          }
        }

整体矩形树图动效方法

// 向上移动
  moveUp(distance: number = 10, duration: number = 500)
  // 向下移动
  moveDown(distance: number = 10, duration: number = 500)
  // 向左移动
  moveLeft(distance: number = 10, duration: number = 500)
  // 向右移动
  moveRight(distance: number = 10, duration: number = 500)