[纯前端]在线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有差异。

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

相关推荐
gAlAxy...8 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁8 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖8 小时前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响9 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL10 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟11 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
尘觉12 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge13 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean13 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户214118326360213 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端