S2

@antv/s2-react @antv/s2-vue

S2 提供 维度下钻 的基础能力，@antv/s2-react 和 @antv/s2-vue 基于 @antv/s2 封装了 维度下钻 的组件，可以为你挖掘不同维度下更详细的数据，让你的数据洞察变得更清晰，也可以通过下钻的方式实现数据按需渲染。

简介

基本概念

主要适用于存在分层关系的数据源，对于某一个数据信息，向下钻取不同层级的数据表现。🌰 例如：查看不同区域的销售数据，您查看华中区销售额时，可以下钻查看湖北省的销售额。
下钻是由汇总数据深入到细节，层层深入以便更详细的查看数据的方式，让数据更加清晰明了，帮助充分挖掘数据背后的价值。

功能描述

配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻。

拓展

向上钻取：存在向上钻取，查看不同区域的销售数据，您查看浙江省销售额时，可以上钻查看华东区的销售额。

示例

点击查看 PartDrillDown 维度下钻配置

import { DrillDown } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css';

const sex = ['男', '女'];

const PartDrillDown = {
  render: (props) => <DrillDown {...props}/>,
  drillConfig: {
    // 个性化配置 （可选）
    title: '下钻',
    clearText: '还原',
    searchText: '搜素',
    // 下钻数据源配置
    dataSet: [
      {
        name: '客户性别',
        value: 'sex',
        type: 'text',
      },
    ],
  },
  // 点击下钻后的回调
  fetchData: (meta, drillFields) =>
    new Promise((resolve) => {
      const dataSet = meta.spreadsheet.dataSet;
      const field = drillFields[0];
      const rowData = dataSet.getCellMultiData({ query: meta.query });
      const drillDownData = [];

      rowData.forEach((data) => {
        const { city, number, province, sub_type: subType, type } = data;
        const number0 = Math.ceil(Math.random() * (number - 50)) + 50;
        const number1 = number - number0;
        const dataItem0 = {
          city,
          number: number0,
          province,
          sub_type: subType,
          type,
          [field]: sex[0],
        };
        drillDownData.push(dataItem0);
        const dataItem1 = {
          city,
          number: number1,
          province,
          sub_type: subType,
          type,
          [field]: sex[1],
        };

        drillDownData.push(dataItem1);
      });

      resolve({
        drillField: field, // 下钻维度 value 值
        drillData: drillDownData, // 下钻数据
      });
    }),
};

import React from 'react';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';

const s2Options = {
  hierarchyType: 'tree', // 树形结构
};

const App = () => {
  return (
    <SheetComponent
      dataCfg={s2DataConfig}
      options={s2Options}
      partDrillDown={PartDrillDown}
    />
  )
}

单独使用下钻面板

import { DrillDown } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css';

function App() {
  return (
    <DrillDown
      dataSet={dataSet}
      disabledFields={disabledFields}
      clearText={clearText}
    />
  )
}

使用场景

🌰 案例

洞察数据异常：当销售负责人发现华中地区销售异常，远低于其他地区时。他通过下钻省份，查看华中地区所有省份的销售额。当发现湖北省销售异常时，由可以通过省份下钻到城市🏙，发现城市 B 销售额异常。通过下钻，我们快速的挖掘到了销售额异常的根源。

API

注意

维度下钻功能需要满足以下两个前置条件：

透视表: 即 sheetType="pivot"
树状模式: 即 hierarchyType="tree"

React 下钻组件 @antv/s2-react @antv/s2-react-components

查看示例

import { DrillDown } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css'

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree'
};

<SheetComponent
  sheetType="pivot"
  options={s2Options}
  partDrillDown={{
    render: (props) => <DrillDown {...props} />,
    ...PartDrillDown
  }}
/>

Vue 下钻组件 @antv/s2-vue

查看示例

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree'
};

<template>
  <SheetComponent
    ref="s2"
    :sheetType="pivot"
    :partDrillDown="partDrillDown"
    :options="s2Options"
  />
</template>

公共 API

功能描述：配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻

PartDrillDown

类型：object，可选，默认值：{}

