S2

S2 默认提供 行列等宽, 列等宽, 紧凑 三种布局方式，也可以拖拽行/列头的单元格进行行列宽高动态调整.

基本使用

可配置 resize 控制需要开启的单元格宽高调整热区范围，分为 角头，行头，列头 三个部分，默认为全部开启。可以通过设置 boolean 类型值快捷开启或关闭所有 resize 热区，也可以通过对象类型配置各个区域的热区开启或关闭。查看示例

提示

调整宽高时，会关闭 tooltip 避免遮挡，但是交互状态会保留（如选中）.

const s2Options = {
  interaction: {
    resize: true
  },
};

// 等价于
// const s2Options = {
//   interaction: {
//     resize: {
//       rowCellVertical: true,
//       cornerCellHorizontal: true,
//       colCellHorizontal: true,
//       colCellVertical: true
//     }
//   },
// };

热区控制

支持配置 rowCellVertical, cornerCellHorizontal, colCellHorizontal, colCellVertical 来便捷的控制区域热区控制。

rowCellVertical（行头垂直方向） - 针对行头叶子节点
cornerCellHorizontal \|（角头水平方向） - 针对角头 CornerNodeType 为 Series 和 Row
colCellHorizontal \|（列头水平方向） - 针对列头叶子节点
colCellVertical \|（列头垂直方向） - 针对列头各层级节点

除此之外，还支持 resize.visible 动态控制热区是否展示。查看示例

例：只有叶子节点才显示 resize 热区：

const s2Options = {
  interaction: {
    resize: {
      visible: (cell) => {
        const meta = cell.getMeta();
        return meta.isLeaf
      }
    }
  },
};

例：只有某一个单元格显示 resize 热区：

const s2Options = {
  interaction: {
    resize: {
      visible: (cell) => {
        const meta = cell.getMeta();
        return meta.id === 'root[&]家具[&]桌子[&]number'
      }
    }
  },
};

拖拽禁用

配置 resize.disable，用于控制热区的自定义拖拽校验逻辑。查看示例

例：不允许调小单元格宽度：

const s2Options = {
  interaction: {
    resize: {
      disable: (resizeInfo) => resizeInfo.resizedWidth <= resizeInfo.width;
    }
  },
};

拖拽影响范围

默认宽高调整只作用于当前单元格，可以通过 rowResizeType, colResizeType 配置拖拽后是影响所有行（列）, 还是当前行（列）。

all: 对应单元格维度 { city: 20, type: 100 }
current 对应单元格 ID { 'root[&]杭州市': 20, 'root[&]类别': 100 }
selected 对应当前选中的单元格 ID { 'root[&]杭州市': 20, 'root[&]成都市': 100 }

const s2Options = {
  interaction: {
    resize: {
      // 行高调整时，影响全部行
      rowResizeType: 'all', // 'all' | 'current' | 'selected'
      // 列宽调整时，只影响当前列
      colResizeType: 'current',
    }
  },
};

resizeType: 'all'
resizeType: 'current'
resizeType: 'selected'

最小可拖拽宽高

const s2Options = {
  interaction: {
    resize: {
      // 单元格可拖拽最小宽度
      minCellWidth: 40,
      // 单元格可拖拽最小高度
      minCellHeight: 20
    }
  },
};

主题配置

支持通过调整主题修改热区大小/颜色，参考线颜色/间隔等配置，具体请查看主题配置章节。

s2.setTheme({
  resizeArea: {
    // 热区大小
    size: 2,
    // 热区背景色
    background: '#396',
    // 热区背景色透明度
    backgroundOpacity: 0,
    // 拖拽参考线颜色
    guideLineColor: '#396',
    // 拖拽参考线禁用颜色
    guideLineDisableColor: 'rgba(0,0,0,0.25)',
    //  参考线间隔
    guideLineDash: [1, 6]
  },
});

获取拖拽后的单元格宽高信息

单元格宽高调整后，可以通过监听 S2Event.LAYOUT_RESIZE 事件来获取。

import { S2Event } from '@antv/s2'
import { merge } from 'lodash';

s2.on(S2Event.LAYOUT_RESIZE, (data) => {
  console.log('data:', data);

  // 持久化
  const lastStyle = JSON.parse(localStorage.getItem('style')) || {};
  const style = merge({}, lastStyle, data.style);

  localStorage.setItem('style', JSON.stringify(style));
});

如需持久化保存宽高信息，那么和自定义单元格宽高使用方式一致，更新相应的 style 即可。

const style = JSON.parse(localStorage.getItem('style')) || {}

const s2Options = {
  style
}

// 或
s2.setOptions({ style })

S2 默认提供 行列等宽, 列等宽, 紧凑 三种布局方式，也可以拖拽行/列头的单元格进行行列宽高动态调整.

基本使用

提示

调整宽高时，会关闭 tooltip 避免遮挡，但是交互状态会保留（如选中）.

const s2Options = {
  interaction: {
    resize: true
  },
};

