开发背景
Excel作为微软Office的得意之作，受到广泛关注。而在实际业务过程中，我们会发现有非常多场景需要web端在线的二维表数据查看+简单图表绘制场景。因此笔者将尝试基于前端技术搭建简化版本的excel在线版本。之所以说简化：我们将功能限定在：
- 图表类型部分只支持：折线图，散点图，柱状图
- 图表跟table sheet的交互限定在排序+数据筛选高亮
初步的效果如下图展示：
市面上有非常多优秀的实践，如飞书的多维表格 ，office 在线版本，google docs在线文档，还包括各类主流笔记的插入表格等等。我们将基于开源框架实现最简单的版本，抛砖引玉，探索各类有意思的技术细节。
开源工具
在工具的筛选中，我们基于主流的图表库(echarts)和二维表单库（ant S2），后者支持明细表和透视表。
名词解释：明细表就是大家常见的table组件，只有顶部含有列属性；而对应的透视表（pivot table）或者叫交叉表，则是有左侧，顶部 两个维度属性的多维度表格，这里截取s2中的说明来直观查看其中的特点（每个维度方向中的列或行都可以聚合）：
echarts中如何协同高亮
上述的三种图表中，散点图相对比较特殊，其他两种都可以通过属性配置itemStyle来高亮
js
// series中的data:
[
100,
200,
{
value: 300,
itemStyle: {
color: 'rgba(255,0,0,0.8)',
}
}
]来设置，但scatter散点图缺不支持，如果设置会导致解析失败，图表点无法显示。而在echarts 3.x后提供了dispatchAction来触发高亮 api地址：echarts.apache.org/zh/api.html...
因此我们可以统一基于此来选择对应数据的高亮情况。
s2中单元格如何获取高亮所需的dataIndex
首先我们监听S2的DATA_CELL_BRUSH_SELECTION事件来批量获取选择数据，但由于返回的DataCell数据结构已经包含了对应的二维数据，我们可以很方便的聚合对应的数据
如果是单列的维度，那我们就可以聚合对应的rowIndex.
s2的监听器就够了么
我们在测试中很明显发现，点击空白，高亮默认没有清空，因此我们还需要继续监听对应的onReset事件来清理对应的高亮逻辑
如果我想要支持单击的时候有高亮呢
s2 react 的SheetCompontn 可以单独监听onDataCellClick事件，用于在datacell click单击事件中获取event，这里注意其返回的数据结构与DataCell有差异。
未完待续，下一章，我们将来探讨动态图表的创建