logo

S2

  • 使用文档
  • API 文档
  • 图表示例
  • 在线体验
  • 更新日志
  • 所有产品antv logo arrow
  • 2.x
  • 简介
  • 快速上手
  • 基础教程
    • 基本概念
      Updated
    • 表形态
      • 透视表
        Updated
      • 明细表
        Updated
    • 字段标记
      Updated
    • 小计总计
    • 排序
      • 基础排序
        Updated
      • 组内排序
        Updated
    • 主题配置
      Updated
    • Tooltip
      Updated
    • 数据格式化
      New
    • 多行文本
      New
    • 国际化
    • 分页
      New
  • 进阶教程
    • 单元格渲染类型
      • 链接
      • 图片
        New
      • 视频
        New
      • 迷你图表
      • 结合@antv/g2
      • 自定义渲染
    • 自定义
      • 自定义 Hook
        Updated
      • 自定义行列头分组
        New
      • 自定义 Icon
        Updated
      • 自定义单元格对齐方式
        Updated
      • 自定义单元格宽高
        Updated
      • 自定义排序操作
        Updated
      • 自定义折叠/展开节点
        New
    • 交互
      • 基础交互
        Updated
      • 自定义交互
      • 隐藏列头
        Updated
      • 行列宽高调整
        Updated
      • 合并单元格
      • 滚动
        Updated
      • 复制与导出
        New
      • 高亮/选中单元格
        New
    • 分析组件
      • 简介
        New
      • 高级排序
        Updated
      • 维度切换
        Updated
      • 导出
        Updated
      • 分页
        Updated
      • 维度下钻
        Updated
    • 表格组件
      • 编辑表
      • 趋势分析表
        Updated
    • 高清适配
      Updated
    • 获取表格实例
    • 表格自适应
    • 获取单元格数据
      Updated
    • 注册 AntV/G 插件
      New
    • 透视组合图
      Experimental
    • Vue 3.0 组件 (停止维护)
  • 扩展阅读
    • 数据流处理
      • 透视表
      • 明细表
    • 布局流程
      • 透视表
      • 明细表
    • 性能介绍
      Updated
  • 贡献指南
  • 常见问题
  • S2 2.0 升级指南

趋势分析表

上一篇
编辑表
下一篇
高清适配

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

@antv/s2-react

为了满足更多的分析场景,S2 提供开箱即用的场景表组件 —— 趋势分析表。借助它,你可以非常方便的实现单元格内展示多指标的场景表格。

如图所示,该类表格的表形态特点在于可以在同一个数据单元格和列头单元格内展示多个指标数据,用于需要关注时间趋势下的数据指标,查看同环比等场景。行头可以 自定义层级结构。因此有此类分析需求时,可以直接使用该组件。

preview

注意

趋势分析表组件使用了 S2 提供的各种能力进行融合,所以建议在阅读本章前,请确保你已经阅读过以下章节:

  • 基本概念
  • 字段标记
  • 自定义行列头

快速上手

s2DataConfig

查看详情

s2Options

查看详情
const s2Options = {
width: 600,
height: 480,
// 角头文本
cornerText: '指标层级',
// 条件格式
conditions: {
// 同环比数值映射规则
text: [
{
field: 'number',
mapping: (value, cellInfo) => {
const { meta, colIndex } = cellInfo;
if (
colIndex === 0 ||
!value ||
!meta?.fieldValue
) {
return {
fill: '#000',
};
}
return {
fill: value > 0 ? '#FF4D4F' : '#29A294',
};
},
},
],
},
style: {
dataCell: {
valuesCfg: {
// 原始数据字段,用于原始数据导出和 tooltip 展示
originalValueField: 'originalValues',
},
},
},
};
import React from "react";
import { SheetComponent } from "@antv/s2-react";
import '@antv/s2-react/dist/s2-react.min.css';
const App = () => {
return (
<SheetComponent
sheetType="strategy"
dataCfg={s2DataConfig}
options={s2Options}
/>
)
}

配置解释

S2DataConfig 配置

1. 数据源:MultiData 配置项,一个单元格对应多条数据,分为原始数据和格式化数据

const data = {
"measure-a": {
values: ["1", "2"],
originalValues: [1, 2]
}
}

2. 行头层级结构:自定义层级结构

const fields = {
rows: [
{
key: 'a-1',
title: '节点 1',
children: []
}
]
}

3. 虚拟列:趋势分析表存在同环比指标时,会通过虚拟列来显示对应的同环比指标名称,此时,表格会显示两级列头

import { EXTRA_COLUMN_FIELD } from '@antv/s2'
const fields = {
columns: ['date', EXTRA_COLUMN_FIELD]
}
preview

提示

虚拟例和普通字段一样,可以 自定义格式化

