ECharts颜色配置实战：从调色板到visualMap的完整指南

用ECharts画图的人，几乎都干过这么一件事：改颜色。改颜色的姿势，我见过最朴素的是往color数组里塞十六进制值，塞完发现柱状图全变成同一种蓝，然后开始怀疑配置写错了。这不奇怪。ECharts的颜色体系远不止一个color数组，从全局调色板到单个数据项，从线性渐变到按数值映射，从静态主题到交互高亮，每一层都有独立的配置入口，而且层级之间的优先级经常被搞混。

这篇文章我就把实际项目里真正用得上的ECharts颜色配置全部梳理一遍。会覆盖全局调色板、系列与数据项级颜色、线性/径向渐变、visualMap颜色映射、label与tooltip颜色、暗色主题联动、交互高亮与框选工具条配色这些场景，每个部分都带上可复制的配置代码和踩坑记录。适合刚接触ECharts、被各种color字段绕晕的新手，也适合想系统排查配色问题的老手。

1. 全局调色板与系列级颜色：最基础但也最容易搞混的层级关系

1.1 color数组的取色规则与循环机制

先说最基础的全局调色板。ECharts的option.color是整个图表的默认颜色池，它的类型是数组，里面每一项代表一种颜色。当你某个系列没有单独指定颜色时，ECharts会按顺序从这个数组里取色。

