交互图表颜色可通过配置项修改，核心是定位目标元素并设置对应color属性；ECharts支持全局、单系列及单点配色，Plotly、AntV、Chart.js等库逻辑类似但语法不同；需兼顾可访问性与视觉协调。
交互图表的颜色可以通过配置项直接修改，不同图表库操作方式略有差异，但核心逻辑一致：找到对应的数据系列或组件的 color 属性进行设置。
明确要改哪部分的颜色
交互图表中常见可调色部位包括：数据点（柱子、折线节点、散点）、图例文字、坐标轴标签、背景、网格线、提示框（tooltip）边框等。修改前先确认目标元素，比如想让“销售额”柱状图显示为蓝色，就需定位到该数据系列的 color 配置。
ECharts 中自定义颜色的常用方式
ECharts 支持全局配色与局部配色两种方式：
-
全局配色：在初始化图表时，通过 option.color 设置一个颜色数组，图表会按顺序自动分配给各数据系列。例如：
color: ['#1890FF', '#52C418', '#FAAD14'] - 单系列配色：在 series 数组中为指定系列添加 itemStyle.color（适用于柱状图、散点图等），或 lineStyle.color（折线图线条），或 areaStyle.color（面积图填充）
- 单个数据点配色：在 data 数组中为某条数据对象单独设置 itemStyle.color，实现差异化高亮
Plotly / AntV / Chart.js 等库的通用思路
虽然语法不同，但底层逻辑相通：
- Plotly：在 trace.marker.color 或 trace.line.color 中填入十六进制、RGB 或 CSS 颜色名
- AntV（如 G2）：通过 encode.color 绑定字段，或用 style.fill/style.stroke 直接指定颜色
- Chart.js：在 dataset 中设置 backgroundColor、borderColor、pointBackgroundColor 等属性
小技巧：保持可访问性与视觉协调
改色不是越鲜艳越好，还需注意：
- 避免使用色盲用户难区分的组合（如红绿色系并列），可借助工具如 ColorBlindr 模拟查看
- 深色背景上慎用浅灰文字，确保对比度 ≥ 4.5:1
- 若图表用于多主题（如暗黑/浅色模式），建议用 CSS 变量或动态计算颜色值，而非写死
