You need to enable JavaScript to run this app.
导航

自定义配色方案

最近更新时间2023.06.27 15:21:52

首次发布时间2022.05.13 16:00:07

1. 概述

自定义配色方案,是指您可以在系统默认提供的可视化图表配色方案之外,按照公司、团队或业务的规范、需求,使用自定义的配色规范。当您需要统一多个图表配色风格时,可以添加自定义配色并快速应用于可视化图表。

2. 快速入门

2.1 不绑定数据项配色方案

第一步:以柱状图为例,点击自定义配色
image.png
第二步:在弹出窗口中新增配色方案
image.png
第三步:依序添加颜色,图表中图例颜色将依序取配色板中的颜色
image.png
第四步:修改方案名称,保存配色方案
第五步:在「编辑颜色」中选择该配色方案
image.png

2.2 绑定数据项配色方案

第一步:选择需要的维度和指标,创建好需要的图表
image
第二步:展开图表栏下方编辑颜色选项,选择自定义配色
image
第三步:选择新增配色方案,勾选绑定数据项
image
第四步:将对应的数据项与颜色绑定,手动输入后按回车可添加数据项,或通过下载模板批量上传,配置完成后点击保存
image
第五步:在编辑颜色中选择之前绑定的配色方案即可应用,同时如果改变图表条件,数据项也会和配置的颜色绑定,直接应用即可
image

3.功能介绍

3.1 配色方案管理

已创建的配色方案支持编辑和删除。点击「自定义配色」,在弹出窗口中,将鼠标移至对应配色方案上,即可点击编辑或删除,进行对应操作。
image.png

3.2 修改配色方案

3.2.1 未绑定数据项时的效果

如果您增删改颜色,那么所有使用了该配色方案的图表,都会重新应用配色方案,举例如下:

  • 更改颜色

    • 绿色改为红色;那么所有使用了该配色方案的图表原来使用了该绿色的图例颜色变为红色。
  • 删除颜色

    • 原来有红绿蓝三种颜色,绿色被删除;那么所有使用了该配色方案的图表重新应用该配色,红蓝两色按序循环应用。
  • 增加颜色

    • 原来有红绿蓝三种,增加了黄色;那么所有使用了该配色方案的图表重新应用该配色,红绿蓝黄按序循环应用。

3.2.2 绑定数据项时的效果

如果进行了增删改操作,那么所有使用了该配色方案的图表,都会重新应用配色方案,举例如下:

(1)更改颜色

  • 当前图表的配色方案分为红绿蓝三种颜色

image

  • 现在将「成本计算」数据项对应的绿色改为黄色

image

  • 保存后所有使用了该配色方案的图表中,「成本计算」对应的图例颜色更改为黄色

image

(2)更改数据项

  • 当前图表的配色方案分为红黄蓝三种颜色

image

  • 现在将黄色绑定的数据项更改为「利润」,蓝色更改为「成本计算」

image

  • 保存后所有使用了该配色方案的图表中,「利润」展示为黄色,「成本计算」展示为蓝色

image

(3)增加对应关系

  • 所有使用了该配色方案的图表中 ,满足条件的数据项按照新的对应关系重新着色

(4)删除对应关系

  • 所有使用了该配色方案的图表中 ,对应数据项按照「未绑定颜色的数据项」设置来着色

3.3 批量上传配色

平台支持批量上传配色,快速制定配色方案。
在编辑/添加配色方案时,点击下载模板,下载批量配色模板。
image.png
在表格中依次填写颜色编号并保存。支持hex值(如#00000000)和rgba格式(如rgba(0,0,0,0.9))。
image.png
在配色编辑界面点击批量上传,选择该配色文件上传。
image.png
平台将自动解析文件中填写的颜色编号,形成配色方案。确认后保存即可。
image.png

3.4 公共配色方案

在新建或编辑配色方案时,可以勾选「作为公共配色方案」。
image.png
勾选并保存后,该配色将成为公共配色方案。项目中其他用户可以查看并使用该配色方案。
在「编辑颜色」中切换至「公共」tab,即可看到保存的公共配色方案。
image.png