rose

玫瑰图

玫瑰图
1export const RoseChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'rose',
4    dataset: [
5      { date: '2023', profit: 40 },
6      { date: '2022', profit: 50 },
7      { date: '2021', profit: 25 },
8      { date: '2020', profit: 30 },
9      { date: '2019', profit: 10 },
10    ],
11  }
12  return <VChartRender vseed={vseed} />
13})

玫瑰图(零维度)

1export const RoseChartOnlyMeasures = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'rose',
4    dataset: [{ profit: 40, sales: 100, goalSales: 200, count: 20 }],
5  }
6  return <VChartRender vseed={vseed} />
7})

堆叠玫瑰图

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

组合堆叠玫瑰图

1export const CombinationRoseChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'rose',
4    dataset: [
5      { date: '2019', profit: 10, sales: 20, rateOfReturn: 0.1 },
6      { date: '2020', profit: 20, sales: 40, rateOfReturn: 0.2 },
7      { date: '2021', profit: 30, sales: 60, rateOfReturn: 0.3 },
8      { date: '2022', profit: 40, sales: 80, rateOfReturn: 0.4 },
9      { date: '2023', profit: 50, sales: 100, rateOfReturn: 0.5 },
10    ],
11    dimensions: [
12      {
13        id: 'date',
14        alias: '日期',
15      },
16    ],
17    measures: [
18      {
19        id: 'salesAndProfit',
20        alias: '销售额与利润',
21        children: [
22          {
23            id: 'sales',
24            alias: '销售额',
25            location: 'measure',
26          },
27          {
28            id: 'profit',
29            alias: '利润',
30            location: 'measure',
31          },
32        ],
33      },
34      {
35        id: 'ratio',
36        alias: '比率',
37        children: [
38          {
39            id: 'rateOfReturn',
40            alias: '回报率',
41            location: 'measure',
42          },
43        ],
44      },
45    ],
46  }
47  return <PivotChart vseed={vseed} />
48})

透视堆叠玫瑰图

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