SuperYan - 树状图 2023-03-25T14:03:00+08:00 Typecho https://www.hblyan.com/feed/atom/tag/%E6%A0%91%E7%8A%B6%E5%9B%BE/ <![CDATA[【解决方案】React 绘制横向树状决策图解决canvas无法根据内容调整画布大小]]> https://www.hblyan.com/archives/136.html 2023-03-25T14:03:00+08:00 2023-03-25T14:03:00+08:00 SuperYan http://www.hblyan.com

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

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

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

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

]]>