S2

提示

阅读本章前，请确保已经对 S2 足够了解，并且熟悉 AntV/G 渲染引擎的相关内容。

如果纯文本的表格不够直观，S2 内置了简单的 mini 图绘制。

数据格式

将普通数值替换成 { values: G2 图表数据 (Spec) }

{
-  number: string
+  number: {
+    values: { ...G2 Spec }
+  }
}

const s2DataConfig = {
  data: [
    {
-     number: 123,
+     number: {
+        values: {
+          type: 'line',
+          data: [
+            {
+              year: '2017',
+             value: -368,
+            },
+         ],
+          encode: { x: 'year', y: 'value' },
+        }
+      },
    }
  ]
}

1. 绘制 mini 图表

S2 内置了几种简单的 mini 图形的绘制，无需依赖 G2 等专业图表库，适用于简单的展示场景。

1.1 数据准备

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type', 'sub_type'],
    values: ['number'],
  },
  data: [
    // 用于绘制 mini 图的数据
    {
      province: '海南省',
      city: '三亚市',
      type: '家具',
      sub_type: '桌子',
      number: {
        // 折线图
        values: {
          type: 'line',
          data: [
            {
              year: '2017',
              value: -368,
            },
            {
              year: '2018',
              value: 368,
            },
            {
              year: '2019',
              value: 368,
            },
            {
              year: '2020',
              value: 368,
            },
            {
              year: '2021',
              value: 268,
            },
            {
              year: '2022',
              value: 168,
            },
          ],
          encode: { x: 'year', y: 'value' },
        },
      },
    },
    {
      province: '海南省',
      city: '三亚市',
      type: '家具',
      sub_type: '沙发',
      number: {
        // 柱状图
        values: {
          type: 'bar',
          data: [
            {
              year: '2017',
              value: -368,
            },
            {
              year: '2018',
              value: 328,
            },
            {
              year: '2019',
              value: 38,
            },
            {
              year: '2020',
              value: 168,
            },
            {
              year: '2021',
              value: 268,
            },
            {
              year: '2022',
              value: 368,
            },
          ],
          encode: { x: 'year', y: 'value' },
        },
      },
    },
    {
      province: '海南省',
      city: '三亚市',
      type: '办公用品',
      sub_type: '笔',
      number: {
        // 多列文本
        values: [
          [3877, -4324, '42%'],
          [3877, 4324, '-42%'],
        ],
      },
    },
    {
      province: '海南省',
      city: '三亚市',
      type: '办公用品',
      sub_type: '纸张',
      number: {
        // 子弹图
        values: {
          type: 'bullet',
          measure: 0.3,
          target: 0.76,
        },
      },
    },
  ],
};

1.2 自定义单元格

自定义 DataCell, 然后使用 drawCustomContent 接管绘制逻辑

import { DataCell, drawCustomContent } from '@antv/s2';

class CustomDataCell extends DataCell {
  drawTextShape() {
    // 当数值为对象时，完全接管绘制，使用内置的 `drawCustomContent` 根据不同的数据结构 （见下方） 绘制不同的图形
    if (this.isMultiData()) {
      drawCustomContent(this);
      return;
    }

    // 如果是普通文本，则走默认的文本绘制逻辑
    super.drawTextShape();
  }
}

const s2Options = {
  dataCell: (viewMeta, spreadsheet) => {
    return new CustomDataCell(viewMeta, spreadsheet);
  },
};

1.3 图表类型

提示

S2 内置了一些基于 AntV/G 简单的图形绘制能力，适用于轻量简单使用，不希望有额外依赖的场景。

line: 折线图
bar: 柱状图
bullet: 子弹图

{
  number: {
    values: {
      measure: 0.3,
      target: 0.76,
    }
  }
}

多列文本

{
  number: {
  values: [
    [3877, -4324, '42%'],
    [3877, 4324, '-42%'],
  ]
}

1.4 效果

查看示例

1.5 数据格式

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

BaseChartData

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

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

BulletValue

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

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

迷你图表

提示