全局样式或条件样式配置
支持图表类型:table, pivotTable若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力
若未配置selector, 则样式全局生效.
1const TableBodyCellStyle = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'table',
4 dataset: [
5 { date: '2019', type: 'A', goalProfit: 10, profit: 10, sales: 100, leftCount: 1, salesCount: 100 },
6 { date: '2020', type: 'A', goalProfit: 30, profit: 30, sales: 320, leftCount: 2, salesCount: 200 },
7 { date: '2021', type: 'A', goalProfit: 30, profit: 30, sales: 300, leftCount: 3, salesCount: 300 },
8 { date: '2022', type: 'A', goalProfit: 50, profit: 50, sales: 240, leftCount: 4, salesCount: 400 },
9 { date: '2023', type: 'A', goalProfit: 40, profit: 40, sales: 500, leftCount: 5, salesCount: 500 },
10 ],
11 bodyCellStyle: [
12 {
13 selector: { type: 'A' },
14 backgroundColor: 'pink',
15 },
16 {
17 selector: { field: 'sales', operator: '>=', value: 150 },
18 textColor: 'red',
19 },
20 ],
21 }
22 return <VTableTable vseed={vseed} />
23})1const TableBodyCellStyleGlobal = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'table',
4 dataset: [
5 { date: '2019', type: 'A', goalProfit: 10, profit: 10, sales: 100, leftCount: 1, salesCount: 100 },
6 { date: '2020', type: 'A', goalProfit: 30, profit: 30, sales: 320, leftCount: 2, salesCount: 200 },
7 { date: '2021', type: 'A', goalProfit: 30, profit: 30, sales: 300, leftCount: 3, salesCount: 300 },
8 { date: '2022', type: 'A', goalProfit: 50, profit: 50, sales: 240, leftCount: 4, salesCount: 400 },
9 { date: '2023', type: 'A', goalProfit: 40, profit: 40, sales: 500, leftCount: 5, salesCount: 500 },
10 ],
11 bodyCellStyle: {
12 backgroundColor: '#f8f9fa',
13 textColor: '#333',
14 },
15 }
16 return <VTableTable vseed={vseed} />
17})1const TableBodyCellStyleByValue = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'table',
4 dataset: [
5 { date: '2019', type: 'A', goalProfit: 10, profit: 10, sales: 100, leftCount: 1, salesCount: 100 },
6 { date: '2020', type: 'A', goalProfit: 30, profit: 30, sales: 320, leftCount: 2, salesCount: 200 },
7 { date: '2021', type: 'A', goalProfit: 30, profit: 30, sales: 300, leftCount: 3, salesCount: 300 },
8 { date: '2022', type: 'A', goalProfit: 50, profit: 50, sales: 240, leftCount: 4, salesCount: 400 },
9 { date: '2023', type: 'A', goalProfit: 40, profit: 40, sales: 500, leftCount: 5, salesCount: 500 },
10 ],
11 bodyCellStyle: [
12 {
13 selector: { field: 'sales', operator: '>=', value: 300 },
14 backgroundColor: '#fff3cd',
15 textColor: '#a15c00',
16 },
17 ],
18 }
19 return <VTableTable vseed={vseed} />
20})1const TableBodyCellStyleMulti = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'table',
4 dataset: [
5 { date: '2019', type: 'A', goalProfit: 10, profit: 10, sales: 100, leftCount: 1, salesCount: 100 },
6 { date: '2020', type: 'A', goalProfit: 30, profit: 30, sales: 320, leftCount: 2, salesCount: 200 },
7 { date: '2021', type: 'A', goalProfit: 30, profit: 30, sales: 300, leftCount: 3, salesCount: 300 },
8 { date: '2022', type: 'A', goalProfit: 50, profit: 50, sales: 240, leftCount: 4, salesCount: 400 },
9 { date: '2023', type: 'A', goalProfit: 40, profit: 40, sales: 500, leftCount: 5, salesCount: 500 },
10 ],
11 bodyCellStyle: [
12 {
13 // fallback/global style when no selector matched
14 backgroundColor: 'pink',
15 },
16 {
17 selector: { type: 'A' },
18 backgroundColor: 'red',
19 },
20 {
21 selector: { field: 'sales', operator: 'between', value: [200, 400] },
22 backgroundColor: '#e6fcf5',
23 textColor: '#0b7285',
24 },
25 ],
26 }
27 return <VTableTable vseed={vseed} />
28})1const PivotTableBodyCellStyleByValue = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'pivotTable',
4 dataset: [
5 { date: '2019', type: 'A', goalProfit: 10, profit: 10, sales: 100, leftCount: 1, salesCount: 100 },
6 { date: '2020', type: 'A', goalProfit: 30, profit: 30, sales: 320, leftCount: 2, salesCount: 200 },
7 { date: '2021', type: 'A', goalProfit: 30, profit: 30, sales: 300, leftCount: 3, salesCount: 300 },
8 { date: '2022', type: 'A', goalProfit: 50, profit: 50, sales: 240, leftCount: 4, salesCount: 400 },
9 { date: '2023', type: 'A', goalProfit: 40, profit: 40, sales: 500, leftCount: 5, salesCount: 500 },
10 ],
11 bodyCellStyle: [
12 {
13 selector: { field: 'sales', operator: '>=', value: 300 },
14 backgroundColor: '#e3f2fd',
15 textColor: '#0d47a1',
16 },
17 ],
18 dimensions: [
19 { id: 'date', alias: '日期', encoding: 'column' },
20 { id: 'type', alias: '类型', encoding: 'row' },
21 ],
22 measures: [
23 { id: 'profit', alias: '利润' },
24 { id: 'sales', alias: '销售量' },
25 ],
26 }
27 return <VTablePivotTable vseed={vseed} />
28})1const PivotTableBodyCellStyleBasic = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'pivotTable',
4 dataset: [
5 { date: '2019', type: 'A', goalProfit: 10, profit: 10, sales: 100, leftCount: 1, salesCount: 100 },
6 { date: '2020', type: 'A', goalProfit: 30, profit: 30, sales: 320, leftCount: 2, salesCount: 200 },
7 { date: '2021', type: 'A', goalProfit: 30, profit: 30, sales: 300, leftCount: 3, salesCount: 300 },
8 { date: '2022', type: 'A', goalProfit: 50, profit: 50, sales: 240, leftCount: 4, salesCount: 400 },
9 { date: '2023', type: 'A', goalProfit: 40, profit: 40, sales: 500, leftCount: 5, salesCount: 500 },
10 ],
11 bodyCellStyle: {
12 backgroundColor: '#faf0e6',
13 textColor: '#4d342e',
14 },
15 }
16 return <VTablePivotTable vseed={vseed} />
17})1const PivotTableBodyCellStyleMulti = memo(() => {
2 const vseed: VSeed = {
3 chartType: 'pivotTable',
4 dataset: [
5 { date: '2019', type: 'A', goalProfit: 10, profit: 10, sales: 100, leftCount: 1, salesCount: 100 },
6 { date: '2020', type: 'A', goalProfit: 30, profit: 30, sales: 320, leftCount: 2, salesCount: 200 },
7 { date: '2021', type: 'A', goalProfit: 30, profit: 30, sales: 300, leftCount: 3, salesCount: 300 },
8 { date: '2022', type: 'A', goalProfit: 50, profit: 50, sales: 240, leftCount: 4, salesCount: 400 },
9 { date: '2023', type: 'A', goalProfit: 40, profit: 40, sales: 500, leftCount: 5, salesCount: 500 },
10 ],
11 bodyCellStyle: [
12 {
13 selector: { type: 'A' },
14 backgroundColor: 'pink',
15 },
16 {
17 selector: { field: 'date', operator: 'in', value: ['2019', '2023'] },
18 textColor: 'green',
19 },
20 ],
21 dimensions: [
22 { id: 'date', alias: '日期', encoding: 'column' },
23 { id: 'type', alias: '类型', encoding: 'row' },
24 ],
25 measures: [
26 { id: 'profit', alias: '利润' },
27 { id: 'sales', alias: '销售量' },
28 ],
29 }
30 return <VTablePivotTable vseed={vseed} />
31})