funnel

漏斗图

1export const FunnelChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'funnel',
4    dataset: [
5      { date: '2022', profit: 100, sales: 100 },
6      { date: '2023', profit: 80, sales: 80 },
7      { date: '2020', profit: 60, sales: 60 },
8      { date: '2021', profit: 40, sales: 40 },
9      { date: '2019', profit: 20, sales: 20 },
10    ],
11  }
12  return <VChartRender vseed={vseed} />
13})

多度量漏斗图

1export const FunnelChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'funnel',
4    dataset: [{ profit: 10, sales: 20, profit1: 0.1 }],
5    measures: [
6      {
7        id: 'sales',
8        alias: '销售',
9      },
10      {
11        id: 'profit',
12        alias: '利润',
13      },
14      {
15        id: 'profit1',
16        alias: '回报率',
17      },
18    ],
19  }
20  return <VChartRender vseed={vseed} />
21})

组合漏斗图

1export const CombinationFunnelChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'funnel',
4    dataset: [
5      { date: '2022', profit: 100, sales: 134 },
6      { date: '2023', profit: 80, sales: 90 },
7      { date: '2020', profit: 60, sales: 70 },
8      { date: '2021', profit: 40, sales: 60 },
9      { date: '2019', profit: 20, sales: 30 },
10    ],
11    measures: [
12      { id: 'sales', alias: '销售', parentId: 'left' },
13      { id: 'profit', alias: '利润', parentId: 'right' },
14    ],
15    dimensions: [
16      {
17        id: 'date',
18        alias: '日期',
19      },
20    ],
21  }
22  return <PivotChart vseed={vseed} />
23})

透视组合漏斗图

1export const PivotFunnelChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'funnel',
4    dimensions: [
5      { id: 'category', alias: '类别' },
6      { id: 'date', alias: '日期', encoding: 'column' },
7      { id: 'region', alias: '区域', encoding: 'row' },
8    ],
9    measures: [
10      { id: 'sales', alias: '销售额', parentId: 'group-sales' },
11      { id: 'profit', alias: '利润' },
12    ],
13    dataset: [
14      { date: '2019', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
15      { date: '2019', region: 'east', category: 'Beverages', profit: 30, sales: 3200 },
16      { date: '2019', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
17      { date: '2019', region: 'east', category: 'Household', profit: 50, sales: 2400 },
18      { date: '2019', region: 'east', category: 'Personal', profit: 40, sales: 500 },
19      { date: '2019', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
20      { date: '2019', region: 'west', category: 'Beverages', profit: 30, sales: 3200 },
21      { date: '2019', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
22      { date: '2019', region: 'west', category: 'Household', profit: 50, sales: 2400 },
23      { date: '2019', region: 'west', category: 'Personal', profit: 40, sales: 500 },
24
25      { date: '2020', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
26      { date: '2020', region: 'east', category: 'Beverages', profit: 30, sales: 3200 },
27      { date: '2020', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
28      { date: '2020', region: 'east', category: 'Household', profit: 50, sales: 2400 },
29      { date: '2020', region: 'east', category: 'Personal', profit: 40, sales: 500 },
30      { date: '2020', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
31      { date: '2020', region: 'west', category: 'Beverages', profit: 30, sales: 3200 },
32      { date: '2020', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
33      { date: '2020', region: 'west', category: 'Household', profit: 50, sales: 2400 },
34      { date: '2020', region: 'west', category: 'Personal', profit: 40, sales: 500 },
35    ],
36  }
37  return <PivotChart vseed={vseed} />
38})