1export const AnnotationPointValue = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'column',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 annotationPoint: {
12 selector: 10,
13 text: '最小值',
14 textFontWeight: 600,
15 textBaseline: 'bottom',
16 textAlign: 'center',
17 textColor: '#fff',
18 backgroundColor: 'gray',
19 backgroundBorderRadius: 10,
20 backgroundPadding: 10,
21 offsetY: -5,
22 },
23 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
24 measures: [
25 { id: 'profit', alias: '利润' },
26 { id: 'sales', alias: '销售额' },
27 { id: 'count', alias: '数量' },
28 ],
29 }
30 return <VChartRender vseed={vseed} />
31})1export const AnnotationPointPartialDatum = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'line',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 annotationPoint: [
12 {
13 selector: [
14 {
15 sales: 20,
16 },
17 ],
18 text: ['销售额', '最小值 20'],
19 textAlign: 'right',
20 offsetX: -15,
21 },
22 {
23 selector: [100],
24 text: ['销售额', '最大值 100'],
25 textAlign: 'right',
26 offsetY: 15,
27 offsetX: -20,
28 },
29 ],
30 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
31 measures: [
32 { id: 'profit', alias: '利润' },
33 { id: 'sales', alias: '销售额' },
34 { id: 'count', alias: '数量' },
35 ],
36 }
37 return <VChartRender vseed={vseed} />
38})1export const AnnotationPointCondition = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'area',
4 dataset: [
5 { date: '2019', profit: 10, sales: 20, count: 50 },
6 { date: '2020', profit: 30, sales: 60, count: 50 },
7 { date: '2021', profit: 30, sales: 60, count: 50 },
8 { date: '2022', profit: 50, sales: 100, count: 50 },
9 { date: '2023', profit: 40, sales: 80, count: 50 },
10 ],
11 annotationPoint: [
12 {
13 selector: [
14 {
15 field: 'sales',
16 operator: '<=',
17 value: 80,
18 },
19 ],
20 text: '销售额<=80',
21 textAlign: 'right',
22 offsetX: -15,
23 },
24 {
25 selector: [
26 {
27 field: 'date',
28 operator: 'in',
29 value: '2023',
30 },
31 ],
32 text: '2023 年',
33 textAlign: 'left',
34 offsetX: 0,
35 },
36 ],
37 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
38 measures: [
39 { id: 'profit', alias: '利润' },
40 { id: 'sales', alias: '销售额' },
41 { id: 'count', alias: '数量' },
42 ],
43 }
44 return <VChartRender vseed={vseed} />
45})