v3.6.2版,[+] 支持图形元素上的鼠标 cursor 样式指定:series-line.cursor、series-bar.cursor、series-pie.cursor、series-scatter.cursor、series-effectScatter.cursor、series-graph.cursor、series-pictorialBar.cursor。
但在应用中,指定 cursor : 'pointer', 样式后,鼠标样式不改变
配置项如下
var data = [
{
"root": "service1",
"clients": [
"service11",
"service12"
]
},
{
"root": "service2",
"clients": [
"service21",
"service22"
],
"servers": [
"service12"
]
}
];
var option = {
series: [{
type: 'graph',
legendHoverLink: true,
layout: 'force',
focusNodeAdjacency: true,
force : { //力引导图基本配置
//initLayout: ,//力引导的初始化布局,默认使用xy轴的标点
repulsion : [100, 600],//节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength :[30, 80],//边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
layoutAnimation : true
//因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。
},
roam : 'move',//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
nodeScaleRatio : 0.2 ,//鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放
draggable : true,//节点是否可拖拽,只在使用力引导布局的时候有用。
cursor : 'pointer',
itemStyle: {
normal: {
color: '#ccc',
borderColor: '#1af'
}
},
lineStyle: {
normal: {
color: '#1af',
opacity: 0.9,
width: 2,
curveness: 0.2
}
},
data : [ {
id : 0,
category : 0,
name : '101.133.8.88',
// symbol : 'roundRect',
symbol : 'roundRect',
value : 20,
symbolSize : 150
},
{
id : 1,
category : 1,
name : '192.168.8.88',
// symbol : 'rect',
symbol : 'roundRect',
value : 450,
symbolSize : 100
},{
id : 2,
category : 1,
name : '192.168.8.88',
// symbol : 'rect',
symbol : 'roundRect',
value : 450,
symbolSize : 100
}],
links : [ //edges是其别名代表节点间的关系数据。
{
source : 1,
target : 0
}, {
source : 2,
target : 0
}]
}]
};
myChart.setOption(option);