#scatter

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        encoding: 'xAxis',
16      },
17      {
18        id: 'profit',
19        alias: '利润',
20        encoding: 'yAxis',
21      },
22    ],
23    dimensions: [
24      {
25        id: 'date',
26        alias: '日期',
27      },
28    ],
29    label: {
30      enable: false,
31    },
32  }
33  return <VChartRender vseed={vseed} />
34})

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: 'sales',
20        alias: '销售额',
21        encoding: 'xAxis',
22        parentId: '0',
23      },
24      {
25        id: 'profit',
26        alias: '利润',
27        encoding: 'yAxis',
28        parentId: '0',
29      },
30
31      {
32        id: 'sales',
33        alias: '销售额',
34        encoding: 'xAxis',
35        parentId: '1',
36      },
37      {
38        id: 'rateOfReturn',
39        alias: '回报率',
40        encoding: 'yAxis',
41        parentId: '1',
42      },
43    ],
44  }
45  return <PivotChart vseed={vseed} />
46})

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