高级图组件
1. 安装使用
安装依赖
yarn add @bixi/graph
本项目集成多个图组件（股权结构图、环形树图、力导向图），使用按需加载。
import { EquityGraph, RadialTree, Force } from '@bixi/graph';
组件使用
- 力导向图
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
);
- 股权结构图
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);
}
}
- 环形树状图
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[];
}更多详细使用
