Echarts 颜色重复问题

默认 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,
    }
}
相关推荐
Chan1616 小时前
【智能协同云图库】基于统一接口架构构建多维度分析功能、结合 ECharts 可视化与权限校验实现用户 / 管理员图库统计、通过 SQL 优化与流式处理提升数据
java·spring boot·后端·sql·spring·intellij-idea·echarts
zhangzuying102619 小时前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
java水泥工2 天前
基于Echarts+HTML5可视化数据大屏展示-学生综合成绩评价系统大屏
spring boot·echarts·html5
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-茶叶种植大数据溯源平台
大数据·echarts·html5
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
java水泥工4 天前
基于Echarts+HTML5可视化数据大屏展示-旅游智慧中心
数据分析·echarts·html5
不吃香菜的猪6 天前
uniapp中使用echarts并且支持pc端的拖动、拖拽和其他交互事件
uni-app·echarts·交互
Lsx-codeShare6 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
java水泥工8 天前
基于Echarts+HTML5可视化数据大屏展示-惠民服务平台
前端·echarts·html5
Lsx_10 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·vue.js·echarts