echarts关系图节点发光
时间: 2023-07-06 14:44:13 浏览: 74
要让 Echarts 关系图的节点发光,可以使用 Echarts 的光晕特效(effect)功能。具体实现方法如下:
1. 在 Echarts 配置中启用特效(effect)功能,例如:
```
option = {
...
series: [{
type: 'graph',
...
// 启用特效
rippleEffect: {
period: 4, // 涟漪动画周期
scale: 2, // 涟漪动画中波纹的最大缩放比例
brushType: 'stroke' // 波纹的绘制方式:stroke表示空心圆形
},
...
}]
}
```
2. 在节点上添加特效配置,例如:
```
option = {
...
series: [{
type: 'graph',
...
// 启用特效
rippleEffect: {
period: 4,
scale: 2,
brushType: 'stroke'
},
// 添加节点特效
data: [{
name: '节点1',
x: 100,
y: 100,
// 在节点上添加特效配置
itemStyle: {
color: '#ff0',
// 添加高亮样式
emphasis: {
color: '#f00',
shadowBlur: 10,
shadowColor: '#f00'
},
// 添加光晕样式
shadowBlur: 20,
shadowColor: '#ff0'
}
}, {
name: '节点2',
x: 200,
y: 200,
// 在节点上添加特效配置
itemStyle: {
color: '#f0f',
// 添加高亮样式
emphasis: {
color: '#f00',
shadowBlur: 10,
shadowColor: '#f00'
},
// 添加光晕样式
shadowBlur: 20,
shadowColor: '#f0f'
}
}],
...
}]
}
```
在节点的 itemStyle 中添加 shadowBlur 和 shadowColor 属性,就可以实现节点发光的效果。若要节点高亮,可以在 itemStyle 中添加 emphasis 配置,设置高亮的颜色、阴影模糊度和阴影颜色等。