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

组合散点图

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        location: 'dimension',
16      },
17    ],
18    measures: [
19      {
20        id: 'salesAndProfit',
21        alias: '销售额与利润',
22        children: [
23          {
24            id: 'sales',
25            alias: '销售额',
26            location: 'measure',
27          },
28          {
29            id: 'profit',
30            alias: '利润',
31            location: 'measure',
32          },
33        ],
34      },
35      {
36        id: 'ratio',
37        alias: '比率',
38        children: [
39          {
40            id: 'sales',
41            alias: '销售额',
42            location: 'measure',
43          },
44          {
45            id: 'rateOfReturn',
46            alias: '回报率',
47            location: 'measure',
48          },
49        ],
50      },
51    ],
52  }
53  return <PivotChart vseed={vseed} />
54})

透视组合散点图

1export const PivotScatterChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'scatter',
4    dimensions: [
5      { id: 'category', alias: '类别', location: 'dimension' },
6      { id: 'date', alias: '日期', location: 'columnDimension' },
7      { id: 'region', alias: '区域', location: 'rowDimension' },
8    ],
9    measures: [
10      {
11        id: 'group-sales',
12        alias: '销售额分组',
13        children: [
14          { id: 'sales', alias: '销售额' },
15        ],
16      },
17      {
18        id: 'group-sales',
19        alias: '销售额分组',
20        children: [
21          { id: 'sales', alias: '销售额' },
22          { id: 'profit', alias: '利润' },
23        ],
24      },
25    ],
26    label: {
27      enable: false,
28    },
29    dataset: [
30      { date: '2019', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
31      { date: '2019', region: 'east', category: 'Beverages', profit: 30, sales: 320 },
32      { date: '2019', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
33      { date: '2019', region: 'east', category: 'Household', profit: 50, sales: 240 },
34      { date: '2019', region: 'east', category: 'Personal', profit: 40, sales: 500 },
35      { date: '2019', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
36      { date: '2019', region: 'west', category: 'Beverages', profit: 30, sales: 320 },
37      { date: '2019', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
38      { date: '2019', region: 'west', category: 'Household', profit: 50, sales: 240 },
39      { date: '2019', region: 'west', category: 'Personal', profit: 200, sales: 500 },
40
41      { date: '2020', region: 'east', category: 'Grocery', profit: 10, sales: 100 },
42      { date: '2020', region: 'east', category: 'Beverages', profit: 30, sales: 320 },
43      { date: '2020', region: 'east', category: 'Dairy', profit: 30, sales: 300 },
44      { date: '2020', region: 'east', category: 'Household', profit: 50, sales: 240 },
45      { date: '2020', region: 'east', category: 'Personal', profit: 40, sales: 500 },
46      { date: '2020', region: 'west', category: 'Grocery', profit: 10, sales: 100 },
47      { date: '2020', region: 'west', category: 'Beverages', profit: 30, sales: 320 },
48      { date: '2020', region: 'west', category: 'Dairy', profit: 30, sales: 300 },
49      { date: '2020', region: 'west', category: 'Household', profit: 50, sales: 200 },
50      { date: '2020', region: 'west', category: 'Personal', profit: 200, sales: 500 },
51    ],
52  }
53  return <PivotChart vseed={vseed} />
54})