SuperYan - 树状图 https://www.hblyan.com/tag/%E6%A0%91%E7%8A%B6%E5%9B%BE/ zh-CN Sat, 25 Mar 2023 14:03:00 +0800 Sat, 25 Mar 2023 14:03:00 +0800 【解决方案】React 绘制横向树状决策图解决canvas无法根据内容调整画布大小 https://www.hblyan.com/archives/136.html https://www.hblyan.com/archives/136.html Sat, 25 Mar 2023 14:03:00 +0800 SuperYan

背景:最近项目中需要展示用户的设备组成图,也就是展开设备的结构。常见的方案就是echarts以及G6等图形解决方案,但是面临的问题就是他们都是画布去展示,经过调研发现,画布通常是固定的,但是用户不想拖拽画布中的内容去预览,于是就要根据画布中的内容展开和缩小去调整画布的大小,能不能实现反正不知道,我看了一天反正挺难得 没有头绪去搞,于是自己写了一个

方案:利用js 和css 手绘一下

应用:全量数据展示出来,不需要拖拽并且能够根据内容撑开页面的高度

直接放代码了,预览效果图根据实际需要自己搬吧~

]]>
0 https://www.hblyan.com/archives/136.html#comments https://www.hblyan.com/feed/tag/%E6%A0%91%E7%8A%B6%E5%9B%BE/