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})