【React】基于Echarts实现关系图(图谱&graph)
import type { EChartsType } from "echarts"
import _ from "lodash"
import * as echarts from "echarts"
class EchartsContainer {
protected _echarts: EChartsType|null = null;
protected _option:any = {}
constructor(dom?:HTMLElement) {
if (!window || !dom)throw Error('Not Set HTMLElement')
this._echarts = echarts.init(dom);
this._echarts?.showLoading();
this._initOption();
}
private _initOption(){
this._option.tooltip = {};
this._option.legend = [];
this._option.series = [
{
type: 'graph',
// 布局： none、circular、force
layout: 'force',
// 开启动画
animation: true,
// 初始动画的时长
animationDuration: 1500,
// 数据更新动画的缓动效果
animationEasingUpdate: 'quinticInOut',
// 边两端的标记类型
// @link /zh/#
edgeSymbol: ['arrow', ''],
// @link /zh/#
force: {
// 边的两个节点之间的距离，这个距离也会受 repulsion。
// 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
edgeLength: 120,
// 节点之间的斥力因子
repulsion: 500,
// 节点受到的向中心的引力因子（该值越大节点越往中心点靠拢）。
gravity: .2,
// 减缓节点的移动速度(取值范围 0 到 1)
friction: .6
},
// 是否开启鼠标缩放和平移漫游
roam: true,
// 节点是否可拖拽
draggable: true,
// 高亮状态的图形样式
// @link /zh/#
// DEPRECATED: has been changed to since 4.0
emphasis:{
//鼠标放上去有阴影效果
itemStyle: {
shadowColor: '#cccccc',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 40,
},
},
// 文本标签配置
// @link /zh/#
label: {
show: true,
position: 'right',
formatter: '{b}'
},
// 标签的统一布局配置
// @link /zh/#
// labelLayout: {
// hideOverlap: true,
// },
// 针对节点之间存在多边的情况，自动计算各边曲率，默认不开启。
// @link /zh/#
// autoCurveness: true,
// 滚轮缩放的极限控制
// @link /zh/#
scaleLimit: {
min: 0.4,
max: 2
},
// 关系边的公用线条样式
// @link /zh/#
lineStyle: {
color: 'source',
// 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
curveness: .3
},
categories: [],
}
];
this.setOption(this._option);
this._echarts?.hideLoading();
}
public setOption(option: any){
if (Object.keys(option).length>0){
this._echarts?.setOption(_.merge({}, this._option, option))
}
}
public getOption(){
return this._echarts?.getOption();
}
public on(event: string, handler: any){
this._echarts?.on(event, handler)
}
}
const getSingle = (className: any) => {
if (typeof className !== 'function') {
throw('参数必须为一个类或一个函数')
}
const single = (fn: Function) => {
let instance:any = null
return (...args:any[]) => {
if (!instance) {
instance = fn.call(null, ...args)
}
return instance;
}
}
const fn = (...args: any[]) => {
return new className(...args);
};
return single(fn);
}
export default getSingle(EchartsContainer)