antV + vue3 数据字段解析

基础实现再我得上一篇，不太明白的小伙伴可以去看看

1.首先来说表格的数据，经过我使用发现，基本上每个表格数据都会有'fields', 'meta', 'data'三个字段

2.我们先来说'fields' 字段

  "fields": {
    "rows": ["type", "job"],
    "columns": ["age", "city"],
    "values": ["people-group-a", "people-group-b", "people-group-delta"]
  },

基本上每个表格的fields里都有'rows', 'cloumns', 'values'三个字段，'rows', 'cloumns',存放的是行头和列头的字段，'values'存放的数据单元格的字段

3.然后就是'meta'字段，'meta'字段里有'field', 'name'两个字段

  "meta": [
    {
      "field": "type",
      "name": "类别"
    }
  ],

可以看到他是一个对象数组，'field'是字段， 'name'则是字段名称

4.最后就是data字段了，也就是我们的数据字段，antV下有很多data示例，我们在这里就简单所说（S2多维交叉分析表格 2.0, S2 Nexthttps://s2.antv.antgroup.com/examples）

"data": [
    {
      "type": "有信用卡",
      "job": "白领",
      "age": "20岁以下",
      "city": "一二线城市",
      "people-group-a": 99.56,
      "people-group-b": 96,
      "people-group-delta": 76.32
    }
]

data是一存放数据的字段，里面是数据的value和label(name), 它会自动去匹配我们设置的'fields', 和'meat', 其中'fields'中的'values'控制着展现哪些字段

上一篇基础实现（antV + VUE3 基础实现-CSDN博客）