echarts关系图多条连线
时间: 2025-05-05 22:28:57 浏览: 22
### 如何在 ECharts 关系图中添加和配置多条连线
#### 创建基本的关系图表实例
为了展示如何向关系图中添加并配置多条连线,先创建一个基础的 ECharts 实例。这涉及到初始化容器以及设置一些必要的全局选项。
```javascript
// 初始化 ECharts 图表对象
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
```
#### 配置数据集与节点间连接
定义好要显示的数据点(即节点),并通过 `links` 属性指定这些节点之间的关联。每一条边可以有自己的样式和其他属性来区分不同的关系类型。
```json
option = {
series: [{
type: 'graph',
layout: 'force', // 使用力导向布局算法自动排列节点位置
data: [
{name: 'Node A'},
{name: 'Node B'},
{name: 'Node C'}
],
links: [
{source: 'Node A', target: 'Node B', value: 10, lineStyle:{normal:{color:'red'}}},
{source: 'Node A', target: 'Node C', value: 20, lineStyle:{normal:{color:'blue'}}}
]
}]
};
myChart.setOption(option);
```
上述代码片段展示了两个不同颜色的连线条目被加入到了 `'Node A'` 和其他两个目标节点之间[^1]。
#### 自定义连线上的标签或文本标注
如果希望在线上加上额外的信息比如权重或者其他描述性的文字,则可以通过调整 link 中 label 的参数来进行自定义:
```json
{
source: 'Node A',
target: 'Node B',
value: 15,
label:{
normal:{
show:true,
formatter:function (params){
return params.data.value + '%';
}
}
},
lineStyle:{
normal:{
color:'#ff7f50'
}
}
},
```
这段 JSON 片段说明了怎样通过修改 `label.normal.formatter` 函数来自动生成基于特定逻辑的文字内容,并将其放置于对应的边上[^2]。
阅读全文
相关推荐


















