概述
通过 PWC 插件定制图谱布局、节点样式与交互事件。
能力说明
客户联系人权力地图和树形组件以可视化方式展示层级关系。标准组件使用预置的布局和节点样式。如果企业有特定的展示或交互要求，可以通过 PWC 插件接管相关配置。
开始之前
开始之前
- 适用角色：本指南面向实施和开发人员。
- 适用版本：9.9.0 及以上版本，已全网发布。
- 适配终端：Web、App 和第三方 H5。
- 验证要求：请先在测试环境验证当前组件版本。
可扩展内容
| 扩展点 | 作用 | 示例用途 |
|---|---|---|
processGraphOptions |
调整图谱基础布局 | 将布局改为从左到右，调整节点间距 |
processNodeConfig |
调整节点样式 | 设置边框颜色、线宽和填充色 |
processAddEvent |
绑定自定义交互事件 | 监听自定义区域的点击事件 |
配置示例
以下代码展示布局、节点样式与自定义事件的扩展方式：
return {
Value: {
processGraphOptions(graphOptions, context) {
graphOptions.layout.direction = 'LR';
graphOptions.layout.getVGap = () => 60;
return graphOptions;
},
processNodeConfig(nodeConfigOptions, context) {
nodeConfigOptions.style = {
stroke: '#189DFF',
lineWidth: 2,
fill: '#F2F4FB'
};
return nodeConfigOptions;
},
processAddEvent(graph, context) {
graph.on('custom-shape:click', (event) => {
console.log('Custom element has been triggered!', event);
});
}
}
};
验证方法
- 在测试环境加载插件。
- 检查布局方向和节点样式。
- 触发自定义区域并检查事件。
- 分别验证 Web、App 和 H5。
**注意：**示例仅说明配置思路。实际接口和上下文参数以当前 PWC 环境为准。
如何撤销扩展
如果插件影响图谱展示或交互，请先停用对应插件，或恢复上一个已验证的实现。恢复后，请重新验证三类终端。