VisActor VBI
  • 简体中文

      • BarStyle

      barStyle array

      barStyle array

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    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 <VSeedRender vseed={vseedConfig} />
}

      横向条件渐变

      用条件规则配置负值颜色；从零值向正负值末端渐变，方向自动适配。

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'bar',
    dataset: [
      {
        region: '华东',
        profit: 40,
      },
      {
        region: '华北',
        profit: -16,
      },
      {
        region: '华南',
        profit: 28,
      },
      {
        region: '西南',
        profit: -10,
      },
    ],
    dimensions: [
      {
        id: 'region',
      },
    ],
    measures: [
      {
        id: 'profit',
      },
    ],
    legend: {
      enable: false,
    },
    label: {
      enable: false,
    },
    barStyle: [
      {
        barColor: '#19cba1',
        barRadius: 4,
        barBorderWidth: 0,
        barGradient: true,
      },
      {
        selector: {
          field: 'profit',
          operator: '<',
          value: 0,
        },
        barColor: '#d47c6a',
        barGradient: true,
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

      dimension condition

      dimension condition

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    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 <VSeedRender vseed={vseedConfig} />
}

      系列颜色渐变

      柱体继承各系列颜色，支持堆叠与正负值。

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'column',
    dataset: [
      {
        category: 'A',
        region: 'East',
        value: 10,
      },
      {
        category: 'A',
        region: 'West',
        value: 6,
      },
      {
        category: 'B',
        region: 'East',
        value: 18,
      },
      {
        category: 'B',
        region: 'West',
        value: 12,
      },
      {
        category: 'C',
        region: 'East',
        value: 8,
      },
      {
        category: 'C',
        region: 'West',
        value: -5,
      },
    ],
    dimensions: [
      {
        id: 'category',
      },
      {
        id: 'region',
        encoding: 'color',
      },
    ],
    measures: [
      {
        id: 'value',
      },
    ],
    label: {
      enable: false,
    },
    barStyle: {
      barBorderWidth: 0,
      barGradient: true,
    },
  }

  return <VSeedRender vseed={vseedConfig} />
}

      partial datum

      partial datum

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    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 <VSeedRender vseed={vseedConfig} />
}

      value

      value

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    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 <VSeedRender vseed={vseedConfig} />
}