antv踩坑记录

基本概念

行头（rowHeader）

行头的结构是由 s2DataConfig.fields.rows 决定，用于行分析维度展示。行头支持 平铺模式 (grid), 树状模式 (tree) 两种展示形态。

列头（colHeader）

列头的结构是由 s2DataConfig.fields.columns 决定，用于列分析维度展示。

角头（cornerHeader）

角头指表格的左上角部分，在表的布局中起着重要的作用。

表的布局中，S2 是以角头作为基础进行扩展，计算出行、列的尺寸和坐标。

角头也用于展示行头、列头名称，比如示例中的 省份、城市。

另外，S2 还提供了自定义扩展，用于需要自定义角头的场景，详见 cornerCell 和 cornerHeader。

数据单元格 (dataCell)

数据单元格是表格行列维度值交叉后产生的数据区域，通常情况下应该是度量值，是表数据分析最核心的数据呈现区域。

在数据单元格区域，我们可以展现基础的交叉数据，可以通过 字段标记 来辅助分析，也可以展现 同环比等衍生指标，还可以通过自定义 Hooks 来实现数据单元格自定义，更多参考 dataCell 。

框架（frame）

框架布局区域，位于其他四个区域之上，用来做区域之间的间隔框架，或者滚动条，框架间隔线的阴影等逻辑。

下载

npm install @antv/g2plot

vue中使用

<div id="container"></div>

<script>
import { PivotSheet } from '@antv/s2';

export default {
  name: '',
  components: {},
  filters: {},
  mixins: [],
  props: {},
  data() {
    return {}
  },
  mounted () {
    const container = document.getElementById('container');
    const pivotSheet = new PivotSheet(container, {
      fields: {
        rows: ['type', 'subType'],
        columns: ['province', 'city'],
        values: ['number1', 'number2'],
      },
      meta: [{
          "field": "number",
          "name": "数量"
        },{
          "field": "type",
          "name": "行1"
        },{
          "field": "subType",
          "name": "行2"
        }
      ],
      data: this.generateRawData(
        { province: 10, city: 20 },
        { type: 10, sub_type: 20 },
      ),
    }, {
      width: 600,
      height: 480,
      frozenRowHeader: false,
    });
    pivotSheet.render()
  },
  methods: {
    handleClick(e) {
      this.$emit('clickPenetrate', e)
    },
    handleDrill(e) {
      this.$emit('clickDrill', e)
    },
    generateRawData(row, col) {
      const res = [];
      const rowKeys = Object.keys(row);
      const colKeys = Object.keys(col);
      let k = 0

      for (let i = 0; i < row[rowKeys[0]]; i++) {
        for (let j = 0; j < row[rowKeys[1]]; j++) {
          for (let m = 0; m < col[colKeys[0]]; m++) {
            for (let n = 0; n < col[colKeys[1]]; n++) {
              k++;
              res.push({
                province: `p${i}`,
                city: `c${j}`,
                type: `type${m}`,
                subType: `subType${n}`,
                number1: i * n,
                number2: i * n,
              });
            }
          }
        }
      }

      console.log(k)

      return res;
    }
  }
}
</script>

数据格式

const s2DataConfig = {
  data: [],
  meta: [],
  sortParams: [],
  fields: {
    rows: [],
    columns: [],
    values: []
  }
}

Fields

功能描述： 配置表格的维度域，即对应行列维度

fields: {
  "rows": [
    "province",
    "city"
  ],
  "columns": [
    "type",
    "sub_type"
  ],
  "values": [
    "number"
  ],
  "valueInCols": true
},