Antd charts 長條圖、圓餅圖顏色設置

import { Pie } from '@ant-design/plots'

const Component = () => {
  const config = {
    data,
    angleField: 'value',
    colorField: 'type',
    scale: { 
      color: {
        // 修改顏色
        range: ['#f8d684', '#f6c1e0', '#8ecbe5', '#8c86ca'],
      },
    },
  }
  
  // ...
  
  return <Pie {...config} />
}

import { Pie } from '@ant-design/plots'

const Component = () => {
  const config = {
    data,
    angleField: 'value',
    colorField: 'type',
    scale: { 
      color: {
        // 修改顏色
        range: ['#f8d684', '#f6c1e0', '#8ecbe5', '#8c86ca'],
      },
    },
  }
  
  // ...
  
  return <Pie {...config} />
}

import { Bar } from '@ant-design/plots'

const Component = () => {
  const config = {
    data,
    xField: 'name',
    yField: 'value',
    colorField: 'type',
    stack: true,
    // 修改顏色
    theme: { category10: ['#8d86cf', '#7bcde9'] },
  }
  return <Bar {...config} />
}

import { Bar } from '@ant-design/plots'

const Component = () => {
  const config = {
    data,
    xField: 'name',
    yField: 'value',
    colorField: 'type',
    stack: true,
    // 修改顏色
    theme: { category10: ['#8d86cf', '#7bcde9'] },
  }
  return <Bar {...config} />
}