[纯前端]在线excel开发1:echarts图表联动

开发背景

Excel作为微软Office的得意之作,受到广泛关注。而在实际业务过程中,我们会发现有非常多场景需要web端在线的二维表数据查看+简单图表绘制场景。因此笔者将尝试基于前端技术搭建简化版本的excel在线版本。之所以说简化:我们将功能限定在:

  1. 图表类型部分只支持:折线图,散点图,柱状图
  2. 图表跟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有差异。

未完待续,下一章,我们将来探讨动态图表的创建

相关推荐
慧一居士22 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead23 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js