• [在线体验] todo
• 代码仓库

高级图组件

1. 安装使用

安装依赖

yarn add @bixi/graph

本项目集成多个图组件（股权结构图、环形树图、力导向图），使用按需加载。

import { EquityGraph, RadialTree, Force } from '@bixi/graph';

组件使用

1. 力导向图

import { Force, IOptions, IGraphData } from "@bixi/graph";

@Component({
  selector: 'app-demo',
  template: `<div #workspace></div>`,
})
export class SomeComponent {
  @ViewChild("workspace", { static: true }) workspace: ElementRef;
  graphData: IGraphData;
  graphOptions: IOptions;
  canvas = new Force(
      this.workspace.nativeElement,
      this.graphData,
      this.graphOptions,
      tooltip
    );

2. 股权结构图

import { DashboardAnalysisService } from '@routes/dashboard/services';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { EquityGraph } from './equity-graph';
import graphData from './graph-data';
@Component({
  selector: 'app-equity-graph.component',
  templateUrl: './equity-graph.component.html',
  styleUrls: ['./equity-graph.component.less']
})
export class EquityGraphComponent {
  @ViewChild('treeElement')
  treeElement: ElementRef;
  graphObj;
  constructor(private analysisService: DashboardAnalysisService) {}
  ngOnInit(): void {}
  ngAfterViewInit() {
    setTimeout(() => {
      this.graphObj = new EquityGraph(this.treeElement.nativeElement);
      this.graphObj.render(graphData.data, 2074794);
      this.graphObj.on('onRequireUpdate', (e) => {
        var n = e.d,
          r = e.isGudong;
        setTimeout(() => {
          this.graphObj.updateTree(r, n);
        }, 0);
      });
    }, 0);
  }
}

3. 环形树状图

import { RadialTree, Options, GraphData } from '@bixi/graph';

@Component({
  selector: 'app-demo',
  template:
    '<div id="Radial-Tree-Graph" style="width: 100%; height: 800px; overflow: hidden"></div>',
})
export class RadialTreeComponent implements AfterViewInit {
  chart: RadialTree;
  @Input()
  options: RadialTreeOption;
  @Input()
  data;
  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit() {
    setTimeout(() => {
      this.options = {
        container: '#Radial-Tree-Graph',
        node: {
          onClick: (d) => {
            console.log(d);
          }
        }
      };
      this.chart = new RadialTree(this.data, this.options);
    }, 0);
  }
}

2. API

2.1 力导向图

成员方法

| 方法名 | 类型 | 描述 | | ------------- | ------------------------------------- | ------------ | | render | (data: GraphData, options?) => void | 数据更新重绘 | | toggleLinkVisible | (type: boolean) => void | 是否隐藏连线关系 | | setZoom | (size: number) => void | 缩放图谱 | | getZoom | () => number | 获取缩放比例 |

| downloadImg | () => void | 下载图片 |

Type

export interface IGraphData {
  nodes: Node[];
  links: Link[];
}

export interface Node {
  id: string | number; // 节点id
  label: string; // 节点文字
  typeName: string; // 类别name
  group: number; // 类别id 对应options 中 legend type
  display?: {}; // 设置指定节点样式
}

export interface Link {
  id: string | number;
  source: string | number; // 起始节点id
  target: string | number; // 终止节点id
  label: string; // 连线关系文字
  display?: {}; // 设置指定连线样式
}

更多详细使用

2.2 股权结构图

成员方法

| 方法名 | 类型 | 描述 | | -------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------- | | render | (data: GraphData, id: Number) => void | 初始化图渲染 | | on | (type: 'onScale' / 'onDataNodeMouseout' / 'onRequireData' / 'onRequireUpdate' / 'onDataLineMouseout') => void | 鼠标事件(图放缩，数据更新等) |

更多详细使用

2.3 环形树状图图

成员方法

| 方法名 | 类型 | 描述 | | ---------- | --------------------------------------------------- | ------------------------------------------ | | setState | (options:RadialTreeOption) => RadialTree | 设置图谱配置项 | | data | (data:RadialTreeData) => RadialTree | 传入图谱数据 | | render | () => void | 初始化图谱渲染 | | setScale | (type:number) => void | 图谱缩放，参数为 1 表示放大，为 0 表示缩小 |

更多详细使用

Type

export interface RadialTreeData {
  name: string;
  children: RadialTreeData[];
}

更多详细使用