VisActor VBI

    barStyle

    柱图样式

    全局样式或条件样式配置

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

    selector

    数据筛选器

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

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

    value

    export const SelectorBarValue = memo(() => {
  const vseed: VSeed = {
    chartType: 'column',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    barStyle: {
      selector: ['2019'],
      barColor: 'lightpink',
      barColorOpacity: 0.8,
      barBorderColor: 'lightpink',
      barBorderWidth: 4,
      barBorderStyle: 'dashed',
      barRadius: [8, 8, 0, 0],
    },
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
  }
  return <VChartRender vseed={vseed} />
})

    partial datum

    export const SelectorBarPartialDatum = memo(() => {
  const vseed: VSeed = {
    chartType: 'bar',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    barStyle: {
      selector: [{ sales: 60 }],
      barColor: 'lightblue',
      barColorOpacity: 0.8,
      barBorderColor: 'lightblue',
      barBorderWidth: 4,
      barBorderStyle: 'dashed',
      barRadius: [8, 8, 0, 0],
    },
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
  }
  return <VChartRender vseed={vseed} />
})

    dimension condition

    export const SelectorBarDimensionCondition = memo(() => {
  const vseed: VSeed = {
    chartType: 'columnParallel',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    barStyle: {
      selector: [
        {
          field: 'date',
          operator: 'in',
          value: ['2019', '2023'],
        },
      ],
      barColor: 'gray',
      barColorOpacity: 0.8,
      barBorderColor: 'gray',
      barBorderWidth: 4,
      barBorderStyle: 'dashed',
      barRadius: [8, 8, 0, 0],
    },
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
  }
  return <VChartRender vseed={vseed} />
})

    measure condition

    export const SelectorBarMeasureCondition = memo(() => {
  const vseed: VSeed = {
    chartType: 'barParallel',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    barStyle: {
      selector: {
        field: 'profit',
        operator: 'between',
        value: [20, 40],
      },
      barColor: 'lightgreen',
      barColorOpacity: 0.8,
      barBorderColor: 'lightgreen',
      barBorderWidth: 4,
      barBorderStyle: 'dashed',
      barRadius: [8, 8, 0, 0],
    },
    dimensions: [{ id: 'date', alias: '日期',   }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
            { id: 'count', alias: '数量' },

    ],
  }
  return <VChartRender vseed={vseed} />
})

    barStyle array

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

    export const MultiBarStyle = memo(() => {
  const vseed: VSeed = {
    chartType: 'barParallel',
    dataset: [
      { date: '2019', profit: 10, sales: 20, count: 50 },
      { date: '2020', profit: 30, sales: 60, count: 50 },
      { date: '2021', profit: 30, sales: 60, count: 50 },
      { date: '2022', profit: 50, sales: 100, count: 50 },
      { date: '2023', profit: 40, sales: 80, count: 50 },
    ],
    barStyle: [
      {
        barColorOpacity: 0.8,
        barRadius: 10,
      },
      {
        selector: [40],
        barColor: 'lightgreen',
        barColorOpacity: 0.8,
      },
      {
        selector: [80],
        barColor: 'red',
        barColorOpacity: 0.8,
      },
    ],
    dimensions: [{ id: 'date', alias: '日期' }],
    measures: [
      { id: 'profit', alias: '利润' },
      { id: 'sales', alias: '销售额' },
      { id: 'count', alias: '数量' },
    ],
  }
  return <VChartRender vseed={vseed} />
})