“@ant-design/charts”: “^2.1.2”,
“@ant-design/plots”: “^2.2.8”,
圓餅圖

在 scale.color.range
設置
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} />
}
長條圖

在 theme.category10
設置
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} />
}