动态生成颜色

// 生成渐变颜色
    generateColors(count) {
      const colors = []; // 存储生成的颜色数组
      // 如果颜色数量小于1，则返回空数组
      for (let i = 0; i < count; i++) {
        // 使用HSB模型生成均匀分布的颜色
        const hue = (i / count) * 360; // 色相范围0-360度
        // 饱和度和亮度可以根据需要调整
        const saturation = 0.9; // 饱和度
        // 亮度可以根据需要调整
        const brightness = 0.85; // 亮度

        // HSB to RGB转换
        // HSB模型中的色相(hue)范围是0-360度，饱和度(saturation)和亮度(brightness)范围是0-1
        // 将色相转换为0-6之间的值
        const h = hue / 60;
        // 计算色相、饱和度和亮度对应的RGB值
        // c是色相的最大值，x是色相的次大值，m是亮度偏移量
        const c = brightness * saturation;
        // 计算色相的次大值
        // x是色相的次大值，计算公式为c * (1 - Math.abs((h % 2) - 1))
        // 这里使用Math.abs来确保x的值在0-1之间
        const x = c * (1 - Math.abs((h % 2) - 1));
        // 计算亮度偏移量
        // m是亮度偏移量，用于调整RGB值到0-1范围
        const m = brightness - c;

        // 根据h的范围确定RGB值
        // h的范围是0-6，分别对应RGB的不同组合
        // c是色相的最大值，x是色相的次大值，m是亮度偏移量
        // 计算RGB值
        let r, g, b;
        // 根据色相h的范围确定RGB值
        // 0-1之间的色相对应RGB的不同组合
        if (h >= 0 && h < 1) {  
          [r, g, b] = [c, x, 0]; // 红色最大，绿色次大，蓝色最小
        } else if (h >= 1 && h < 2) { 
          [r, g, b] = [x, c, 0]; // 绿色最大，红色次大，蓝色最小
        } else if (h >= 2 && h < 3) {
          [r, g, b] = [0, c, x]; // 绿色最大，蓝色次大，红色最小
        } else if (h >= 3 && h < 4) {
          [r, g, b] = [0, x, c]; // 蓝色最大，绿色次大，红色最小
        } else if (h >= 4 && h < 5) {
          [r, g, b] = [x, 0, c]; // 蓝色最大，红色次大，绿色最小
        } else {
          [r, g, b] = [c, 0, x]; // 红色最大，蓝色次大，绿色最小
        }

        // 转换为HEX格式
        const toHex = (val) => {
          // 确保值在0-1之间
          const hex = Math.round((val + m) * 255).toString(16);
          // 如果小于16，前面补0
          return hex.length === 1 ? "0" + hex : hex;
        };
        // 将RGB值转换为HEX格式
        colors.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
      }
      // 返回生成的颜色数组
      // 确保颜色数量与系列数量一致
      return colors;
    },