1export const ScatterChart = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'scatter',
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: 200, sales: 80 },
10 ],
11 measures: [
12 {
13 id: 'sales',
14 alias: '销售额',
15 },
16 {
17 id: 'profit',
18 alias: '利润',
19 },
20 ],
21 dimensions: [
22 {
23 id: 'date',
24 alias: '日期',
25 },
26 ],
27 label: {
28 enable: false,
29 },
30 }
31 return <VChartRender vseed={vseed} />
32})1export const ScatterChart = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'scatter',
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: 200, sales: 80 },
10 ],
11 measures: [
12 {
13 id: 'x',
14 children: [
15 {
16 id: 'sales',
17 alias: '销售额',
18 },
19 ],
20 },
21 {
22 id: 'y',
23 children: [
24 {
25 id: 'profit',
26 alias: '利润',
27 },
28 ],
29 },
30 ],
31 dimensions: [
32 {
33 id: 'date',
34 alias: '日期',
35 },
36 ],
37 label: {
38 enable: false,
39 },
40 }
41 return <VChartRender vseed={vseed} />
42})1export const CombinationScatterChart = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'scatter',
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: 200, sales: 100, rateOfReturn: 0.5 },
10 ],
11 dimensions: [
12 {
13 id: 'date',
14 alias: '日期',
15 },
16 ],
17 measures: [
18 {
19 id: 'first',
20 children: [
21 {
22 id: 'salesAndProfit',
23 alias: '销售额与利润',
24 children: [
25 {
26 id: 'sales',
27 alias: '销售额',
28 },
29 {
30 id: 'profit',
31 alias: '利润',
32 },
33 ],
34 },
35 {
36 id: 'ratio',
37 alias: '比率',
38 children: [
39 {
40 id: 'sales',
41 alias: '销售额',
42 },
43 {
44 id: 'rateOfReturn',
45 alias: '回报率',
46 },
47 ],
48 },
49 ],
50 },
51 {
52 id: 'second',
53 children: [
54 {
55 id: 'salesAndProfit',
56 alias: '销售额与利润',
57 children: [
58 {
59 id: 'sales',
60 alias: '销售额',
61 },
62 {
63 id: 'profit',
64 alias: '利润',
65 },
66 ],
67 },
68 {
69 id: 'ratio',
70 alias: '比率',
71 children: [
72 {
73 id: 'sales',
74 alias: '销售额',
75 },
76 {
77 id: 'rateOfReturn',
78 alias: '回报率',
79 },
80 ],
81 },
82 ],
83 },
84 ],
85 }
86 return <PivotChart vseed={vseed} />
87})1export const ScatterMeasures = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'scatter',
4 dataset: [
5 { date: '2019', profit: 20, sales: 100 },
6 { date: '2020', profit: 30, sales: 600 },
7 { date: '2021', profit: 30, sales: 600 },
8 { date: '2022', profit: 50, sales: 500 },
9 { date: '2023', profit: 10, sales: 800 },
10 ],
11 scatterMeasures: [
12 {
13 xMeasures: [{ id: 'sales', alias: '销售额' }],
14 yMeasures: [{ id: 'profit', alias: '利润' }],
15 },
16 ],
17 }
18 return <VChartRender vseed={vseed} />
19})1export const ScatterMeasuresArray = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'scatter',
4 dataset: [
5 { date: '2019', profit: 20, sales: 100 },
6 { date: '2020', profit: 30, sales: 600 },
7 { date: '2021', profit: 30, sales: 600 },
8 { date: '2022', profit: 50, sales: 500 },
9 { date: '2023', profit: 10, sales: 800 },
10 ],
11 scatterMeasures: [
12 {
13 xMeasures: [{ id: 'sales', alias: '销售额' }],
14 yMeasures: [{ id: 'profit', alias: '利润' }],
15 },
16 {
17 xMeasures: [{ id: 'sales', alias: '销售额' }],
18 yMeasures: [{ id: 'profit', alias: '利润' }],
19 },
20 ],
21 }
22 return <VChartRender vseed={vseed} />
23})1export const PivotScatterChart = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'scatter',
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 {
16 id: 'group-sales',
17 alias: '销售额分组',
18 children: [
19 { id: 'sales', alias: '销售额' },
20 { id: 'profit', alias: '利润' },
21 ],
22 },
23 ],
24 label: {
25 enable: false,
26 },
27 dataset: [
28 { date: '2019', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
29 { date: '2019', region: 'east', category: 'Beverages', profit: 30, sales: 320 },
30 { date: '2019', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
31 { date: '2019', region: 'east', category: 'Household', profit: 50, sales: 240 },
32 { date: '2019', region: 'east', category: 'Personal', profit: 40, sales: 500 },
33 { date: '2019', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
34 { date: '2019', region: 'west', category: 'Beverages', profit: 30, sales: 320 },
35 { date: '2019', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
36 { date: '2019', region: 'west', category: 'Household', profit: 50, sales: 240 },
37 { date: '2019', region: 'west', category: 'Personal', profit: 200, sales: 500 },
38
39 { date: '2020', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
40 { date: '2020', region: 'east', category: 'Beverages', profit: 30, sales: 320 },
41 { date: '2020', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
42 { date: '2020', region: 'east', category: 'Household', profit: 50, sales: 240 },
43 { date: '2020', region: 'east', category: 'Personal', profit: 40, sales: 500 },
44 { date: '2020', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
45 { date: '2020', region: 'west', category: 'Beverages', profit: 30, sales: 320 },
46 { date: '2020', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
47 { date: '2020', region: 'west', category: 'Household', profit: 50, sales: 200 },
48 { date: '2020', region: 'west', category: 'Personal', profit: 200, sales: 500 },
49 ],
50 }
51 return <PivotChart vseed={vseed} />
52})