关系图希望显示图例,如下效果:
按照常规echarts图表的配置,配置完legend,图例居然不显示。
legend: {
show: true,
icon: 'circle',
left: 'left'
}
经过一番查找和思考,原来是因为series配置中没有设置categories项,配置后就显示了。
{
legend: {
show: true,
icon: 'circle',
left: 'left'
},
series: [{
type: 'graph',
// roam: 'scle', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
// 鼠标移动到node节点上高亮显示
focusNodeAdjacency: true,
zoom: 0.8,
force: {
// 这个参数能减缓节点的移动速度。取值范围 0 到 1,从 v4.5.0 开始支持
friction: 0.2,
// 节点之间的斥力因子,值越大则斥力越大
repulsion: 400,
// 边的两个节点之间的距离,值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
edgeLength: [50, 400]
},
layout: 'force', // 图的布局,none不采用任何布局,使用节点中提供的x、y作为节点的位置;circular采用环形布局;force采用力引导布局
symbol: 'circle',
// 图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
// silent: true,
// 是否开启动画
animation: false,
itemStyle: {
borderColor: '#333'
},
lineStyle: {
color: '#333',
width: 2,
type: 'solid',
opacity: 0.5,
curveness: 0.5
},
label: {
show: true,
position: 'inside',
textStyle: {
fontSize: 16
}
},
data: _.uniqBy(chartData, item => item.name),
links: _.uniqBy(linkData, item => item.target),
// 节点分类的类目,如需显示图例,这个项需要配置
categories: legendData
}]
}