ECharts 力导向图代码
- 1.基本概念
- 2.效果图
- 3.核心配置结构
- 4.关键配置项详解
- 节点与边 (Nodes & Links)
- 视觉映射
- 5.完整代码
- 6.在线运行
1.基本概念
力导向图通过模拟物理力学（节点间的斥力、连接线的引力）自动计算节点的空间布局，适合展示复杂关系网络。在 ECharts 中通过 series.type: ‘graph’ 和 layout: ‘force’ 实现。
2.效果图
3.核心配置结构
option = {// 标题、提示框、工具箱等通用配置title: { ... },tooltip: { ... },toolbox: { ... },// 图例（按 categories 分类）legend: {data: ['类别1', '类别2', ...]},// 系列配置series: [{type: 'graph',layout: 'force', // 关键：指定力导向布局categories: [ // 节点分类（对应 legend）{ name: '类别1' },{ name: '类别2' }],data: [ ... ], // 节点数据links: [ ... ], // 边数据force: { ... }, // 力学模型参数label: { ... }, // 标签样式draggable: true, // 节点是否可拖拽lineStyle: {color: 'source',curveness: 0.3 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。} // 节点样式}]
}
4.关键配置项详解
节点与边 (Nodes & Links)
data（节点数组）：
{name: "节点名称",value: 数值, // 影响节点大小category: 0, // 对应 categories 的索引symbolSize: 30, // 直接指定节点大小itemStyle: { color: '#FF0000' } // 自定义颜色
}
links（边数组）：
{source: 0, // 源节点索引（对应 data 的下标）target: 1, // 目标节点索引lineStyle: { width: 2 } // 线条样式
}
力学模型参数 (force)
force: {repulsion: 100, // 节点间斥力（值越大节点越分散）edgeLength: 100, // 边的理想长度gravity: 0.1, // 向心力（值越大节点越向中心聚集）friction: 0.6 // 摩擦系数（0~1，影响动画收敛速度）
}
视觉映射
- 按分类着色：通过 categories 和节点的 category 字段自动分配颜色。
- 动态大小：通过 symbolSize 或 value 映射节点尺寸。
- 高亮交互：使用 emphasis 配置鼠标悬停效果。
5.完整代码
let nodes = [//展示的节点 {"name": "空气质量不佳",//节点名称 "value": 63,"depth": 0,"id": 0,"category": 3//与关系网类别索引对应，此处只有一个关系网所以这里写0 },{"name": "影响因素","value": 40,"category": 2,"depth": 1,"id": 1,},{"name": "负面影响","value": 40,"category": 2,"depth": 2,"id": 2,},{"name": "其他原因","value": 30,"category": 1,"depth": 1,"id": 3}, {"name": "人类活动","value": 23,"category": 0,"depth": 1,"id": 4}, <