参数	说明	类型	默认值	必选	备注	版本
drillConfig	下钻菜单组件配置项	DrillDownProps	-	✓
drillItemsNum	下钻完成后展示的个数，默认全部展示	`number`	-1
fetchData	点击下钻后的回调	FetchCallBack	-	✓
clearDrillDown	清除下钻信息，当有指定的 rowId 传递时清除对应 rowId 的下钻信息；如果参数是空对象 {}，则清空所有的下钻信息	`{rowId: string;}`	-		仅 `React` 组件支持此属性
displayCondition	配置下钻 `icon` 的展示条件，同 HeaderActionIcon	`(meta: Node, iconName: string) => boolean`	-		仅 `React` 组件支持此属性	`1.26.0` 回传 `iconName` 并按单个 icon 控制显隐

注意：PartDrillDown 中 drillConfig、displayCondition 字段会影响下钻模式的重渲，请注意使用 memo 或 state 控制其可变性。

FetchCallBack

(meta: Node, drillFields: string[]) => Promise<PartDrillDownInfo>

功能描述：点击下钻后的回调参数：PartDrillDownInfo

PartDrillDownInfo

功能描述：下钻数据请求参数配置

参数	说明	类型	必选	默认值
drillData	下钻的数据	`Record<string, string \| number>[]`	✓
drillField	下钻维度 value 值	`string`	✓

DrillDownProps

功能描述：下钻菜单组件配置项

参数	说明	类型	必选	备注
dataSet	下钻数据源配置	DataSet[]	✓
className	透传样式名	`string`
title	标题	`React.ReactNode`
searchText	搜索框文案	`string`
clearText	重置按钮文案	`React.ReactNode`
disabledFields	不允许下钻的维度	`string[]`
getDrillFields	内部获取当前下钻维度的回调	`Function`
setDrillFields	内部设置当前下钻维度的回调	`Function`
extra	自定义插入的节点，插入在搜索框和下钻菜单中间	`ReactNode`		仅 `React` 组件支持此属性
drillFields	允许下钻的维度	`string[]`		仅 `React` 组件支持此属性
renderMenu	自定义下钻组件	`(props: MenuProps) => ReactNode`		仅 `React` 组件支持此属性

DataSet

功能描述：下钻数据源配置

参数	说明	类型	必选
name	展示名字	`string`	✓
value	具体值	`string`	✓
type	维度类型，不同类型对应 icon 不同	`text` \| `location` \| `date`
disabled	是否允许选择	`boolean`
icon	列表 item 的 icon	`ReactNode`

@antv/s2-react @antv/s2-vue

简介

基本概念

主要适用于存在分层关系的数据源，对于某一个数据信息，向下钻取不同层级的数据表现。🌰 例如：查看不同区域的销售数据，您查看华中区销售额时，可以下钻查看湖北省的销售额。
下钻是由汇总数据深入到细节，层层深入以便更详细的查看数据的方式，让数据更加清晰明了，帮助充分挖掘数据背后的价值。

功能描述

配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻。

拓展

向上钻取：存在向上钻取，查看不同区域的销售数据，您查看浙江省销售额时，可以上钻查看华东区的销售额。

示例

点击查看 PartDrillDown 维度下钻配置

import { DrillDown } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css';

const sex = ['男', '女'];

const PartDrillDown = {
  render: (props) => <DrillDown {...props}/>,
  drillConfig: {
    // 个性化配置 （可选）
    title: '下钻',
    clearText: '还原',
    searchText: '搜素',
    // 下钻数据源配置
    dataSet: [
      {
        name: '客户性别',
        value: 'sex',
        type: 'text',
      },
    ],
  },
  // 点击下钻后的回调
  fetchData: (meta, drillFields) =>
    new Promise((resolve) => {
      const dataSet = meta.spreadsheet.dataSet;
      const field = drillFields[0];
      const rowData = dataSet.getCellMultiData({ query: meta.query });
      const drillDownData = [];

      rowData.forEach((data) => {
        const { city, number, province, sub_type: subType, type } = data;
        const number0 = Math.ceil(Math.random() * (number - 50)) + 50;
        const number1 = number - number0;
        const dataItem0 = {
          city,
          number: number0,
          province,
          sub_type: subType,
          type,
          [field]: sex[0],
        };
        drillDownData.push(dataItem0);
        const dataItem1 = {
          city,
          number: number1,
          province,
          sub_type: subType,
          type,
          [field]: sex[1],
        };

        drillDownData.push(dataItem1);
      });

      resolve({
        drillField: field, // 下钻维度 value 值
        drillData: drillDownData, // 下钻数据
      });
    }),
};

