@antv/s2-vue
## 📦 安装
```bash
$ pnpm add @antv/s2-vue
# yarn add @antv/s2-vue
# npm install @antv/s2-vue --save
```
## 🔨 使用
### 1. 数据准备
s2DataConfig
```ts
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: '纸张',
},
],
};
```
S2Options
```ts
const rawOptions: S2Options = {
width: 600,
height: 480,
};
```
### 2. 组件配置
```ts
// App.vue
```
### 3. 挂载节点
```html
```
### 4. 渲染
```ts
// index.ts
import { createApp } from 'vue';
import App from './App.vue';
import "@antv/s2-vue/dist/s2-vue.min.css";
createApp(App).mount('#app');
```
### 5. 结果
