English

图表类型

按图表类型约定图表默认的配置, 使用约定优于配置的方法, 每一种图表类型有大量约定配置, 极大简化配置心智

Table

表格

1{
2  "chartType": "table",
3  "dataset": [
4    { "date": "2019", "type": "A", "goalProfit": 10, "profit": 10, "sales": 100, "leftCount": 1, "salesCount": 100 },
5    { "date": "2020", "type": "A", "goalProfit": 30, "profit": 30, "sales": 320, "leftCount": 2, "salesCount": 200 },
6    { "date": "2021", "type": "A", "goalProfit": 30, "profit": 30, "sales": 300, "leftCount": 3, "salesCount": 300 },
7    { "date": "2022", "type": "A", "goalProfit": 50, "profit": 50, "sales": 240, "leftCount": 4, "salesCount": 400 },
8    { "date": "2023", "type": "A", "goalProfit": 40, "profit": 40, "sales": 500, "leftCount": 5, "salesCount": 500 }
9  ]
10}

透视表

1{
2  "chartType": "pivotTable",
3  "dataset": [
4    { "date": "2019", "type": "A", "goalProfit": 10, "profit": 10, "sales": 100, "leftCount": 1, "salesCount": 100 },
5    { "date": "2020", "type": "A", "goalProfit": 30, "profit": 30, "sales": 320, "leftCount": 2, "salesCount": 200 },
6    { "date": "2021", "type": "A", "goalProfit": 30, "profit": 30, "sales": 300, "leftCount": 3, "salesCount": 300 },
7    { "date": "2022", "type": "A", "goalProfit": 50, "profit": 50, "sales": 240, "leftCount": 4, "salesCount": 400 },
8    { "date": "2023", "type": "A", "goalProfit": 40, "profit": 40, "sales": 500, "leftCount": 5, "salesCount": 500 }
9  ]
10}

Cartesian

折线图

1{
2  "chartType": "line",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

堆叠柱状图

1{
2  "chartType": "column",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

并列柱状图

1{
2  "chartType": "columnParallel",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

百分比柱状图

1{
2  "chartType": "columnPercent",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

条形图

1{
2  "chartType": "bar",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

并列条形图

1{
2  "chartType": "barParallel",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

百分比条形图

1{
2  "chartType": "barPercent",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

堆叠面积图

1{
2  "chartType": "area",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

百分比面积图

1{
2  "chartType": "areaPercent",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

散点图

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

Polar

饼图

1{
2  "chartType": "pie",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

环形图

1{
2  "chartType": "donut",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

玫瑰图

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 RadarChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'radar',
4    dataset: [{ profit: 10, sales: 20, count: 50, rateOfReturn: 1 }],
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})

并列玫瑰图

分组玫瑰图

1{
2  "chartType": "roseParallel",
3  "dataset": [
4    { "date": "2019", "profit": 10, "sales": 20 },
5    { "date": "2020", "profit": 30, "sales": 60 },
6    { "date": "2021", "profit": 30, "sales": 60 },
7    { "date": "2022", "profit": 50, "sales": 100 },
8    { "date": "2023", "profit": 40, "sales": 80 }
9  ]
10}

Other

热力图

1export const HeatmapChart = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'heatmap',
4    dataset: [
5      {
6        type: 'A',
7        subType: 'a',
8        value: 98,
9      },
10      {
11        type: 'A',
12        subType: 'b',
13        value: 71,
14      },
15      {
16        type: 'A',
17        subType: 'c',
18        value: 22,
19      },
20      {
21        type: 'A',
22        subType: 'd',
23        value: 49,
24      },
25      {
26        type: 'A',
27        subType: 'e',
28        value: 92,
29      },
30      {
31        type: 'B',
32        subType: 'a',
33        value: 85,
34      },
35      {
36        type: 'B',
37        subType: 'b',
38        value: 45,
39      },
40      {
41        type: 'B',
42        subType: 'c',
43        value: 19,
44      },
45      {
46        type: 'B',
47        subType: 'd',
48        value: 58,
49      },
50      {
51        type: 'B',
52        subType: 'e',
53        value: 26,
54      },
55      {
56        type: 'C',
57        subType: 'a',
58        value: 44,
59      },
60      {
61        type: 'C',
62        subType: 'b',
63        value: 23,
64      },
65      {
66        type: 'C',
67        subType: 'c',
68        value: 6,
69      },
70      {
71        type: 'C',
72        subType: 'd',
73        value: 42,
74      },
75      {
76        type: 'C',
77        subType: 'e',
78        value: 27,
79      },
80      {
81        type: 'D',
82        subType: 'a',
83        value: 79,
84      },
85      {
86        type: 'D',
87        subType: 'b',
88        value: 89,
89      },
90      {
91        type: 'D',
92        subType: 'c',
93        value: 65,
94      },
95      {
96        type: 'D',
97        subType: 'd',
98        value: 56,
99      },
100      {
101        type: 'D',
102        subType: 'e',
103        value: 1,
104      },
105      {
106        type: 'E',
107        subType: 'a',
108        value: 59,
109      },
110      {
111        type: 'E',
112        subType: 'b',
113        value: 94,
114      },
115      {
116        type: 'E',
117        subType: 'c',
118        value: 45,
119      },
120      {
121        type: 'E',
122        subType: 'd',
123        value: 80,
124      },
125      {
126        type: 'E',
127        subType: 'e',
128        value: 47,
129      },
130    ],
131  }
132  return <VChartRender vseed={vseed} />
133})

漏斗图

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

experimental

Chart通用配置

line

column

columnParallel

columnPercent

bar

barParallel

barPercent

area

areaPercent

图表类型

Table

表格

透视表

Cartesian

折线图

堆叠柱状图

并列柱状图

百分比柱状图

条形图

并列条形图

百分比条形图

堆叠面积图

百分比面积图

散点图

Polar

饼图

环形图

玫瑰图

雷达图

堆叠玫瑰图

并列玫瑰图

Other

热力图

漏斗图

#图表类型

#Table

#表格

#透视表

#Cartesian

#折线图

#堆叠柱状图

#并列柱状图

#百分比柱状图

#条形图

#并列条形图

#百分比条形图

#堆叠面积图

#百分比面积图

#散点图

#Polar

#饼图

#环形图

#玫瑰图

#雷达图

#堆叠玫瑰图

#并列玫瑰图

#Other

#热力图

#漏斗图

图表类型

Table

表格

透视表

Cartesian

折线图

堆叠柱状图

并列柱状图

百分比柱状图

条形图

并列条形图

百分比条形图

堆叠面积图

百分比面积图

散点图

Polar

饼图

环形图

玫瑰图

雷达图

堆叠玫瑰图

并列玫瑰图

Other

热力图

漏斗图