Echarts 颜色重复问题

孟陬2025-04-09 15:59

默认 Echarts 仅有 9 种颜色，如果超过则会出现重复，导致用户体验不是很好。

现在提供一种解决思路。超过则使用随机颜色填充：

ts 复制代码

function generateColors(count: number) {
  const defaultColors = [
    '#5D82DB',
    '#73D13D',
    '#F7B500',
    '#FA541C',
    '#FD8D3C',
    '#999999',
    '#73c0de', // 浅蓝
    '#3ba272', // 深绿
    '#9a60b4', // 紫色
    '#ea7ccc', // 粉色
  ]

  if (count <= defaultColors.length) {
    return defaultColors
  }

  // 否则随机生成 count - defaultColors.length 个颜色
  const colors = [...defaultColors]
  
  for (let i = defaultColors.length; i < count; i++) {
    colors.push(`#${Math.floor(Math.random() * 16777215).toString(16)}`)
  }

  return colors
}

使用

ts 复制代码

{
  const getOption = (total: number) => {
    const colors = generateColors(data.length)

    const op: echarts.EChartsOption = {
      animation,
      // @ts-expect-error
      color: colors,
    }
}