【React】antv S2快速上手

前言

之前我司一直用葡萄城的excel，但后来没人维护，搞起来麻烦。最近antv s2开源，界面漂亮功能强大，试用了下觉得很不错。

官网

https://s2.antv.vision/zh/docs/manual/introduction

安装

antv的惯例一般是图表是什么框架都可用，另外给你封一套框架专属的适配。 s2需要安装核心包：@antv/s2，比如我使用react，那么使用附带的react包@antv/s2-react（这个react包基本没啥坑，不像某些react包不如直接用核心），当你使用了@antv/s2-react，还需要安装antdicon与antd：antd,@ant-design/icons，部分组件中用到。

数据透视表与明细表

在使用之前，最好搞明白为什么需要用s2。s2的表格分为数据透视表和明细表，明细表类似于普通表格，而数据透视表，就类似于excel中的数据透视表功能。 数据透视表分为下面几个部分： 其中行头是可以一键变为树状格式的，所以产品需要知道自己是不是要的数据透视表功能，而不是做成普通表格的表格树。 切换树属性：

hierarchyType: "tree",

明细表跟普通表格一样，就不说了。 切换表格使用属性

sheetType="pivot"

表格自适应

react组件的SheetComponent已经帮我们写好了自适应代码，当宽高都为true时，使用父容器宽高：

<SheetComponent
				adaptive={
          
   {
          
    width: true, height: true }}
			...
			/>

当为false时，使用s2Options的高度或者宽度，这个宽高不能写100%，必须数字。

数据格式

数据需要传到dataCfg中，dataCfg主要分为3部分，fields，data，meta：

<SheetComponent
	...
	dataCfg={
          
   {
          
   
		fields,
		data,
		meta,
	}}

在数据透视表中，不拘泥与哪个维度做表头，data中每条数据都会有各个维度字段，meta表示字段和显示名称的映射，fields中，主要有columns、rows和values，values是值的字段，columns和rows是列头和角头，行头会在数据中自动生成。 在明细表中，只要配置columns、meta 、data即可，不需要配置rows、values。

行列切换、高级排序、导出

s2react包已经写好这些复杂功能，可以直接使用，行列切换在数据透视表中用起来相当强大，在普通表格里也可以进行换列顺序。

<SheetComponent
	...
	header={
          
   {
          
   
		title: "表头标题",
		description: "表头描述",
		exportCfg: {
          
    open: true }, // 开启导出功能
		advancedSortCfg: {
          
    open: true }, // 开启高级排序功能
		switcherCfg: {
          
    open: true }, // 开启指标切换功能
		//	extra: <button> 插入内容 </button>, //自定义 ReactNode
	}}

开启复制

复制默认关闭的，需要开启：

interaction: {
          
   
		enableCopy: true,
	},

开启分页

分页s2React包也做好了，但是样式需要自己去覆盖，手写开启分页：

showPagination={true}

在s2Option中加入分页设置：

pagination: {
		pageSize: 10,
		current: 1,
	},

主题配置

主题配置做的不错，只要调整js变量即可，我们可以用默认的进行覆盖，复写主题就可以自定义：

const palette = getPalette("default");
const color = generatePalette({
          
   
	...palette,
	brandColor: "#ff6f00",
});
const themeCfg: ThemeCfg["palette"] = color;

传入：

themeCfg={
         
  { palette: themeCfg }}