VisActor VSeed
介绍
示例
开发指南
Playground
了解VChart
了解VTable
介绍
示例
开发指南
Playground
了解VChart
了解VTable
简体中文

barStyle

柱图样式

全局样式或条件样式配置

支持图表类型: bar, barParallel, barPercent, column, columnParallel, columnPercent

selector

数据筛选器

若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力

若未配置selector, 则样式全局生效.

value

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})

partial datum

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})

dimension condition

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})

measure condition

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})

barStyle array

优先级顺序: 后者覆盖前者

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})
目录