全局样式或条件样式配置
支持图表类型:bar, barParallel, barPercent, column, columnParallel, columnPercent若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力
若未配置selector, 则样式全局生效.
1export const SelectorBarValue = 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 barStyle: {
12 selector: ['2019', '2020'],
13 barColor: 'lightpink',
14 barColorOpacity: 0.8,
15 barBorderColor: 'lightpink',
16 barBorderWidth: 4,
17 barBorderStyle: 'dashed',
18 barRadius: [8, 8, 0, 0],
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 SelectorBarPartialDatum = 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 barStyle: {
12 selector: [{ date: '2019' }, { sales: 60 }],
13 barColor: 'lightblue',
14 barColorOpacity: 0.8,
15 barBorderColor: 'lightblue',
16 barBorderWidth: 4,
17 barBorderStyle: 'dashed',
18 barRadius: [8, 8, 0, 0],
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 SelectorBarDimensionCondition = 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 barStyle: {
12 selector: [
13 {
14 field: 'date',
15 operator: 'in',
16 value: ['2019', '2023'],
17 },
18 ],
19 barColor: 'gray',
20 barColorOpacity: 0.8,
21 barBorderColor: 'gray',
22 barBorderWidth: 4,
23 barBorderStyle: 'dashed',
24 barRadius: [8, 8, 0, 0],
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 SelectorBarMeasureCondition = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'barParallel',
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 barStyle: {
12 selector: {
13 field: 'profit',
14 operator: 'between',
15 value: [20, 40],
16 },
17 barColor: 'lightgreen',
18 barColorOpacity: 0.8,
19 barBorderColor: 'lightgreen',
20 barBorderWidth: 4,
21 barBorderStyle: 'dashed',
22 barRadius: [8, 8, 0, 0],
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 }
32 return <VChartRender vseed={vseed} />
33})优先级顺序: 后者覆盖前者
1export const MultiBarStyle = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'barParallel',
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 barStyle: [
12 {
13 barColorOpacity: 0.8,
14 barRadius: 10,
15 },
16 {
17 selector: [100, 40],
18 barColor: 'lightgreen',
19 barColorOpacity: 0.8,
20 },
21 {
22 selector: [100, 80],
23 barColor: 'red',
24 barColorOpacity: 0.8,
25 },
26 ],
27 dimensions: [{ id: 'date', alias: '日期', location: 'dimension' }],
28 measures: [
29 { id: 'profit', alias: '利润' },
30 { id: 'sales', alias: '销售额' },
31 { id: 'count', alias: '数量' },
32 ],
33 }
34 return <VChartRender vseed={vseed} />
35})