【React】基于Echarts实现关系图(图谱&graph)_关系网react

效果

环境

• echarts: ^5.5.0
• lodash: ^4.17.21
• next: 14.1.3
• react: ^18

目录

仅包含涉及到的文件

| - app
   |- page.tsx
| - components
    |- echarts
       |- graph
          |- echarts.ts
          |- index.tsx
1
2
3
4
5
6
7

实操

创建EchartsGraph组件

• components/echarts/graph/index.tsx

"use client"

import react, {useEffect, useRef} from "react";
import EchartsContainer from "./echarts"

type Props = {
    nodes: object[],
    edges: object[],
    categories: object[]
}

const ChartBoxStyles:react.CSSProperties = {
    width: '100%',
    height: '100%'
}

const EchartsGraph = function (props: Props) {
    let echartsRef = useRef<HTMLDivElement>(null);

    useEffect(()=>{
        const chart = EchartsContainer(echartsRef.current);
        chart.setOption({
            legend: [
                {
                    data: props.categories.map(function (a:any) {
                        return a.name;
                    })
                }
            ],
            series: [
                {
                    nodes: props.nodes,
                    edges: props.edges,
                    categories: props.categories,
                }
            ]
        });
        // 绑定鼠标松开触发事件，用于固定节点
        chart.on('mouseup', function (params: any) {
            let option = chart.getOption();
            option.series[0].nodes[params.dataIndex].x = params.event.offsetX || option.series[0].nodes[params.dataIndex].x;
            option.series[0].nodes[params.dataIndex].y = params.event.offsetY || option.series[0].nodes[params.dataIndex].y;
            option.series[0].nodes[params.dataIndex].fixed = true;
            chart.setOption(option);
        })

    }, [])

    return (
        <div ref={echartsRef} style={ChartBoxStyles}/>
    )
}

export default EchartsGraph
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

• components/echarts/graph/echarts.ts

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 https://echarts.apache.org/zh/option.html#series-graph.edgeSymbol
                edgeSymbol: ['arrow', ''],
                // @link https://echarts.apache.org/zh/option.html#series-graph.force
                force: {
                    // 边的两个节点之间的距离，这个距离也会受 repulsion。
                    // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
                    edgeLength: 120,
                    // 节点之间的斥力因子
                    repulsion: 500,
                    // 节点受到的向中心的引力因子（该值越大节点越往中心点靠拢）。
                    gravity: .2,
                    // 减缓节点的移动速度(取值范围 0 到 1)
                    friction: .6
                },
                // 是否开启鼠标缩放和平移漫游
                roam: true,
                // 节点是否可拖拽
                draggable: true,
                // 高亮状态的图形样式
                // @link https://echarts.apache.org/zh/option.html#series-graph.emphasis
                // DEPRECATED: itemStyle.emphasis has been changed to emphasis.itemStyle since 4.0
                emphasis:{
                    //鼠标放上去有阴影效果
                    itemStyle: {
                        shadowColor: '#cccccc',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 40,
                    },
                },
                // 文本标签配置
                // @link https://echarts.apache.org/zh/option.html#series-graph.label
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                },
                // 标签的统一布局配置
                // @link https://echarts.apache.org/zh/option.html#series-graph.labelLayout
                // labelLayout: {
                //     hideOverlap: true,
                // },
                // 针对节点之间存在多边的情况，自动计算各边曲率，默认不开启。
                // @link https://echarts.apache.org/zh/option.html#series-graph.autoCurveness
                // autoCurveness: true,
                // 滚轮缩放的极限控制
                // @link https://echarts.apache.org/zh/option.html#series-graph.scaleLimit
                scaleLimit: {
                    min: 0.4,
                    max: 2
                },
                // 关系边的公用线条样式
                // @link https://echarts.apache.org/zh/option.html#series-graph.lineStyle
                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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

页面调用

demo数据源于官方的一个演示接口数据：
https://echarts.apache.org/examples/data/asset/data/les-miserables.json

import EchartsGraph from "@/components/echarts/graph";
import demoData from "./demo"

export default function Home() {

  return (
    <main style={{
        width: '100%',
        height: '100vh'
    }}>
      <EchartsGraph nodes={demoData.nodes}
                    edges={demoData.links}
                    categories={demoData.categories} />
    </main>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16