import React from 'react';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';

const s2Options = {
  hierarchyType: 'tree', // 树形结构
};

const App = () => {
  return (
    <SheetComponent
      dataCfg={s2DataConfig}
      options={s2Options}
      partDrillDown={PartDrillDown}
    />
  )
}

单独使用下钻面板

import { DrillDown } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css';

function App() {
  return (
    <DrillDown
      dataSet={dataSet}
      disabledFields={disabledFields}
      clearText={clearText}
    />
  )
}

使用场景

🌰 案例

API

注意

维度下钻功能需要满足以下两个前置条件：

透视表: 即 sheetType="pivot"
树状模式: 即 hierarchyType="tree"

React 下钻组件 @antv/s2-react @antv/s2-react-components

查看示例

import { DrillDown } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css'

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree'
};

<SheetComponent
  sheetType="pivot"
  options={s2Options}
  partDrillDown={{
    render: (props) => <DrillDown {...props} />,
    ...PartDrillDown
  }}
/>

Vue 下钻组件 @antv/s2-vue

查看示例

const s2Options = {
  width: 600,
  height: 480,
  hierarchyType: 'tree'
};

<template>
  <SheetComponent
    ref="s2"
    :sheetType="pivot"
    :partDrillDown="partDrillDown"
    :options="s2Options"
  />
</template>

公共 API

功能描述：配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻

PartDrillDown

类型：object，可选，默认值：{}

参数	说明	类型	默认值	必选	备注	版本
drillConfig	下钻菜单组件配置项	DrillDownProps	-	✓
drillItemsNum	下钻完成后展示的个数，默认全部展示	`number`	-1
fetchData	点击下钻后的回调	FetchCallBack	-	✓
clearDrillDown	清除下钻信息，当有指定的 rowId 传递时清除对应 rowId 的下钻信息；如果参数是空对象 {}，则清空所有的下钻信息	`{rowId: string;}`	-		仅 `React` 组件支持此属性
displayCondition	配置下钻 `icon` 的展示条件，同 HeaderActionIcon	`(meta: Node, iconName: string) => boolean`	-		仅 `React` 组件支持此属性	`1.26.0` 回传 `iconName` 并按单个 icon 控制显隐

注意：PartDrillDown 中 drillConfig、displayCondition 字段会影响下钻模式的重渲，请注意使用 memo 或 state 控制其可变性。

FetchCallBack

(meta: Node, drillFields: string[]) => Promise<PartDrillDownInfo>

功能描述：点击下钻后的回调参数：PartDrillDownInfo

PartDrillDownInfo

功能描述：下钻数据请求参数配置

参数	说明	类型	必选	默认值
drillData	下钻的数据	`Record<string, string \| number>[]`	✓
drillField	下钻维度 value 值	`string`	✓

DrillDownProps

功能描述：下钻菜单组件配置项

参数	说明	类型	必选	备注
dataSet	下钻数据源配置	DataSet[]	✓
className	透传样式名	`string`
title	标题	`React.ReactNode`
searchText	搜索框文案	`string`
clearText	重置按钮文案	`React.ReactNode`
disabledFields	不允许下钻的维度	`string[]`
getDrillFields	内部获取当前下钻维度的回调	`Function`
setDrillFields	内部设置当前下钻维度的回调	`Function`
extra	自定义插入的节点，插入在搜索框和下钻菜单中间	`ReactNode`		仅 `React` 组件支持此属性
drillFields	允许下钻的维度	`string[]`		仅 `React` 组件支持此属性
renderMenu	自定义下钻组件	`(props: MenuProps) => ReactNode`		仅 `React` 组件支持此属性

DataSet

功能描述：下钻数据源配置

参数	说明	类型	必选
name	展示名字	`string`	✓
value	具体值	`string`	✓
type	维度类型，不同类型对应 icon 不同	`text` \| `location` \| `date`
disabled	是否允许选择	`boolean`
icon	列表 item 的 icon	`ReactNode`