echarts 关系图legend设置

### 配置 ECharts 关系图中的 Legend 图例 在 ECharts 中，`legend` 组件用于显示图例组件，可以通过 `legend` 属性来定义其样式和行为。对于关系图而言，配置 `legend` 可以帮助用户更好地理解不同类型节点之间的关联。 #### 基本属性设置 要创建一个基本的关系图并为其添加图例，可以在初始化图表实例时指定 `legend` 的数据源以及一些基础样式： ```javascript option = { legend: { // 定义图例组件 data: ['类别A', '类别B'], // 数据项名称列表 orient: 'vertical', left: 'left' }, series : [ { type: 'graph', // 设置系列类型为图形结构 layout: 'force', // 力导向布局 symbolSize: 50, roam: true, label: { show: true }, edgeLabel: { normal: { show: true } }, force: { repulsion: 1000 }, data: [ // 节点数组 {name: '节点1', category:'类别A'}, {name: '节点2', category:'类别B'} ], links: [], // 边缘连接线的数据集 categories:[ // 类别集合 { name: '类别A' }, { name: '类别B' } ] } ] }; ``` 上述代码片段展示了如何向关系图中引入图例，并指定了两个类别的节点作为例子[^1]。 #### 自定义图例外观 除了简单的文字描述外，还可以进一步自定义图例的颜色、图标形状等外观特性。这通常涉及到修改 `itemStyle` 或者使用更高级的选项来自定义每一个图例项的表现形式[^2]。 例如改变默认圆形标记为方形或其他几何图形: ```javascript legend: { icon: 'rect', // 将图例标志改为矩形 } ``` 或者调整字体大小与颜色使图例更加醒目易读: ```css textStyle: { fontSize: 16, color: '#fff' } ``` 这些个性化设定能够让最终呈现的效果贴合具体应用场景的需求。 #### 控制交互效果 为了让用户体验更好，在鼠标悬停于某个图例项目之上时触发相应的变化也是可行的；比如高亮选中的部分或是隐藏未被点击过的其他元素。这类互动逻辑可通过监听事件完成。 ```javascript myChart.on('legendselectchanged', function (params){ console.log(params); }); ``` 此段脚本会捕获到当用户选择了不同的图例条目之后所发生的变动情况，并打印出来供开发者调试或做额外处理。