可视化h5界面编辑器_基于f2从零实现移动端可视化编辑器

前言

笔者之前花了大量的时间在思考如何设计和实现H5页面可视化编辑器H5-Dooring，从第一个版本到现在经历了很多次版本迭代和优化，也收到了很多宝贵的建议，目前刚好完成了移动端数据可视化的基本设计和落地方案，在这里特地总结和复盘一下。

我们先来看看实现的基本预览图：

你将收获

• 基于antv/f2实现可视化图形组件的封装
• 如何设计表格编辑器并集成到antd的Form中
• 数据可视化组件的schema约定
• 利用js-xlsx解析Excel文件并导入到Table中作为可视化组件的数据源

正文

在开始正式实现之前笔者先对H5数据可视化做一个基本的介绍，方便大家理解其价值。

1. H5数据可视化方案的应用场景

随着人工智能和大数据的快速发展，数据可视化设计在移动端的应用越来越多，主要体现在数据图表，也就是我们常见的柱状图，折线图，条形图，雷达图等。它们能很形象的展示不同产品或者某类特征的变化趋势，从而为我们决策提供依据。比如说我们常见的性格测试雷达图，各类金融app比较爱玩的某某g票的趋势预测折线图，运营人比较喜欢用的漏斗模型等，几乎任何领域都有自己的可视化应用。如下图几个例子：

所以为了满足企业对移动端场景下的可视化需求，能设计一款针对移动端的傻瓜式可视化搭建平台是非常有实际意义的，目前也有很多公司在做，在商业智能领域也有不错的应用。接下来笔者就来带大家一起实现一个这样的H5数据可视化搭建平台。

2. H5数据可视化设计平台的实现方式

目前市面上已有的比较流行的可视化库有echart，antv，D3.js等，针对于移动端而