利益相关声明：作者与文中产品有直接的利益相关（开发者、自家产品等）
嗨，大家好，我是徐小夕，一个热爱创新产品的技术达人。
之前也做了很多独立产品，来提高大家的工作效率，今天继续分享一个我基于实际场景开发的小工具——BubbleMap。
开发背景
之前在公司做图表开发的时候涉及到了气泡图的开发，但是由于运营部对这种图需求比较大，所以每次都要找研发人员来支持，做图表数据更新。长此以往就导致研发小伙伴占用了很多琐碎的时间来做这种基础任务，运营小同学也觉得很不方便。
基于这样的场景，我就想到了能不能提供一种可视化的方案，让运营人员全权接管这类需求，然后我就开始规划，其实只需要几步：
- 气泡图谱实现
- 在线编辑数据
- 实时更新图表
最后基于不断的演算推理+实践，这款小工具也成功上线，如果大家有类似的需要，也可以直接免费使用。接下来我就和大家分享一下它的实现思路。
实现思路
整个工具其实只需要分为两部分：
- 画布图表区
- 数据编辑区
画布图表区用来预览图表效果，我们可以使用市面上比较成熟的开源图表库比如Echart，Antv来实现，这里我选择了蚂蚁的Antv。
对于数据编辑区，我们可以用很多方式来实现，比如：
- 表格组件
首先想到的就是 antd 的可编辑表格组件，它提供了完整的案例demo，我们直接基于源码改吧改吧就能用。
- 电子表格
image.png
电子表格也是不错的选择，我们可以用 excel 的表格编辑方式来编辑数据， 比如常用的表格开源项目handsontable.js。
- 嵌套表单
当然这种方式成本也很低，前端小伙伴们可以用antd的form组件或者其他UI组件库实现类似的效果。我在实现气泡图谱工具的时候就是采用的这种方案。
最后实现的效果如下：
效果演示
在实现好这个小工具之后，我来带大家演示一下：
我们可以在右侧编辑修改数据，点击生成即可更新图谱。
后期展望
后续会持续优化它，来满足更多图表的支持，大家感兴趣的可以体验反馈~
