1. 需求

设计图上图表的颜色可能只设计了几个，但是有的数据可能远远超出了设计的颜色，这个时候能够自动根据基础颜色生成颜色就好了

2.实现

这里使用了@ant-design/colors，这是antd的调色板生成库，只需要根据一个颜色就能生成10个颜色。

import { generate } from '@ant-design/colors';
// 生成颜色数量
const COLOR_COUNT = 30
// 基础颜色
const COLOR_BASE_LIST = ['#00B091', '#EDBF00', '#1DB4FF', '#D85700', '#8B00FF', '#00A0E9', '#FF7F00']
const colorPalette = [...Array(COLOR_COUNT)].map((_, index) => {
  const group = Math.floor(index / COLOR_BASE_LIST.length)
  if (group > 0) {
    // 超出基础颜色的自动生成
    const originalIndex = index - group * COLOR_BASE_LIST.length
    // 生成的颜色有10个，但是取中间点的颜色饱和度高一些
    return generate(COLOR_BASE_LIST[originalIndex])[2 + (group - 1) % 8]
  }
  return COLOR_BASE_LIST[index]
});

3.效果

本来的颜色：

扩展之后：

看着还行，如果要细调，那就只能自己写个颜色生成算法了。