@bixi/graph v1.6.4

• 在线体验 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 力导向图

成员方法

| 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 股权结构图

成员方法

更多详细使用

2.3 环形树状图图

成员方法

更多详细使用

Type

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

更多详细使用