focusNodeAdjacency: true,
1.在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
怎么改变被突出的边的透明度
2.鼠标悬停在边上时,能否突出边两端的节点
配置项如下
var uploadedDataURL = "/asset/get/s/data-1499235623264-Bk1VBW5Nb.gexf";
myChart.showLoading();
$.get(uploadedDataURL, function (xml) {
myChart.hideLoading();
var graph = echarts.dataTool.gexf.parse(xml);
var categories = [];
for (var i = 0; i < 20; i++) {
categories[i] = {
name: '类目' + i
};
}
graph.nodes.forEach(function (node) {
var itemClass = node.attributes.modularity_class;
node.itemStyle = null;
node.value = node.symbolSize;
node.symbolSize /= 1.5;
function addcolor(node) { //根据需要设置颜色列表
var colorList = ['red', 'blue', 'black', 'yellow', 'pink', '#FE8463'];
return colorList[itemClass];
};
node.itemStyle={
normal: {
//color: addcolor(node),
//curveness: 0.3
}
},
node.label = {
normal: {
show: node.symbolSize > 30
}
};
node.category = node.attributes.modularity_class;
});
option = {
//color:['red', 'green','yellow','blueviolet','black'],
color: ['red', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
//color:['red','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
focusNodeAdjacency: true,
label: {
normal: {
position: 'right',
formatter: '{b}'
}
},
lineStyle: {
normal: {
color: 'target',
curveness: 0.3,
opacity: 0.2
},
emphasis: {
color:'blue',
opacity: 0.9,
width: 2,
//color: 'red'
}
}
}
]
};
myChart.setOption(option);
}, 'xml');
myChart.on('mouseover', function (params) {
if(params.dataType == 'node'){
console.log(params);
var selected = params.name;
console.log(selected);
}
// myCharts.setOption({
// options : [
// { // option1
// series : [{
// lineStyle: {
// emphasis: {
// //color:'blue',
// width: 2,
// //color: 'red'
// }
// }
// }]
// },
// ]
// });
});