#annotationArea

1export const AnnotationAreaSelectorVertical = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'columnParallel',
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    annotationArea: {
12      selector: ['2019', '2021'],
13      text: '区域',
14    },
15    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
16    measures: [
17      { id: 'profit', alias: '利润' },
18      { id: 'sales', alias: '销售额' },
19      { id: 'count', alias: '数量' },
20    ],
21  }
22  return <VChartRender vseed={vseed} />
23})

1export const AnnotationAreaSelectorHorizontal = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'bar',
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    annotationArea: {
12      selector: ['2019', '2021'],
13      text: '区域',
14      textPosition: 'topRight',
15      textAlign: 'right',
16    },
17    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
18    measures: [
19      { id: 'profit', alias: '利润' },
20      { id: 'sales', alias: '销售额' },
21      { id: 'count', alias: '数量' },
22    ],
23  }
24  return <VChartRender vseed={vseed} />
25})

1export const AnnotationAreaSelectorLine = 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    annotationArea: {
12      selector: ['2019', '2021'],
13      text: '区域',
14    },
15    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
16    measures: [
17      { id: 'profit', alias: '利润' },
18      { id: 'sales', alias: '销售额' },
19      { id: 'count', alias: '数量' },
20    ],
21  }
22  return <VChartRender vseed={vseed} />
23})