讯tmagic-editor是一个所见即所得的页面可视化编辑器，实现零代码/低代码生成页面，可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本。

以下是腾讯视频会员业务基于tmagic-editor搭建的可视化页面搭建平台示意图。tmagic-editor已经用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每月生产和发布数百个页面。

基于可视化编辑器的页面生产流程

一、物料开发

主要是指业务组件，比如图片组件、抽奖组件、登录插件等。tmagic-editor本身并不提供业务组件，业务组件由使用tmagic-editor的业务，根据自己的业务需求去自行开发。业务组件一次开发，在多个页面反复使用，业务组件应该提供一些配置选项，保证灵活性，满足不同页面使用该组件时的定制需求。业务组件可以用不同的前端框架实现，如vue2、vue3、react。

二、编排

这里指通过对组件的拖拽和配置，完成页面编辑，主要由非技术人员完成。

三、保存与发布

这个环节在技术实现上，分为生成DSL、构建、部署。生成DSL：编辑器和生成的页面之间，通过DSL解耦。编辑器上配置页面，得到的产物是一个序列化js对象的页面描述文件，这个对象采用js schema描述，描述页面的基本信息、包含的组件信息、以及组件间逻辑。构建：构建模块基于runtime代码，对组件进行打包构建，生成html、js、css文件。构建环节使用的runtime可以根据业务的需要，选择不同的前端框架实现，tmagic-editor默认提供了vue2、vue3、react三种runtime。部署：将前面环节生成的html、js、css、js schema描述文件，部署到业务自己的服务器上。

tmagic-editor提供了什么

可视化编辑器

如上图所示，就是tmagic-editor可视化编辑器，tmagic-editor基于vue3实现。包括左侧侧边栏、组件列表展示、已选组件的组件树、中间的页面拖拽的画布区域（也叫模拟器）、右侧表单配置区域、正中间上方的画布控制区域（放大缩小、网格线显隐）、预览、保存、查看源码（js schema描述的js对象）、底部区域的页面添加与删除。编辑器具有扩展功能，业务可以根据需要在侧边栏和顶部栏增加版本管理、发布等功能。

runtime

runtime 的概念，是理解tmagic-editor页面运行的重要概念，runtime 是承载tmagic-editor页面的运行环境。可视化页面需要在tmagic-editor编辑器中搭建、渲染，通过模拟器所见即所得。搭建完成后，保存配置并发布，然后渲染成用户访问的真实页面。其中涉及到两个不同的 runtime：编辑器中的模拟器，终端打开真实页面。

由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue2/vue3 和 react 的 runtime 。

各个 runtime 的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。tmagic-editor示例代码中的打包就是基于 runtime 进行的。

管理端demo

编辑器可以对一个页面进行编辑、配置、发布，我们还需要一个管理端来对页面列表进行管理。我们提供了一个管理端demo，方便业务快速搭建起一个完整的可视化搭建平台。管理端提供了如下能力：

• 页面列表展示，查询
• 页面创建，复制
• 页面编辑以及 AB TEST 配置能力
• 页面发布以及发布状态查看和管理

使用tmagic-editor的业务需要做什么

开发业务组件

tmagic-editor并不提供业务组件，业务需要根据自己的业务场景，开发相应的业务组件。比如抽奖组件、视频播放组件等。tmagic-editor的通用性设计，使得业务方可以使用不同的前端框架去开发组件。tmagic-editor官方已经提供了vue2/vue3、react的runtime，意味着业务可以直接使用这些框架开发组件，如果业务想用其它框架开发组件，则需要开发相应的runtime。

开发业务插件（可选）

插件的功能是作为页面逻辑行为的一种补充方式。一般不显式的在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面），通常我们会用插件实现类似登录，页面环境判断，请求拦截器等功能。跟组件一样，可以用不同前端框架实现。

部署可视化搭建服务

tmagic-editor提供的是开源代码，并不是一个saas服务，因此业务需要自己部署可视化搭建平台的服务。

