/antv.s2.vue3.demo

antv.s2.vue3.demo

Primary LanguageVue

开发工具

VS Code

脚手架工具

pnpm

UI 相关框架

  • vue3
  • vite
  • @antv/s2
  • ant-design-vue
  • @ant-design/icons-vue
  • @antv/s2-vue

创建项目

pnpm create vite

中间过程按步骤选择

安装依赖包

使用 VS Code 打开项目文件夹后，打开一个终端，如下图

pnpm install
 pnpm install @antv/s2
pnpm i --save ant-design-vue
pnpm i --save @ant-design/icons-vue
pnpm install @antv/s2-vue

:::warning 注意:在 vite4+vue3 创建的项目里,还需要添加以下的包才能正常运行

  • @antv/s2
  • ant-design-vue
  • @ant-design/icons-vue :::

使用

组件配置

<script lang="ts">
import type { S2DataConfig, S2Options } from "@antv/s2";
import { SheetComponent } from "@antv/s2-vue";
import { defineComponent, onMounted, reactive, shallowRef } from "vue";
import "@antv/s2-vue/dist/style.min.css";

const s2DataConfig = {
  fields: {
    rows: ["province", "city"],
    columns: ["type", "sub_type"],
    values: ["number"],
  },
  meta: [
    {
      field: "number",
      name: "数量",
    },
    {
      field: "province",
      name: "省份",
    },
    {
      field: "city",
      name: "城市",
    },
    {
      field: "type",
      name: "类别",
    },
    {
      field: "sub_type",
      name: "子类别",
    },
  ],
  data: [
    {
      number: 7789,
      province: "浙江省",
      city: "杭州市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 2367,
      province: "浙江省",
      city: "绍兴市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 3877,
      province: "浙江省",
      city: "宁波市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 4342,
      province: "浙江省",
      city: "舟山市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 5343,
      province: "浙江省",
      city: "杭州市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 632,
      province: "浙江省",
      city: "绍兴市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 7234,
      province: "浙江省",
      city: "宁波市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 834,
      province: "浙江省",
      city: "舟山市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 945,
      province: "浙江省",
      city: "杭州市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1304,
      province: "浙江省",
      city: "绍兴市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1145,
      province: "浙江省",
      city: "宁波市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1432,
      province: "浙江省",
      city: "舟山市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1343,
      province: "浙江省",
      city: "杭州市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1354,
      province: "浙江省",
      city: "绍兴市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1523,
      province: "浙江省",
      city: "宁波市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1634,
      province: "浙江省",
      city: "舟山市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1723,
      province: "四川省",
      city: "成都市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 1822,
      province: "四川省",
      city: "绵阳市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 1943,
      province: "四川省",
      city: "南充市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 2330,
      province: "四川省",
      city: "乐山市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 2451,
      province: "四川省",
      city: "成都市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2244,
      province: "四川省",
      city: "绵阳市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2333,
      province: "四川省",
      city: "南充市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2445,
      province: "四川省",
      city: "乐山市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2335,
      province: "四川省",
      city: "成都市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 245,
      province: "四川省",
      city: "绵阳市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 2457,
      province: "四川省",
      city: "南充市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 2458,
      province: "四川省",
      city: "乐山市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 4004,
      province: "四川省",
      city: "成都市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 3077,
      province: "四川省",
      city: "绵阳市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 3551,
      province: "四川省",
      city: "南充市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 352,
      province: "四川省",
      city: "乐山市",
      type: "办公用品",
      sub_type: "纸张",
    },
  ],
};

const rawOptions: S2Options = {
  width: 980,
  height: 680,
};

export default defineComponent({
  setup() {
    const s2 = shallowRef();
    // dataCfg 数据字段较多，建议使用 shallow, 如果有数据更改直接替换整个对象
    const dataCfg = shallowRef(s2DataConfig);
    const options: S2Options = reactive(rawOptions);

    onMounted(() => {
      console.log("s2 instance:", s2.value?.instance);
    });
    return {
      s2,
      dataCfg,
      options,
    };
  },

  components: {
    SheetComponent,
  },
});
</script>

<template>
  <SheetComponent ref="s2" :dataCfg="dataCfg" :options="options" />
</template>

测试数据

const s2DataConfig = {
  fields: {
    rows: ["province", "city"],
    columns: ["type", "sub_type"],
    values: ["number"],
  },
  meta: [
    {
      field: "number",
      name: "数量",
    },
    {
      field: "province",
      name: "省份",
    },
    {
      field: "city",
      name: "城市",
    },
    {
      field: "type",
      name: "类别",
    },
    {
      field: "sub_type",
      name: "子类别",
    },
  ],
  data: [
    {
      number: 7789,
      province: "浙江省",
      city: "杭州市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 2367,
      province: "浙江省",
      city: "绍兴市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 3877,
      province: "浙江省",
      city: "宁波市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 4342,
      province: "浙江省",
      city: "舟山市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 5343,
      province: "浙江省",
      city: "杭州市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 632,
      province: "浙江省",
      city: "绍兴市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 7234,
      province: "浙江省",
      city: "宁波市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 834,
      province: "浙江省",
      city: "舟山市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 945,
      province: "浙江省",
      city: "杭州市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1304,
      province: "浙江省",
      city: "绍兴市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1145,
      province: "浙江省",
      city: "宁波市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1432,
      province: "浙江省",
      city: "舟山市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 1343,
      province: "浙江省",
      city: "杭州市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1354,
      province: "浙江省",
      city: "绍兴市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1523,
      province: "浙江省",
      city: "宁波市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1634,
      province: "浙江省",
      city: "舟山市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 1723,
      province: "四川省",
      city: "成都市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 1822,
      province: "四川省",
      city: "绵阳市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 1943,
      province: "四川省",
      city: "南充市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 2330,
      province: "四川省",
      city: "乐山市",
      type: "家具",
      sub_type: "桌子",
    },
    {
      number: 2451,
      province: "四川省",
      city: "成都市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2244,
      province: "四川省",
      city: "绵阳市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2333,
      province: "四川省",
      city: "南充市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2445,
      province: "四川省",
      city: "乐山市",
      type: "家具",
      sub_type: "沙发",
    },
    {
      number: 2335,
      province: "四川省",
      city: "成都市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 245,
      province: "四川省",
      city: "绵阳市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 2457,
      province: "四川省",
      city: "南充市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 2458,
      province: "四川省",
      city: "乐山市",
      type: "办公用品",
      sub_type: "笔",
    },
    {
      number: 4004,
      province: "四川省",
      city: "成都市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 3077,
      province: "四川省",
      city: "绵阳市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 3551,
      province: "四川省",
      city: "南充市",
      type: "办公用品",
      sub_type: "纸张",
    },
    {
      number: 352,
      province: "四川省",
      city: "乐山市",
      type: "办公用品",
      sub_type: "纸张",
    },
  ],
};

渲染

<script setup lang="ts">
//import HelloWorld from './components/HelloWorld.vue';

import TestS2Demo from "./components/TestS2Demo.vue";
</script>

<template>
  <TestS2Demo />
</template>

<style scoped></style>

运行

1676256883792.png