// 等价于
// const s2Options = {
//   interaction: {
//     resize: {
//       rowCellVertical: true,
//       cornerCellHorizontal: true,
//       colCellHorizontal: true,
//       colCellVertical: true
//     }
//   },
// };

热区控制

支持配置 rowCellVertical, cornerCellHorizontal, colCellHorizontal, colCellVertical 来便捷的控制区域热区控制。

rowCellVertical（行头垂直方向） - 针对行头叶子节点
cornerCellHorizontal \|（角头水平方向） - 针对角头 CornerNodeType 为 Series 和 Row
colCellHorizontal \|（列头水平方向） - 针对列头叶子节点
colCellVertical \|（列头垂直方向） - 针对列头各层级节点

除此之外，还支持 resize.visible 动态控制热区是否展示。查看示例

例：只有叶子节点才显示 resize 热区：

const s2Options = {
  interaction: {
    resize: {
      visible: (cell) => {
        const meta = cell.getMeta();
        return meta.isLeaf
      }
    }
  },
};

例：只有某一个单元格显示 resize 热区：

const s2Options = {
  interaction: {
    resize: {
      visible: (cell) => {
        const meta = cell.getMeta();
        return meta.id === 'root[&]家具[&]桌子[&]number'
      }
    }
  },
};

拖拽禁用

配置 resize.disable，用于控制热区的自定义拖拽校验逻辑。查看示例

例：不允许调小单元格宽度：

const s2Options = {
  interaction: {
    resize: {
      disable: (resizeInfo) => resizeInfo.resizedWidth <= resizeInfo.width;
    }
  },
};

拖拽影响范围

默认宽高调整只作用于当前单元格，可以通过 rowResizeType, colResizeType 配置拖拽后是影响所有行（列）, 还是当前行（列）。

all: 对应单元格维度 { city: 20, type: 100 }
current 对应单元格 ID { 'root[&]杭州市': 20, 'root[&]类别': 100 }
selected 对应当前选中的单元格 ID { 'root[&]杭州市': 20, 'root[&]成都市': 100 }

const s2Options = {
  interaction: {
    resize: {
      // 行高调整时，影响全部行
      rowResizeType: 'all', // 'all' | 'current' | 'selected'
      // 列宽调整时，只影响当前列
      colResizeType: 'current',
    }
  },
};

resizeType: 'all'
resizeType: 'current'
resizeType: 'selected'

最小可拖拽宽高

const s2Options = {
  interaction: {
    resize: {
      // 单元格可拖拽最小宽度
      minCellWidth: 40,
      // 单元格可拖拽最小高度
      minCellHeight: 20
    }
  },
};

主题配置

支持通过调整主题修改热区大小/颜色，参考线颜色/间隔等配置，具体请查看主题配置章节。

s2.setTheme({
  resizeArea: {
    // 热区大小
    size: 2,
    // 热区背景色
    background: '#396',
    // 热区背景色透明度
    backgroundOpacity: 0,
    // 拖拽参考线颜色
    guideLineColor: '#396',
    // 拖拽参考线禁用颜色
    guideLineDisableColor: 'rgba(0,0,0,0.25)',
    //  参考线间隔
    guideLineDash: [1, 6]
  },
});

获取拖拽后的单元格宽高信息

单元格宽高调整后，可以通过监听 S2Event.LAYOUT_RESIZE 事件来获取。

import { S2Event } from '@antv/s2'
import { merge } from 'lodash';

s2.on(S2Event.LAYOUT_RESIZE, (data) => {
  console.log('data:', data);

  // 持久化
  const lastStyle = JSON.parse(localStorage.getItem('style')) || {};
  const style = merge({}, lastStyle, data.style);

  localStorage.setItem('style', JSON.stringify(style));
});

如需持久化保存宽高信息，那么和自定义单元格宽高使用方式一致，更新相应的 style 即可。

const style = JSON.parse(localStorage.getItem('style')) || {}

const s2Options = {
  style
}

// 或
s2.setOptions({ style })

rowCellVertical（行头垂直方向） - 针对行头叶子节点
cornerCellHorizontal \|（角头水平方向） - 针对角头 CornerNodeType 为 Series 和 Row
colCellHorizontal \|（列头水平方向） - 针对列头叶子节点
colCellVertical \|（列头垂直方向） - 针对列头各层级节点

rowCellVertical（行头垂直方向） - 针对行头叶子节点
cornerCellHorizontal \|（角头水平方向） - 针对角头 CornerNodeType 为 Series 和 Row
colCellHorizontal \|（列头水平方向） - 针对列头叶子节点
colCellVertical \|（列头垂直方向） - 针对列头各层级节点

S2

行列宽高调整

S2

行列宽高调整

基本使用

提示

热区控制

拖拽禁用

拖拽影响范围

最小可拖拽宽高

主题配置

获取拖拽后的单元格宽高信息

基本使用

提示

热区控制

拖拽禁用

拖拽影响范围

最小可拖拽宽高

主题配置

获取拖拽后的单元格宽高信息