const s2DataConfig = {
meta: [
// 日期列头 格式化
{
field: 'date',
name: '时间',
formatter: (value) => `${value}年`,
},
// 同环比名称(虚拟列头) 格式化
{
field: EXTRA_COLUMN_FIELD,
formatter: (value, data, meta) => {
console.log(data, meta);
return meta?.colIndex === 0 ? '自定义标题' : value;
},
},
],
};

注意

  • 如果不涉及到原始数据复制导出类需求,可不声明 originalValues
  • 当只有单指标,(即没有同环比) 时,可不配置虚拟列 (EXTRA_COLUMN_FIELD)
  • 列头指标顺序和单元格指标展示顺序一一对应

S2Options 配置

提示

  • 趋势分析表会将行头布局强制置为树状模式,并且数值置于行头,即 hierarchyType: 'tree'.
  • 可通过 s2Options.cornerText 自定义角头文本。
  • 染色逻辑配置可以在 options.conditions 中配置,不需要指定 field 参数,用法参考 字段标记 目前暂时只支持文本颜色通道

CustomTreeNode

功能描述:自定义树状结构的配置,适用于透视表和明细表的自定义行列头。查看 文档 和 示例

参数说明类型默认值必选
field当前节点唯一标识string✓
title当前节点展示名string✓
collapsed节点是否收起(树状模式下,行头非叶子节点有效)booleanfalse
description节点的额外描述信息,在对应行头的 tooltip 中展示string
children子节点CustomTreeNode[]
CustomHeaderField
type CustomHeaderField = CustomTreeNode | string;

Tooltip

提示

趋势分析表的 Tooltip, 使用 S2 提供的 自定义能力 分别对 行头 (rowCell), 列头 (colCell), 数值 (dataCell) 进行了 定制.

配置项名称说明类型默认值必选
cell当前单元格S2CellType✓
defaultTooltipShowOptions默认 tooltip 展示配置TooltipShowOptions<ReactNode>
label标题ReactNode | (cell: S2CellType, defaultLabel: ReactNode) => ReactNode
showOriginalValue是否显示原始数值 (如有)booleanfalse

也可以从 @antv/s2-react 包中引入单独使用,可以根据你自己的业务进行二次封装。

import { StrategySheetRowTooltip, StrategySheetColTooltip, StrategySheetDataTooltip } from '@antv/s2-react'
const s2Options = {
tooltip: {
content: (cell) => <StrategySheetDataTooltip cell={cell} label={label} />
}
}
preview

1. 自定义标题

默认使用行头节点名字作为 Tooltip 标题,可通过 label 自定义内容的方式

// 字符串
<StrategySheetDataTooltip cell={cell} label={"自定义标题"}/>
// 自定义组件
<StrategySheetDataTooltip cell={cell} label={(cell, defaultLabel) => `${defaultLabel}(自定义标题`} />
preview

2. 显示原始数据

开启 showOriginalValue 后,会读取当前 Tooltip 对应的 originalValues 数据(如有), 将原始数据一同展示,即 展示值(原始值)

<StrategySheetDataTooltip cell={cell} showOriginalValue />
preview

3. 渲染同环比额外节点

可以通过 renderDerivedValue 在自定义同环比数值,比如替换成原始值

  • currentValue: 当前值
  • originalValue: 原始值
  • cell: 当前 Tooltip 对应的单元格信息
<StrategySheetDataTooltip
cell={cell}
renderDerivedValue={(currentValue, originalValue, cell) => <span>({originalValue})</span> }
/>
preview

配置 mini 图

在指标趋势分析场景下,通常我们希望看到数据的全局走势。走势分析不仅需要包含具体的涨跌,最好还能展示出固定时间段内的趋势图,或者指标的完成情况(进度),所以我们在表格里提供了 mini 图的绘制。为了减少对外部组件库的依赖,我们内置了一个十分轻量的,基于 @antv/g 绘制的 mini 图库,以极小的性能开销在单元格内绘制出子弹图、折线图以及柱状图, 具体请查看 单元格内绘制图表 章节。

如果想要更换 mini 图样式配置,可以参考 主题配置

在普通透视表中使用

如果不依赖 React, 想在 @antv/s2 普通的透视表中使用 mini 图,可以参考这个 示例

API

功能描述:在单元格内绘制 mini 图(支持 折线图、子弹图、柱状图). 查看 文档 和 示例

BaseChartData

功能描述:内置折线图、柱状图数据配置项,数据格式参考 G2

参数说明类型必选默认值
typemini 图类型line | bar✓
encode编码方式,声明 x 位置通道或 y 位置通道绑定的对应的列数据{x: string; y: string}✓
data原始数据Data[]✓
[key: string]其他透传字段,用于自定义单元格的定制化展示unknown

BulletValue

功能描述:内置子弹图数据配置项

参数说明类型必选默认值
typemini 图类型bullet✓bullet
measure当前指标number | string✓
target目标值number | string✓
[key: string]其他透传字段,用于自定义单元格的定制化展示unknown

数据导出

查看 文档 和 示例