#pointStyle

1export const SelectorPointValue = 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    pointStyle: [
12      {
13        selector: '2019',
14        pointSize: 20,
15        pointBorderColor: '#000000',
16        pointBorderWidth: 2,
17      },
18    ],
19    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
20    measures: [
21      { id: 'profit', alias: '利润' },
22      { id: 'sales', alias: '销售额' },
23      { id: 'count', alias: '数量' },
24    ],
25  }
26  return <VChartRender vseed={vseed} />
27})

1export const SelectorPointPartialDatum = 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    pointStyle: {
12      selector: [{ date: '2019' }, { sales: 60 }],
13      pointSize: 20,
14      pointColor: 'lightblue',
15      pointColorOpacity: 0.8,
16      pointBorderColor: 'blue',
17      pointBorderWidth: 1,
18      pointBorderStyle: 'dashed',
19    },
20    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
21    measures: [
22      { id: 'profit', alias: '利润' },
23      { id: 'sales', alias: '销售额' },
24      { id: 'count', alias: '数量' },
25    ],
26  }
27  return <VChartRender vseed={vseed} />
28})

1export const SelectorPointDimensionCondition = 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    pointStyle: {
12      selector: [
13        {
14          field: 'date',
15          operator: 'in',
16          value: ['2019', '2023'],
17        },
18      ],
19      pointSize: 20,
20      pointColor: 'gray',
21      pointColorOpacity: 0.8,
22      pointBorderColor: 'gray',
23      pointBorderWidth: 1,
24      pointBorderStyle: 'dashed',
25    },
26    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
27    measures: [
28      { id: 'profit', alias: '利润' },
29      { id: 'sales', alias: '销售额' },
30      { id: 'count', alias: '数量' },
31    ],
32  }
33  return <VChartRender vseed={vseed} />
34})

1export const SelectorPointMeasureCondition = memo(() => {
2  const vseed: VSeed = {
3    chartType: 'areaPercent',
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    pointStyle: {
12      selector: {
13        field: 'profit',
14        operator: 'between',
15        value: [20, 40],
16      },
17      pointSize: 20,
18      pointColor: 'lightgreen',
19      pointColorOpacity: 0.8,
20      pointBorderColor: '#000000',
21      pointBorderWidth: 1,
22      pointBorderStyle: 'dashed',
23    },
24    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
25    measures: [
26      { id: 'profit', alias: '利润' },
27      { id: 'sales', alias: '销售额' },
28      { id: 'count', alias: '数量' },
29    ],
30  }
31  return <VChartRender vseed={vseed} />
32})

1export const MultiPointStyle = 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    pointStyle: [
12      {
13        pointSize: 20,
14        pointColor: 'lightgreen',
15        pointColorOpacity: 0.8,
16      },
17      {
18        selector: [100, 80],
19        pointSize: 20,
20        pointColor: 'red',
21        pointColorOpacity: 0.8,
22      },
23    ],
24    dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
25    measures: [
26      { id: 'profit', alias: '利润' },
27      { id: 'sales', alias: '销售额' },
28      { id: 'count', alias: '数量' },
29    ],
30  }
31  return <VChartRender vseed={vseed} />
32})