option = { color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'], series: [ { type: 'bar', data: [120, 200, 150] }, { type: 'bar', data: [80, 130, 220] }, { type: 'bar', data: [60, 90, 180] } ] };

上面的配置里，三个系列会依次拿到蓝色、绿色、黄色。很多人会忽略一个问题：如果系列数量超过color数组的长度，ECharts不会报错，而是从头开始循环取色。比如上面只配了5种颜色，但图表里有7个系列，那第6个系列会再次使用蓝色，第7个会再次使用绿色。

这个循环机制在日常开发中还挺坑的。做数据看板时经常是后端动态返回多个系列的折线图，前端写死了5个颜色，结果数据一多就出现不同系列同色，辨认困难。我的建议是：color数组尽量配到10个以上，覆盖业务最极端情况；如果图表数量确实可能超过10，那就要考虑用后面的color函数方案了。

另外一个实用技巧：ECharts 5.x 支持把color配置成一个函数。这个函数会在每次取色时被调用，参数里带有系列的序号、名称等信息，你可以按业务规则动态返回颜色，比如让指定名称的系列永远用品牌主色，其余系列按索引取色。

color: function (params) { const brandColorMap = { '直接访问': '#c23531', '搜索引擎': '#2f4554', '邮件营销': '#61a0a8' }; if (brandColorMap[params.name]) { return brandColorMap[params.name]; } const palette = ['#5470c6', '#91cc75', '#fac858', '#ee6666']; return palette[params.seriesIndex % palette.length]; }

这个写法适合系列名称固定、颜色需要长期稳定的场景。注意这里的params在不同图表类型里字段略有差异，但seriesIndex和name基本都有，调试时先打印出来看一眼再写逻辑，比自己瞎猜稳妥。

1.2 series.color对全局配置的覆盖优先级

简单说：全局option.color是兜底，series.color针对单个系列做覆盖，而数据项内部的itemStyle.color拥有最高优先级。

我用一个实际场景说明。饼图的每个扇区如果不单独写颜色，默认会按全局调色板顺序分配；但如果你希望某个扇区永远是“警示红”，就应该在那个数据项上显式指定颜色，而不是试图通过调整调色板顺序来“碰巧”让它落在红色上。调色板顺序一变，所有扇区的颜色都跟着变，太脆弱了。

series: [{ type: 'pie', data: [ { value: 335, name: '正常' }, { value: 310, name: '异常', itemStyle: { color: '#ff4d4f' } }, { value: 234, name: '未知' } ] }]

这个层级关系在排查颜色问题时很有用。如果发现某个柱子颜色不对，先想清楚：是全局调色板给的，还是系列层覆盖了，还是数据项层指定了。按照这个顺序逐层定位，90%的“颜色不对”问题都能快速找到源头。

1.3 color循环取色对折线图的影响

折线图里，color不仅影响线的颜色，还影响图例（legend）的标记颜色，以及数据点（symbol）的颜色。新手经常遇到一个情况：明明设置了series.color，但图例标记颜色没变。这是因为折线图的图例标记跟随的是lineStyle.color，如果你在系列里只写了顶层color，图例和折线可能表现不一致。

解决办法有两种。一种是用系列里的lineStyle.color显式指定：

series: [{ type: 'line', data: [15, 20, 36, 10, 10, 20], lineStyle: { color: '#3ba272' }, itemStyle: { color: '#3ba272' }, symbol: 'circle' }]

另一种是保持顶层color不变，但通过全局color函数统一控制。实际项目我推荐第一种，代码直观，后续维护的人一眼就能看懂这条线是什么颜色。注意折线图的itemStyle.color是数据点（圆点）的颜色，lineStyle.color是线条颜色，两个都设好，线和点才一致。

2. 单个数据项的颜色定制：柱状图/饼图逐项配色的正确姿势

2.1 data数组里直接写itemStyle

同一个系列里，不同数据项要显示不同颜色，这是柱状图和饼图里最常见的需求。比如柱状图展示月度销量，利润超标的月份用红色突出，正常月份用蓝色。做法是在data数组的每一项里写itemStyle.color。

option = { series: [{ type: 'bar', data: [ { value: 120, itemStyle: { color: '#5470c6' } }, { value: 180, itemStyle: { color: '#5470c6' } }, { value: 260, itemStyle: { color: '#ff4d4f' } }, { value: 150, itemStyle: { color: '#5470c6' } } ] }] };

这里有个容易被忽略的点：如果你开启了legend图例，柱状图默认会按系列名显示一个图例项，而不会为每个柱子单独生成图例。所以逐项改颜色不会影响图例结构，这点和饼图不同。饼图里每个数据项自带name，每个扇区天然对应一个图例项，颜色改了图例标记也会跟着变。

这种方案适合数据项数量不多、颜色规则明确的场景。如果柱子有几十根且颜色规则复杂，建议把判断逻辑提取成函数，不要在data里写死一长串颜色值。

2.2 用函数根据数据值动态返回颜色

如果柱子颜色要根据数值大小动态决定，直接在data里写死就不好维护了。ECharts 5.x 里，itemStyle.color支持回调函数，参数里包含dataIndex、value、data等信息，可以在函数里写判断逻辑。

option = { series: [{ type: 'bar', data: [120, 60, 220, 180, 90, 260], itemStyle: { color: function (params) { // params.value 是当前柱子的值 // params.dataIndex 是当前柱子的索引 if (params.value >= 200) { return '#ff4d4f'; } else if (params.value >= 100) { return '#faad14'; } else { return '#52c41a'; } } } }] };

用这个方法，数据还是普通数组就行，不用每个都包成对象。回调函数的性能也不用担心，图表初始化时统一计算一次，数据量不大时完全无感。

这里有一个实战细节：params.value在不同图表里结构不一样。比如柱状图是单个数值，散点图是[x, y]数组，箱线图甚至是多个值组成的数组。写判断前最好先打印一下params看结构，我吃过这个亏，用params.value[1]去判断柱状图直接拿了个undefined。

2.3 框选场景下数据项颜色的稳定性问题

搜索热词里有个“框选右击事件”，这种交互在数据密集型图表里很常见。启用brush框选后，用户会框选一片数据区域，然后右键弹出自定义菜单做进一步处理。

颜色在这里容易出什么问题呢？框选后如果给被选中的数据项临时换色，而筛选逻辑依赖颜色来区分“选中/未选中”，就会出现颜色错乱。比如默认用itemStyle.color给柱子染色，框选后你用emphasis或select换色，但数据项本身的自定义颜色会被这些状态颜色覆盖或叠加，导致恢复后颜色对不上。

我的建议是：不要用“改颜色”这种方式来表达选中状态，优先用selectedMode+selectedStyle或brushStyle的选区背景色来表达。如果业务上确实需要右击后高亮某些数据项，也要把“原始颜色”存一份，重置时再读回来，不要依赖图表内部的状态推算。另外，框选选区本身的样式在brush组件的brushStyle里配置，很多人找半天找不到选区半透明色在哪改，就是因为它属于brush，不属于itemStyle。

3. 渐变、纹理与阴影：让图表信息层级更清晰的进阶配色手段

3.1 线性渐变的方向参数图解

渐变是图表里非常有存在感的配色手段。柱状图顶部到尾部一个线性渐变，立体感立刻出来。ECharts里线性渐变色是通过echarts.graphic.LinearGradient创建的：

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 1, color: '#2f80ed' } ])

这里的四个数字参数是很多人第一次接触时卡住的地方：前两个x, y表示渐变的起点坐标，后两个x2, y2表示终点坐标。坐标值是相对值，范围是 0 到 1，不是像素。(0, 0)是图形左上角，(1, 1)是右下角。

所以(0, 0, 0, 1)表示从顶部到垂直向下的方向渐变，顶部用offset: 0的颜色，底部用offset: 1的颜色。如果想让柱子底部深、顶部浅，把颜色顺序反过来就行，坐标参数不用动。

offset数组可以不只有两个元素，你可以定义多段颜色，实现类似“红橙黄绿”的分段渐变效果：

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#ff4d4f' }, { offset: 0.5, color: '#faad14' }, { offset: 1, color: '#52c41a' } ])

这个多段渐变用来表达风险等级非常直观，比如低风险绿色、中风险黄色、高风险红色。

3.2 径向渐变适合的图表类型

径向渐变是以圆心向外扩散的颜色过渡，适合饼图、环形图、散点图。切一个饼图时，给扇区加一点径向渐变，层次感会比纯色好很多。

color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#fad0c4' }, { offset: 1, color: '#f5576c' } ])

RadialGradient的前三个参数是：圆心的x、圆心的y、渐变半径。这里的x和y同样是相对值，0.5 表示正中心，半径 1 表示覆盖整个图形。注意第一个参数不是半径，是圆心的横向位置，我见过有人以为第一个参数是半径，写了个很大的数字，结果渐变圆心跑到图形外面去了。

环形图内部是空心的，径向渐变如果圆心偏移太大，会在视觉上出现明显的新月形明暗差，看起来像渲染错误。但调整好的径向渐变，能让环形图中心的孔洞看起来更立体，比如加一点阴影色。

3.3 纹理填充与图片背景

除了颜色渐变，ECharts还支持图片纹理填充。这个功能适合柱状图想用一张图片作为柱子背景的场景，或者地图区域用纹理表达某种材质感。

const textureImg = new Image(); textureImg.src = 'data:image/png;base64,...'; option = { series: [{ type: 'bar', data: [120, 200, 150], itemStyle: { color: { image: textureImg, repeat: 'repeat' } } }] };

使用图片纹理时要注意加载时机。Image对象必须已经加载完成，color才能正确引用；如果图片还没加载完就渲染图表，纹理经常显示不出来，控制台也不报错。这个问题排查起来很隐蔽，我在项目里遇到过，最后发现是img.onload回调里没有调用chart.setOption。

如果不想处理图片加载时序，也可以直接用 CSS 的背景图做类似效果，但那样就无法跟随数据高亮、选中状态变色。所以纹理填充还是要在 ECharts 层做。

4. visualMap颜色映射：让数值大小变成颜色深浅

4.1 连续型visualMap的inRange配色

visualMap是ECharts里做颜色映射的核心组件，它能把数据值映射成不同的颜色深浅。典型的场景是热力图、地图、散点图——数据越大颜色越深，越小颜色越浅。

option = { visualMap: { type: 'continuous', min: 0, max: 100, inRange: { color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'] } }, series: [{ type: 'scatter', data: [ [10, 20, 15], // x, y, value [30, 40, 80], [50, 60, 45] ] }] };

这里inRange.color数组里的颜色顺序很重要：数组第一个颜色对应min，最后一个颜色对应max，中间颜色按线性插值过渡。所以浅色放前面、深色放后面，数据越大颜色越深，读起来直观。

散点图里，数据的第三个维度数值会自动被visualMap读取吗？不一定。visualMap默认取数据的最后一个维度作为映射值，如果你的数据只有两列（x, y），那数值就是 y 值本身；有三列以上时，最后一个当作映射值。如果实际要映射的不是最后一个字段，用dimension指定维度索引：

visualMap: { dimension: 3, min: 0, max: 100, inRange: { color: ['#fff', '#f00'] } }

这里的dimension从 0 开始，如果第4列才是要映射的值，就写 3。

4.2 分段型visualMap的分类配色

业务上更多时候我们要的不是连续渐变，而是明确的区间分类。比如把销售额分成“低、中、高”三档，各用一种颜色。这时用type: 'piecewise'：

visualMap: { type: 'piecewise', pieces: [ { min: 80, label: '高', color: '#ff4d4f' }, { min: 50, max: 80, label: '中', color: '#faad14' }, { max: 50, label: '低', color: '#52c41a' } ] }

分段型visualMap有一个需要注意的优先级问题：pieces里的color优先级非常高，它会直接覆盖系列里itemStyle.color设置的静态颜色。也就是说，你柱状图数据项里写死了某个颜色，但只要开启了visualMap，实际看到的颜色是pieces里定义的，很容易让人误以为itemStyle没生效。

所以如果同一个图既要visualMap做区间映射，又想让某些特定项显示固定颜色，光靠配置项解决不了，需要在数据结构上想办法，或者用visualMap的文本标签区分。

4.3 show:false时依然生效的坑

visualMap组件可以隐藏，很多人以为隐藏了就不再生效。事实恰恰相反，show: false只隐藏了左侧的滑块/分段图例，颜色映射逻辑仍然在运行。如果你的系列已经手动设置了颜色，但实际效果还是按数值深浅显示，先看看是不是代码里残留了一个visualMap没删干净。

排错时可以先注掉visualMap看看颜色是否恢复，就能快速定位问题。同样地，有些场景我们不希望展示映射图例，但确实需要颜色映射功能，这时show: false反而派上用场，算是有意为之的用法。

5. 文字、标签与提示框的颜色细节：看不见的问题最耗时间

5.1 label颜色与富文本rich混排配色

图表上的文字标签颜色配置项叫label.color，但实际项目里我遇到更多的问题集中在富文本rich的混排上。

需求场景经常是这样的：柱状图上方的标签，既要显示数值，又要显示“万”这个单位，而且单位和数字的颜色不一样。用formatter配合rich就能实现：

label: { show: true, position: 'top', formatter: '{value|{c}}\n{unit|单位：件}', rich: { value: { color: '#333', fontSize: 14, fontWeight: 'bold' }, unit: { color: '#999', fontSize: 10, lineHeight: 18 } } }

这里{value|...}和{unit|...}是富文本样式占位符，rich里定义每个占位符的颜色、字号、行高。需要注意，label.color设置了默认颜色后，rich中的颜色仍然会覆盖它。所以如果你发现某个标签文字颜色死活改不过来，检查一下formatter里是不是用了rich占位符，被rich拦截了。

另外，饼图的标签颜色建议和扇区颜色做区分，浅色扇区上放深色文字、深色扇区上放浅色文字，避免标签和背景糊在一起。这个可以用回调函数控制：

label: { color: function (params) { // params.data 里有当前扇区数据 const colors = ['#fff', '#333']; return params.dataIndex % 2 === 0 ? colors[0] : colors[1]; } }

5.2 tooltip的深色/浅色适配

tooltip的文字颜色和背景色也是颜色体系的一部分。很多人做暗色主题时只改了backgroundColor，结果tooltip弹出来还是白底黑字，和暗色页面格格不入。

tooltip相关颜色有三个关键配置：

tooltip: { backgroundColor: 'rgba(30, 34, 45, 0.85)', borderColor: '#334155', textStyle: { color: '#e2e8f0', fontSize: 12 } }

backgroundColor控制背景，borderColor控制弹层边框，textStyle.color控制文字颜色。提醒一下，textStyle是多层配置共用的字段名，在tooltip里它控制弹层文字，在label里控制标签文字，在legend里控制图例文字，不要搞混。

5.3 编辑器主题引发的“颜色失效”假象

这里插一个搜索热词相关的排查经验：有人在 IntelliJ IDEA 里写前后端混编项目时，发现color scheme里找不到 jsp 的代码着色选项，整段 jsp 内嵌 JS 的代码文字颜色很浅、几乎看不清，于是以为是 ECharts 配置没生效。

实际上这是两条独立问题线：IDE 编辑区的代码文字颜色，由 IDE 的 Color Scheme 和对应语言插件控制；图表渲染在 canvas 上的颜色，才由 ECharts 配置决定。前者没配好，最多影响你写代码时的观感和效率，不会影响图表运行效果。排查时先分清楚，图表区域颜色不对找 ECharts，编辑区代码文字看不清找 IDE 插件和配色方案，别混在一起浪费时间。

6. 暗色主题切换的整套颜色联动：不是只改一个backgroundColor就完事

6.1 echarts.init主题参数与全局背景

暗色主题是后台管理系统常见的风格需求。最省事的方式是在init时指定 ECharts 内置的暗色主题：

const chart = echarts.init(document.getElementById('main'), 'dark');

第二个参数传入'dark'就用上了 ECharts 内置暗色主题。但内置主题的配色不一定匹配你的业务，所以大多数项目还是自定义。

自定义暗色主题的关键是全局背景透明化：

option = { backgroundColor: 'transparent', color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c'] };

backgroundColor设为transparent后，图表背景由父容器的 CSS 控制，这样页面整体背景调整时，图表会自动跟随，不用每次同步改 ECharts 背景色。这是暗色主题联动的基础。

6.2 轴线、分割线、图例文字在暗色下的配套调整

全局背景改成暗色之后，如果轴线、分割线、文字还是默认的深灰色，就会出现“图表黑乎乎一片，文字看不清”的问题。需要配套调整下面这几个部件的颜色：

option = { backgroundColor: 'transparent', color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c'], textStyle: { color: '#cbd5e1' }, legend: { textStyle: { color: '#cbd5e1' } }, xAxis: { axisLine: { lineStyle: { color: '#475569' } }, axisLabel: { color: '#cbd5e1' }, splitLine: { show: false } }, yAxis: { axisLine: { show: false }, axisLabel: { color: '#cbd5e1' }, splitLine: { lineStyle: { color: '#334155', type: 'dashed' } } } };

这套配置里，轴线颜色#475569是灰蓝色，在暗色背景下弱化存在感但不完全消失；文字用#cbd5e1是亮灰，保证可读性；分割线用#334155加虚线，既有参考线的作用又不喧宾夺主。

我整理过一套暗色主题常驻调色板，适配暗色背景的对比度比较稳：

记住一个核心原则：暗色主题下，所有文字、线条、图例的亮度都要同步上调，只把背景改暗是不够的。可以先改完背景，然后逐个部件过一遍，确认文字可读、分割线可见、图例清晰，再继续调下一个项目。

7. emphasis/select交互状态与工具条配色：别让高亮状态破坏整体观感

7.1 emphasis高亮状态颜色配置

鼠标悬浮到柱子上时，柱子会进入高亮状态，默认颜色会变亮。这个高亮效果在emphasis下配置，很多新手不知道，以为柱子悬浮变色是 ECharts 自动处理的，就找不到入口。

series: [{ type: 'bar', emphasis: { itemStyle: { color: '#ff4d4f' }, label: { show: true, color: '#fff' } } }]

配置了emphasis.itemStyle.color后，鼠标悬浮时柱子会变成你指定的颜色。实际项目中，高亮色一般比原始色更亮或饱和度更高，可以用浅色。如果不想自己算浅色，可以配置emphasis.focus为'self'，配合itemStyle提供的内置状态，但这样灵活性不够。

需要注意，如果柱状图的数据项已经用itemStyle.color指定了颜色，emphasis高亮色会覆盖数据项颜色。也就是说，数据项指定了“品牌蓝”，悬浮高亮配了“警示红”，悬浮时柱子会变红色，这是正常的覆盖行为，不是 bug。

7.2 select选中状态与图例的联动颜色

开启selectedMode后，用户点击柱子可以选中它，选中状态的颜色在select下配置：

series: [{ type: 'bar', selectedMode: 'single', select: { itemStyle: { color: '#f56c6c' } } }]

这里有个细节：selectedMode有'single'和'multiple'两种。单选时同时最多选中一个数据项，多选时点击多个数据项都保留选中状态。选中状态的视觉反馈如果不明显，用户会以为没点中，所以select.itemStyle.color最好选一个和原始颜色有足够差异的颜色。

图例的selectedMode和系列数据的selectedMode是两个东西。图例控制的是“系列的显示/隐藏”，数据项的selectedMode控制的是“数据项的选中状态”，别把两者混在一起调。

7.3 toolbox框选工具与选区样式颜色

搜索热词里提到“框选右击事件”，框选工具的视觉配色也要归到颜色体系里。ECharts 的toolbox里配置brush功能后，框选区域默认会有一层半透明蓝色，这个颜色在brush组件的brushStyle里修改：

option = { toolbox: { feature: { brush: { type: ['rect', 'polygon', 'lineX', 'lineY'], brushStyle: { borderWidth: 1, borderColor: '#409eff', color: 'rgba(64, 158, 255, 0.15)' } } } }, brush: { brushStyle: { borderWidth: 1, borderColor: '#409eff', color: 'rgba(64, 158, 255, 0.15)' } } };

框选区域的填充颜色一般用低透明度，这样既能看清选区范围，又不遮挡底层数据。borderColor则用清晰一点的品牌色，让选区边缘容易辨认。

框选后如果再配合右键事件弹自定义菜单，常见做法是监听brushSelected事件，从事件参数里拿到选中的数据信息，再触发自定义右键菜单。这个流程里，框选数据的颜色确认一个原则：不要动态去改数据项的itemStyle.color来表达选中状态，而是直接通过brushStyle的半透明层和边框来表达，数据项颜色保持稳定，这样后续取消框选、重绘、数据刷新都不容易出问题。

我在实际项目里的习惯是：把 ECharts 图表的颜色配置单独抽成一个theme.js文件，把所有颜色值收敛成命名变量，比如brandColor、warningColor、dangerColor、textPrimary、textSecondary、axisLine之类。这样切换暗色/浅色主题时，只需要换这份颜色变量映射表，图表配置不用动。另外，每次用setOption更新状态时，尽量只传要变化的颜色字段，比如series[0].itemStyle.color，让 ECharts 走增量合并，不要整个option重新铺一边，否则很容易把用户交互状态和选中状态全部重置掉，图表渲染效率也会受影响。这些经验是我在多个后台项目里反复踩坑才沉淀下来的，希望能帮你少走弯路。