echarts sankey图添加路径标识符

自定义Sankey图布局
本文探讨了在前端开发中如何解决Sankey图特定布局需求的技术难题,包括自定义节点排列方式及间距调整等,通过深入研究源码实现了父类型节点的垂直对齐显示。

最终效果

产品:我要同一个父类型的在一列,父类型名称需要与每列的节点对齐。

我:这个不得行啊(嘴上这么说,身体却很诚实。咳咳).....

1.同一父类型在一列,这个想到depth可以搞定,父类型名称需要与每列的节点对齐这个考虑如下。

2.首先想到的是xAxis,立马去试了下,结果报错了,图都出不来。然后就去官网的DEMO上改,发现也是同样的错误。

百度,bing,github都没找到这个错误的解决方案,最终放弃。

3.看了遍api也没有能实现这个需求的,嗯嗯,就很nice。最后想,那就自己写吧,但是每列节点之间的间距我要怎么获取?api里也没提供,然后就在github里面看sankey图相关的源码,最后发现

scalNodeBreadths里的kx是关键,想着它这个kx怎么获取到的,继续看,哦,在这computeNodeBreadths个方法里获取到的

orient、nodeWidth、width、height都是我们传的,关键是这个maxDepth怎么来的?x是怎么来的?

4.....又查看源码,最终发现x获取太过于复杂,再次放弃。没办法了,逼我放大招了,直接把kx改成固定值,手动滑稽!

最终达到预期。

缺点:必须每位前端开发人员的源码都需要改动,避免打包后出现异常。后续接盘人员难以维护。

解决方案:文档说明

建议把kx改为变量,让用户可修改,扩展性比较强

 

ECharts是一个强大的数据可视化库,其官方并没有直接提供拓扑(Graph)类型的表,但你可以通过第三方插件如`echarts-gl`或自定义组件来创建类似功能。如果你想在ECharts中实现拓扑并支持点击事件来添加新节点,可以按照以下步骤操作: 1. 首先,安装ECharts-gl插件: ```bash npm install echarts-gl --save ``` 2. 引入所需模块: ```javascript import * as ECharts from 'echarts'; import 'echarts-gl'; ``` 3. 创建一个基础的拓扑配置,包括节点、链接等: ```javascript const nodes = [...]; // 新建节点的数据数组 const links = [...]; // 新建连接的数据数组 const chart = ECharts.init(document.getElementById('container')); let addNodeOption = { // 初始化配置,包含形类型(例如 force, sankey 等)、节点和链接数据等 series: [ { type: 'force', data: { nodes, links }, roam: true, onclick: function (params) { // 点击事件处理函数 if (params.type === 'node') { // 在这里添加新的节点数据,并更新表 nodes.push(newNodeData); chart.setOption({ series: { nodes } }); } }, ] }; ``` 4. 当用户点击某个节点时,动态添加新节点到`nodes`数组中,并重新设置表选项。 5. 可能还需要对节点样式、布局以及交互效果进行定制,根据实际需求调整相应配置。 记得在HTML文件中给容器添加id,以便ECharts初始化渲染: ```html <div id="container" style="width: 800px; height: 600px;"></div> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值