Color

colorMapping

colorMapping

import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'columnParallel',
    color: {
      colorMapping: {
        利润: 'yellow',
        E: 'green',
        'E-销售额': 'red',
      },
    },
    dataset: [
      {
        date: '2019',
        type: 'A',
        profit: 10,
        sales: 20,
      },
      {
        date: '2019',
        type: 'B',
        profit: 30,
        sales: 60,
      },
      {
        date: '2019',
        type: 'C',
        profit: 30,
        sales: 60,
      },
      {
        date: '2019',
        type: 'D',
        profit: 50,
        sales: 100,
      },
      {
        date: '2019',
        type: 'E',
        profit: 40,
        sales: 80,
      },
      {
        date: '2020',
        type: 'A',
        profit: 10,
        sales: 20,
      },
      {
        date: '2020',
        type: 'B',
        profit: 30,
        sales: 60,
      },
      {
        date: '2020',
        type: 'C',
        profit: 30,
        sales: 60,
      },
      {
        date: '2020',
        type: 'D',
        profit: 50,
        sales: 100,
      },
      {
        date: '2020',
        type: 'E',
        profit: 40,
        sales: 80,
      },
    ],
    dimensions: [
      {
        id: 'date',
        alias: '日期',
      },
      {
        id: 'type',
        alias: '类型',
      },
    ],
    measures: [
      {
        id: 'profit',
        alias: '利润',
      },
      {
        id: 'sales',
        alias: '销售额',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}

colorScheme

colorScheme

import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
    chartType: 'columnParallel',
    color: {
      colorScheme: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'],
    },
    dataset: [
      {
        date: '2019',
        type: 'A',
        profit: 10,
        sales: 20,
      },
      {
        date: '2019',
        type: 'B',
        profit: 30,
        sales: 60,
      },
      {
        date: '2019',
        type: 'C',
        profit: 30,
        sales: 60,
      },
      {
        date: '2019',
        type: 'D',
        profit: 50,
        sales: 100,
      },
      {
        date: '2019',
        type: 'E',
        profit: 40,
        sales: 80,
      },
      {
        date: '2020',
        type: 'A',
        profit: 10,
        sales: 20,
      },
      {
        date: '2020',
        type: 'B',
        profit: 30,
        sales: 60,
      },
      {
        date: '2020',
        type: 'C',
        profit: 30,
        sales: 60,
      },
      {
        date: '2020',
        type: 'D',
        profit: 50,
        sales: 100,
      },
      {
        date: '2020',
        type: 'E',
        profit: 40,
        sales: 80,
      },
    ],
    dimensions: [
      {
        id: 'date',
        alias: '日期',
      },
      {
        id: 'type',
        alias: '类型',
      },
    ],
    measures: [
      {
        id: 'profit',
        alias: '利润',
      },
      {
        id: 'sales',
        alias: '销售额',
      },
    ],
  }

  return <VSeedRender vseed={vseedConfig} />
}