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,
    }
}
相关推荐
Ticnix2 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
小徐_23333 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
码上暴富5 天前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
懒大王95275 天前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
小谭鸡米花6 天前
uni小程序中使用Echarts图表
前端·小程序·echarts
@AfeiyuO7 天前
分类别柱状图(Vue3)
typescript·vue·echarts
Pu_Nine_98 天前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
小白_ysf8 天前
uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)
微信小程序·uni-app·echarts·h5·lime-echart
Chan169 天前
【智能协同云图库】基于统一接口架构构建多维度分析功能、结合 ECharts 可视化与权限校验实现用户 / 管理员图库统计、通过 SQL 优化与流式处理提升数据
java·spring boot·后端·sql·spring·intellij-idea·echarts