echarts graph（关系图），force（力引导布局），circular（环形布局）

最新推荐文章于 2024-09-02 23:33:47 发布

桂秋拾貳.

最新推荐文章于 2024-09-02 23:33:47 发布

阅读量1.6k

点赞数 8

分类专栏：日常学习文章标签： echarts javascript 前端 java 后端学习开发语言

本文链接：https://blog.csdn.net/qq_58925458/article/details/136914309

版权

这篇博客详细介绍了如何利用Echarts库创建关系图，包括普通布局、环形布局和力引导布局。通过读取JSON数据，处理数据结构，并展示最终的图表效果。

摘要由CSDN通过智能技术生成

echarts graph 图

1. 普通布局（成品在下方）

数据我是从json文件中读取的

数据结构为：

{
   
    "network": {
   
        "items": [
            {
   
                "id": "****", // 名称
                "x": 0.7295, // x轴坐标
                "y": -0.0745, // y轴坐标
                "cluster": 10, // 类目
                "weights": {
   
                    "Documents": 5900 // 值
                }
            },
            // ......
        ],
        "links": [
            {
   
                "source_id": "acoustics", // 关系 源头
                "target_id": "audiology & speech-language pathology", // 关系 目标
                "strength": 688 // 关系的值
            },
            // ......
        ]
    }
}

获取数据之后，开始处理数据结构

// 数据
const items = res.data.network.items
let data = items.map((item, index) => {
   
    return {
   
        id: index, // 下标序号 注意：如果data中设置了ID，link中必须以下标作为关联，如果不设置，默认通过name关联
        name: item.id, // 节点的name值
        symbolSize: Math.log(item.weights.Documents) * 2, // 控制节点大小,这里使用的是Log对数处理
        x: item.x, // x轴坐标
        y: item.y, // y轴坐标
        value: item.weights.Documents, // 节点的值
        category: item.cluster - 1  // 类目
    }
})
// 每个节点的名称
let ids = items.map((item) => {
   
    return {
    name: item.id }
})
// 处理link
const links = res.data.network.links
let link = links.map((item, index) => {
   
    return  {
   
        // source: item.source_id, // 注意：如果data中设置了ID，link中必须以下标作为关联，如果不设置，默认通过name关联
        // target: item.target_id, // 注意：如果data中设置了ID，link中必须以下标作为关联，如果不设置，默认通过name关联
        source: ids.findIndex((val) => val.name === item.source_id), // 从每个节点中获取下标
        target: ids.findIndex((val) => val.name === item.target_id), // 从每个节点中获取下标
        value: item.strength,
        lineStyle: {
   
            width: item.strength / 3000,
            color: '#d2d2d2', // 线的颜色[ default: '#aaa' ] #d2d2d2 
            // 如果source线的颜色为source的节点颜色
            // color: { 自定义渐变色
            //   colorStops: [
            //     { offset: 0, color: 'red' }, // 渐变起始颜色
            //     { offset: 1, color: 'yellow' } // 渐变结束颜色