echarts 关系图 legend 图例不显示问题

关系图希望显示图例,如下效果:
在这里插入图片描述
按照常规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
     }]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端李易安

打赏1元鼓励作者

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值