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

效果

环境

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

目录

仅包含涉及到的文件

| - app
   |- page.tsx
| - components
    |- echarts
       |- graph
          |- echarts.ts
          |- index.tsx

实操

创建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) {