构建和发布页面

业务需要管理自己的组件库，在发布环节基于拿到的页面js Schema描述文件，基于runtime进行打包构建，并把打包构建的产物部署到自己的服务器/CDN。

其它定制需求

如果对编辑器有一些扩展需求，编辑器已经预留了相应的扩展能力，业务可以开发相应扩展功能。tmagic-editor提供了vue2/vue3、react的runtime，业务可以修改runtime，或者开发其它前端框架的runtime。

tmagic-editor能力项

如何了解tmagic-editor

开源地址：github.com/Tencent/tmagic-editor

在线文档：tencent.github.io/tmagic-editor/docs/

在线体验：tencent.github.io/tmagic-editor/playground/index.html

 1.下载项目、把oasys.sql(原tr18lx.sql)导入本地数据库
	2. 修改application.properties，
	3. 修改数据源，oasys——>自己本地的库名，用户名和密码修改成自己的
	4. 修改相关路径，配置图片路径、文件路径、附件路径
	5. OasysApplication.java中的main方法运行，控制台没有报错信息，数据启动时间多久即运行成功
	6. 在浏览器中输入localhost:8088/logins

言

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

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

你将收获

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

正文

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

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

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

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

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

目前市面上已有的比较流行的可视化库有echart，antv，D3.js等，针对于移动端而言，笔者还是觉得antv/f2更加适合，其官网介绍如下：

F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。

我们就暂且相信它官网的描述，接下来的技术实现笔者也会基于f2做可视化组件的二次封装。

【限时免费】AI大厂面试核心考点，六大方向一网打尽

已失效

2.1 需求设计

笔者在开发产品之前的一贯风格就是先要理清需求，只有在需求确定之后我们才能做更加合适的技术选型和方案，所以笔者在此带大家分析一下移动端可视化编辑器的需求设计。

上图为一个可视化组件编辑器的基本模型，组成结构大致为： 图表组件 数据源 * 属性编辑器（组件标题，颜色，对齐等属性）

所以说我们大致可以抽象为如下原型：

组件列表为我们提供选择不同组件的能力，画布区域主要用来拖拽图形和调整图形位置，大小，编辑器用来定制图形的“形状”和数据源导入。在了解基本的需求之后我们来进行接下来的开发工作。

2.2 基于antv/f2实现可视化图形组件的封装

由于市场上暂时没有比较成熟的基于f2的react组件等封装， 所以这里笔者对其做一个简单的二次封装来实现我们的组件定制的需求。对于组件列表，为了提高加载性能，笔者用图片占位符代替。数据传递方式和H5-Dooring已有组件的拖拽一致,这里就不一一介绍了。

在开发组件之前我们先安装一下f2:

yarn add antv/f2

为了进一步降低移动端代码体积和提高加载性能，我们在引入组件时可以按需引入：

// 引入核心包
const Core = require('@antv/f2/lib/core');
require('@antv/f2/lib/geom/line'); // 只加载折线图
require('@antv/f2/lib/geom/area'); // 只加载面积图

按需引入的方式官网上有详细的说明，感兴趣的可以学习了解一下。

在上面的需求分析中我们大致了解了可视化组件需要设置的属性，这里我们先整理一下以便接下来对可视化组件的封装：

我们来看看Chart组件的实现：

// components/Chart
import { Chart } from '@antv/f2';
import React, { memo, PropsWithChildren, useEffect, useRef } from 'react';
import ChartImg from '@/assets/chart.png';

import styles from './index.less';

type DataItem = {
  name: string;
  value: number;
};

interface XChartProps {
  isTpl: boolean;
  title: string;
  color: string;
  size: number;
  paddingTop: number;
  data: Array<DataItem>;
}

