基于antV的可视化图表组件封装
**之前参与公司数据化可视化平台的研发，积累了一些微不足道的经验分享出来。希望能帮助到大家同时也欢迎大家能提供不同的思路。**
组件封装思路
// 通过vue提供的动态组件将封装好的不同图表的子组件动态挂载到当前画布上
<component v-for="item in assemblyList" :is="componentId"></component>
<script>
import SubComponent from '.../'
components: {
componentA: SubComponent
}
</script>
拖拽组件放置于画布或容器时，直接将当前拖拽的图表组件名称push到assembList中，这样在图表组件就在容器中渲染啦。图表数据直接在对应的图表组件中加载就可以。
图表组件可以根据图表类型分文件依次封装子组件引入当前渲染容器中；这样做的好处不言而喻，不同的开发负责一种类型的图表组件封装，比如柱形图、饼图、折线图等。这样原子化拆分后对于不同图表组件的定制化就非常容易了，图表的一些公共的配置项也可以抽离出来。
另外再推荐一个非常好用的基于vue的栅格布局系统，包括碰撞检测、基线对齐、静态部件（不可拖拽、调整大小）、拖拽和调整大小时进行边界检查、增减部件时避免重建栅格、可序列化和还原的布局。
如果要做拖拽式组件的可配置化看板，这个插件非常好用。
vue-grid-layout:jbaysolutions.github.io/vue-grid-la…
