先前建议的序言
作者花了很多时间思考如何设计和实现H5页面可视化编辑器H5-Dooring。 从第一个版本到现在，经历了多次迭代和优化，也收到了很多宝贵的建议。 它刚刚完成。 这里专门总结和回顾了中国联通数据可视化的基本设计和实施方案。
我们先看一下实现的基本预览：
你会得到文字
在开始实现之前，笔者先对H5数据可视化进行一个基本的介绍，以便大家能够了解它的价值。
1. H5数据可视化解决方案应用场景
随着人工智能和大数据的快速发展，数据可视化设计在中国联通的应用越来越多，主要表现在数据图表上，即我们常见的柱状图、折线图、条形图、雷达图等，它们可以形象地展现显示不同产品的变化趋势或某些特征，从而为我们的决策提供依据。 比如我们常见的性格测试雷达图、各种金融APP比较玩的某只股票的走势预测折线图、操作者更喜欢使用的漏斗模型等等，几乎任何领域都有自己的可视化应用。 如右图所示，几个反例：
因此，为了满足联通场景下企业的可视化需求，为联通设计一个白痴式的可视化平台具有重要的现实意义。 目前很多公司都在做，在商业智能领域也有很好的应用。 接下去笔者就带大家实现这样一个H5数据可视化平台。
2、H5数据可视化设计平台实现方法
目前市面上流行的可视化库有echart、antv、D3.js等，对于中国联通来说，笔者还是认为antv/f2比较合适，其官网如下：
F2是一款专注于中国联通的开箱即用的可视化解决方案。 完美支持H5环境，兼容多种环境（Node、小程序、Weex）。 拥有完整的图文理论，满足您的各种可视化需求。 专业的联通设计指南，为您带来联通侧图最佳体验。
我们就相信其官网的描述，出来的技术实现也会基于f2进行视觉组件的二次封装。
2.1 需求设计
作者在开发产品之前的一贯风格就是先明确需求。 只有需求确定后，我们才能做出更合适的技术选型和解决方案，所以笔者带大家来分析一下联通可视化编辑器的需求设计。
上图展示了一个可视化组件编辑器的基本模型，其组成结构大致如下：
所以我们可以粗略地将其想象为以下原型：
组件列表使我们能够选择不同的组件。 画布区域主要用于拖放图形以及调整图形的位置和大小。 编辑器用于自定义图形的“形状”并导出数据源。 了解了基本需求后，我们将进行后续的开发工作。
2.2 基于antv/f2的可视化图形组件封装
由于目前市面上还没有比较成熟的基于f2的react组件的封装css3 可视化，所以这里我为其做了一个简单的二次封装，以满足我们的组件定制需求。 对于组件列表，为了提高加载性能，作者将其替换为图片占位符。 数据传输方式与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;
}
const XChart = (props: PropsWithChildren) => {
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 (
{title}
{isTpl ? : }
);
};
export default memo(XChart);
复制代码
上面的Chart组件基本都封装好了。 如果您有更多元化的需求，也可以自行添加。 代码中我们使用typescript和ReactHooks进行开发。 为了优化组件，我们使用 memo。 如果你对这项技术不熟悉，可以移步我的reacthooks和typescript相关文章进行后续学习。
以上仅完成了基本可视化组件的封装，重点是实现可视化组件与表单编辑器的联动。
2.3 设计表单编辑器并集成到antd的Form中
表格编辑器的实现主要基于antd的Table组件。 当我们点击数据源时，就会弹出表格编辑器。 我们先来看看疗效：
我们可以直接编辑数据源，比如更改数据、删除数据、添加数据，这就是CURD的过程。 并且支持导出excel数据，我会在下一章实现。
可编辑表格的实现原理是给表格添加状态，分为查看模式和编辑模式。 编辑模式使用输入框在失焦时保存/切换查看状态。 添加行的逻辑主要是动态插入一条数据，这一条的实现比较简单。 对具体实现感兴趣的同学可以参考我的源码。
部分代码参考如下：
// 添加行
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接受变化，让TableEditor成为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);
}
复制代码
通过上面的代码css3 可视化，我们只需要在导出excel按钮上绑定storm并解析数据即可实现导出功能。 你可以尝试一下。
以上基本实现了我们真实的系统设计，旁边的雷达图和折线图的实现原理也类似。 我们来看几个配置H5-Dooring的案例：
事实上，您还可以在H5-Dooring上定制自己的H5数据可视化面板。
三、总结
上述教程作者已经集成到H5-Dooring中。 对于一些比较复杂的交互功能，也可以通过合理的设计来实现。 大家可以自行探索和研究。
github搜索：H5在线编辑器H5-Dooring
终于
如果你想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等后端知识和实战，欢迎在《有趣的后端》中一起学习讨论探索后端的边界。
发表评论