const XChart = (props: PropsWithChildren<XChartProps>) => {
  const { isTpl, data, color, size, paddingTop, title } = props;
  const chartRef = useRef(null);
  useEffect(() => {
    if (!isTpl) {
      const chart = new Chart({
        el: chartRef.current || undefined,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
      });

      // step 2: 处理数据
      const dataX = data.map(item => ({ ...item, value: Number(item.value) }));

      // Step 2: 载入数据源
      chart.source(dataX);

      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart
        .interval()
        .position('name*value')
        .color('name');

      // Step 4: 渲染图表
      chart.render();
    }
  }, []);
  return (
    <div className={styles.chartWrap}>
      <div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
        {title}
      </div>
      {isTpl ? <img src={ChartImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
    </div>
  );
};

export default memo(XChart);

以上Chart组件就基本封装完毕，如果有更多定制化需求，也可以自行添加。代码中我们采用typescript和React Hooks开发，为了对组件进行做优化，我们用了memo，如果对这些技术点不熟悉的，稍后可以移步我的react hooks和typescript相关的文章学习。

以上只是完成了基本的可视化组件的封装，接下来的重点是实现可视化组件和表单编辑器之间的联动。

2.3 设计表格编辑器并集成到antd的Form中

表格编辑器的实现我们主要基于antd的Table组件来实现，当我们点击数据源的时候，会弹出表格编辑器，我们先来看看效果：

我们可以直接对数据源进行编辑，比如修改数据，删除数据，添加数据，也即是CURD的那套流程。并且支持导入excel数据，这块笔者将在下一章节来实现。

可编辑表格实现原理就是在表格中加入状态，分为查看模式和编辑模式，编辑模式采用input框，在失焦时进行保存/切换查看状态。添加行的逻辑主要是动态插入一条数据，这块实现也比较简单，具体实现感兴趣的朋友可参考我的源码。

部分代码参考如下：

// 添加行
handleAdd = () => {
  const { count, dataSource } = this.state;
  const newData = {
    key: count,
    name: `dooring ${count}`,
    value: 32,
  };
  const newDataSource = [...dataSource, newData];
  this.setState({
    dataSource: newDataSource,
    count: count + 1,
  });
  this.props.onChange && this.props.onChange(newDataSource);
};

// 保存行数据
handleSave = row => {
  const newData = [...this.state.dataSource];
  const index = newData.findIndex(item => row.key === item.key);
  const item = newData[index];
  newData.splice(index, 1, {
    ...item,
    ...row,
  });
  this.setState({ dataSource: newData });
  this.props.onChange && this.props.onChange(newData);
};

上面代码的this.props.onChange主要是为了antd的Form能接受到变化，使Table Editor成为Form的“受控组件”。

2.4 利用js-xlsx解析Excel文件并导入到Table中作为可视化组件的数据源

对于上面介绍的数据源录入，我们有两种模式：手动录入和文件导入。设计文件导入主要是为了更好的用户体验，这里为了实现该功能我们可以采用社区比较火的js-xlsx，一款专业的解析excel数据的插件，而且可以输出多种数据类型。

我们先来安装一下：

npm install xlsx

读取excel文件数据代码如下：

// 读取本地excel文件
function readLocalFile(file, callback) {
    let reader = new FileReader();
    reader.onload = function(e) {
        let data = e.target.result;
        let formData = XLSX.read(data, {type: 'binary'});
        if(callback) callback(formData);
    };
    reader.readAsBinaryString(file);
}

有了以上代码，我们只需要在导入excel的按钮上绑定事件并解析数据即可实现导入功能。大家可以尝试一下。

以上就基本实现了我们的整个体系设计，后面的雷达图，折线图等实现原理也类似。我们看看用H5-Dooring配置出的几个案例：

当然大家也可以在H5-Dooring定制自己的H5数据可视化面板。

3. 总结

以上教程笔者已经集成到H5-Dooring中，对于一些更复杂的交互功能，通过合理的设计也是可以实现的，大家可以自行探索研究。

github搜索：H5在线编辑器H5-Dooring

最后

如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。