★ FEATURED ARTICLE 做前端可视化这几年ECharts 几乎是我绘制报表和图表时的默认选择。图表一多最先让人头疼的往往不是数据接口而是颜色默认的蓝绿橙红紫一个月就看腻了产品说“这个蓝色不够高级”客户要求“必须要用我们品牌色”新来的同事把一个十六进制色值复制到了四个文件里结果只改了一处整套图表颜色花得没法看。ECharts 的color配置项看起来只是“一个颜色数组”但它背后是一整套颜色体系全局调色盘、系列颜色、数据项颜色、渐变、透明度、边框、阴影、视觉映射、文字标签每一项都直接影响最终效果。这篇文章我想把这套颜色配置项完整梳理一遍从最基础的color数组用法到数据里单个图形的独立配色再到渐变和视觉映射的进阶玩法最后把我在实际项目中踩过的颜色相关的坑一起列出来希望能帮你省下一点排查时间。1. 全局调色盘ECharts 颜色体系的入口1.1 color 配置项怎么用默认色盘长什么样ECharts 的color是 option 最顶层的一个配置项类型是一个数组数组里的每一项就是一个颜色。它的作用是给图表“兜底”配色当你没有给某个系列、某个数据单独设置颜色时图表会按照这个数组的顺序把颜色依次分配给每个数据项。官方默认的调色盘是这组颜色color: [#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4, #ea7ccc]这组颜色是 ECharts 团队专门调过的蓝色系、绿色系、橙色系、红色系都有相邻颜色之间的色相差异比较大正常图表一眼看过去不会混淆。但问题也很现实如果所有报表都用这套默认色读者看到第三张图就会觉得“这是系统默认生成的”品牌的辨识度就没了。实际项目中我通常这样配置全局色盘option { color: [#2f6fed, #19c99e, #ff9f1c, #f25c54, #8b5cf6, #22d3ee], // 其他配置 };需要注意的一点是color数组里的颜色数量可以少于数据项数量一旦数据项数量超过色盘颜色数量ECharts 会从色盘开头重新循环取值。比如你有 10 个柱子但色盘里只有 6 个颜色第 7 个柱子就会重新使用第 1 个颜色。如果希望所有数据项颜色都不重复要么准备足够多的颜色要么就给每个数据项单独设置颜色。提示全局color是“兜底”而不是“强制”。一旦你在series、data、itemStyle里设置了颜色优先级会逐级覆盖全局色盘就不会生效了。这条规则几乎所有颜色不生效的问题都跟它有关。1.2 十六进制、RGB、RGBA 与 HSL颜色格式怎么选ECharts 的颜色配置项支持 CSS 里常见的所有颜色写法这一点很多初学者容易忽略。常见的格式有以下几种// 十六进制 #2f6fed // RGB rgb(47, 111, 237) // RGBA带透明度 rgba(47, 111, 237, 0.6) // HSL hsl(220, 84%, 56%) // HSLA hsla(220, 84%, 56%, 0.6) // 直接写英文颜色名 red我在实际开发里用得最多的是十六进制和 RGBA。十六进制适合写品牌色、主色RGBA 适合做叠加效果比如柱状图的 hover 背景、面积图的半透明填充区域。HSL 我用的相对少一些但在做色板生成、需要按色相统一调整饱和度或亮度时HSL 比十六进制方便得多因为它可以直接改一个参数就能让颜色变亮或变暗。如果你们项目里有设计规范建议把品牌色统一抽成一个常量文件再用引用的方式填进 ECharts 配置里避免在多个图表配置里手抄颜色值。我见过太多因为“少写一个字母”或者“把 0 写成了 o”导致的颜色不对的问题这属于完全可以通过工具链规避的低级错误。2. 数据级与系列级颜色配置图表配色的核心战场2.1 data 里的 itemStyle.color给每个柱子单独上色全局色盘解决了“整体不冲突”的问题但很多场景下我们需要“突出某一个数据”。最常见的是柱状图里把本月的数据标成品牌色其他历史数据用灰色或者饼图里把某个占比最大的扇区单独放大并标红。这种需求要用的配置项是series.data里单个数据项的itemStyle.color。我写一个完整的示例option { xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: { type: value }, series: [{ type: bar, data: [ { value: 120, itemStyle: { color: #d3d8e8 } }, { value: 200, itemStyle: { color: #d3d8e8 } }, { value: 150, itemStyle: { color: #d3d8e8 } }, { value: 280, itemStyle: { color: #2f6fed } }, { value: 210, itemStyle: { color: #d3d8e8 } }, { value: 260, itemStyle: { color: #d3d8e8 } } ] }] };这段代码的效果是4 月这根柱子是醒目的蓝色其他月份都是浅灰色视觉上“4月是重点”这个信息一下子就能传达出来。饼图也类似比如只突出某一项series: [{ type: pie, data: [ { value: 335, name: 直接访问, itemStyle: { color: #2f6fed } }, { value: 310, name: 邮件营销, itemStyle: { color: #19c99e } }, { value: 234, name: 联盟广告, itemStyle: { color: #ff9f1c } } ] }]这里的itemStyle.color会覆盖全局色盘里同位置的颜色所以饼图的每个扇区都能精确控制。2.2 颜色回调函数数据驱动的动态配色除了写死颜色itemStyle.color还支持传入一个回调函数。这个函数会在图表渲染时被调用参数是数据项的相关信息。利用这个特性可以实现“超过阈值变红、低于阈值变绿”的自动配色。series: [{ type: bar, data: [120, 200, 150, 80, 170, 260], itemStyle: { color: function(params) { // params.value 是当前柱子的数值 if (params.value 200) { return #f25c54; // 红色超标 } else if (params.value 150) { return #ff9f1c; // 橙色预警 } return #19c99e; // 绿色正常 } } }]回调函数里常用的参数有params.value、params.dataIndex、params.seriesIndex等。如果data里放的是对象params.value会拿到整个对象这时候可以自己取需要的字段。还有一个容易被忽略的细节itemStyle.color的回调函数是可以接收params.data里自定义字段的。比如数据里带上一个status字段然后根据状态返回不同颜色这种写法在仪表盘、状态监控类的图表里特别实用data: [ { value: 120, status: normal }, { value: 240, status: warning }, { value: 300, status: error } ], itemStyle: { color: function(params) { var statusMap { normal: #19c99e, warning: #ff9f1c, error: #f25c54 }; return statusMap[params.data.status] || #999; } }注意itemStyle.color里面的对象形式渐变色和回调函数形式不要搞混。回调里返回的仍然是颜色值而对象形式是渐变色配置两者都能用但写法完全不同后面渐变色部分我会详说。2.3 折线图与面积图lineStyle、areaStyle 的颜色搭配柱状图和饼图的配色关注的是itemStyle到了折线图颜色配置就分散到了三个地方线的颜色lineStyle.color、数据点颜色属于itemStyle.color、面积填充颜色areaStyle.color。最基础的一条折线配置series: [{ type: line, data: [120, 200, 150, 80, 170, 260], lineStyle: { color: #2f6fed, width: 2 }, itemStyle: { color: #fff, borderColor: #2f6fed, borderWidth: 2 }, areaStyle: { color: rgba(47, 111, 237, 0.15) } }]这段配置的重点在于折线主体用了深蓝色数据点用白色填充加蓝色描边面积区域用 15% 透明度的蓝色。这样既保证了线条的清晰度又让面积区域不抢戏。这里有一个我用了很久的技巧面积图的areaStyle.color用和线条同色系但透明度降低的颜色比如主色加alpha通道比直接换一个颜色要协调得多。因为同色系透明度渐变会给人一种“从线到面自然过渡”的感觉不同色系容易显得杂乱。比如主色是#2f6fed面积色就用rgba(47, 111, 237, 0.2)这里的rgba四个值分别是 R、G、B 和透明度转换的时候要注意十六进制的#2f6fed对应 RGB 是(47, 111, 237)。3. 渐变色与纹理让图表没那么素的进阶方案3.1 LinearGradient 线性渐变参数逐一拆解如果所有图表都是纯色时间久了确实单调。渐变色能让柱状图、面积图在视觉上更有层次感这也是很多“看起来比较贵”的图表的常见做法。ECharts 里设置渐变色的标准写法是使用echarts.graphic.LinearGradientitemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #2f6fed }, { offset: 1, color: rgba(47, 111, 237, 0.1) } ]) }这个方法有四个关键参数需要理解x、y渐变起始点的相对坐标取值 0 到 10表示最左侧/最上方1表示最右侧/最下方。x2、y2渐变结束点的相对坐标。colorStops颜色节点数组offset表示颜色所在的位置同样取值 0 到 1color就是该位置的颜色。前面例子里的(0, 0, 0, 1)表示从顶部开始、到底部结束也就是垂直渐变适合柱状图。如果要水平渐变就写成(0, 0, 1, 0)对角线渐变可以写成(0, 0, 1, 1)。我实际项目里做柱状图渐变时通常会用“顶部深、底部浅”的垂直渐变这样柱子的头部颜色饱满底部逐渐变淡视觉重心在上方整体显得挺拔option { series: [{ type: bar, data: [120, 200, 150, 280, 170, 260], itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #2f6fed }, { offset: 1, color: rgba(47, 111, 237, 0.05) } ]) } }] };做面积图的时候也一样把areaStyle.color换成 LinearGradient从线条位置往下渐变会让区域更有“沉浸感”。这是很多数据大屏作品里常见的处理方式。3.2 RadialGradient 径向渐变饼图中心向外扩散的效果径向渐变在 ECharts 里用echarts.graphic.RadialGradient适合给饼图、环形图、散点图增加光感。它的参数和线性渐变类似但前三个参数表示圆心的相对位置和半径color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [ { offset: 0, color: #fff }, { offset: 1, color: #2f6fed } ])参数含义分别是圆心相对 x 坐标、圆心相对 y 坐标、渐变半径。这个配置的效果是图形中心是白色边缘是蓝色有一种“从中心点亮”的感觉。饼图里我常用这种径向渐变会让扇区看起来更有立体感。但要注意场景如果图表是数据报表、需要精确对比数值的渐变会稍微干扰人对面积的判断这种情况我建议还是用纯色。渐变更适合用于汇报展示、大屏等追求视觉效果的地方。3.3 纹理填充与其他颜色对象被低估的细节除了渐变色itemStyle.color还支持图片纹理填充虽然用得不多但某些场景下很出效果。写法是把color设成图片 URLitemStyle: { color: { image: data:image/png;base64,..., repeat: repeat } }image可以是图片地址也可以是 base64 编码repeat控制平铺方式取值和 CSS 的background-repeat一样。这个玩法我试过的场景有限最典型的是地图或柱状图里加一个斜纹纹理来区分“计划值”和“实际值”——用斜纹柱子和实色柱子并排对比即使打印成黑白文档也能一眼分清。纹理填充比纯色多了一层信息表达适合需要支持黑白打印的报表场景。4. 全局联动颜色坐标系、文字、视觉映射的 color 配置4.1 坐标轴线、坐标轴文字、分割线的颜色图表配色不只有“图形本身”坐标轴、文字、分割线的颜色对整体观感影响也很大。很多图表面板默认是深色背景配浅色文字如果不改坐标轴颜色文字和背景混在一起根本看不清。坐标轴相关的颜色配置项主要有三个option { xAxis: { axisLine: { lineStyle: { color: #666 } }, axisLabel: { color: #888 }, splitLine: { lineStyle: { color: rgba(0, 0, 0, 0.06) } } } };axisLine.lineStyle.color坐标轴线的颜色。深色背景上通常要调浅一些比如#aaa。axisLabel.color坐标轴刻度文字的颜色。这个我经常看到有人漏掉导致坐标轴文字在深色背景下看不清楚。splitLine.lineStyle.color网格线的颜色。网格线颜色尽量浅用rgba的低透明度会比纯色柔和很多。yAxis的配置和xAxis完全一样不再重复。我通常在项目里会封装一个公共函数把axisLabel.color、splitLine.lineStyle.color统一处理避免每个图表里都写一遍。4.2 visualMap 视觉映射让颜色随数据大小自动变化visualMap是 ECharts 里非常强大的颜色映射组件。它可以针对散点图、热力图、地图等图形让数据值的大小自动对应到颜色深浅。而它的核心配置就是在inRange里放一个颜色数组。visualMap: { min: 0, max: 100, inRange: { color: [#d3d8e8, #2f6fed] // 从浅到深 } }这段配置的意思是数值从 0 到 100颜色从浅色渐变到深色。inRange.color数组不限于两个颜色可以放三四个比如inRange: { color: [#19c99e, #ff9f1c, #f25c54] }这样低值显示绿色中值橙色高值红色。做地图数据、热力图、散点图时这种颜色映射能直接把数据的空间分布特征呈现出来比逐项设置颜色高效得多。visualMap还有一个常用场景是分段显示。如果你希望颜色不是连续渐变而是分类显示比如 0-60 是一个颜色60-80 是一个颜色可以用pieces来代替inRangevisualMap: { type: piecewise, pieces: [ { min: 80, label: 优秀, color: #19c99e }, { min: 60, max: 80, label: 良好, color: #ff9f1c }, { max: 60, label: 一般, color: #f25c54 } ] }4.3 文字标签颜色与富文本 rich颜色配置的隐藏角落柱状图的顶部数值、饼图的名称、图例的文字这些地方的颜色也有独立的配置项最常用的是label.colorseries: [{ type: pie, label: { color: #333, fontSize: 14 } }]如果只需要让“某个数据项”的标签颜色不一样可以在data项的label里再单独指定data: [ { value: 335, name: 直接访问, label: { color: #f25c54 } }, { value: 310, name: 邮件营销, label: { color: #333 } } ]标签里还支持富文本rich在rich里可以定义样式来突出数据比如label: { formatter: {a|{b}}\n{c}, rich: { a: { color: #2f6fed, fontSize: 16, fontWeight: bold }, c: { color: #333, fontSize: 14 } } }rich里的color和普通color作用一样只是写法上嵌套在样式对象里。注意富文本样式只有在formatter里用{样式名|文本}的方式引用才会生效没有引用到的样式不会被渲染。5. 常见问题与排查技巧实录5.1 设置了 color 却不生效的几种情况我在技术支持群里见过太多人问“我明明设置了颜色为什么没变化”总结下来最常见的就三类第一类把颜色写在了series.color上但这其实不是 ECharts 标准支持的配置位置。全局用option.color单个数据用data[i].itemStyle.color系列整体风格用series.itemStyle.color或series.lineStyle.color。写错层级图表就会按默认方案渲染。第二类被更高优先级的配置覆盖了。比如全局color设置了红色但某个数据项data里写了蓝色或者visualMap生效时强制映射了颜色。此时不是你写错了是优先级更高的一方“赢”了。排查思路就是从上到下逐层检查全局 → 系列 → 数据。第三类渐变色写错了。echarts.graphic.LinearGradient里colorStops的offset必须从 0 到 1 递增如果你写了两个offset: 0或者中间跳过了某个关键位置渐变效果可能完全不是预期那样甚至出现整块区域没有颜色的情况。为了直观排查我通常会在浏览器 DevTools 里选中图表对应的 canvas 元素用取色器对比实际渲染颜色。大部分找不出原因的问题用取色器一看就不是“我以为的那个颜色”马上能定位到是配置层级的关系。5.2 渐变色方向不对坐标参数理解偏差关于渐变方向我见过不少例子是“本想要从左到右渐变结果从上到下渐变”。原因很简单LinearGradient的前四个参数是“起始相对坐标”和“结束相对坐标”(0, 0, 0, 1)是垂直方向(0, 0, 1, 0)是水平方向。如果你的图形区域不是标准的正方形这里的相对坐标依然有效但视觉上斜向渐变可能会和预期有偏差。调试这个问题的办法是以一个已知的柱状图为基准设置(0, 0, 0, 1)观察是不是顶部深、底部浅再改(0, 0, 1, 0)观察是不是左侧深、右侧浅。搞一次就记住了以后不用再猜。注意图表容器尺寸变化会影响渐变的视觉长度但不会改变相对方向。如果你在响应式布局里发现渐变比例不对优先检查容器的宽度和高度是不是被撑开了。5.3 两个容易被忽略的周边小问题第一关于在 IntelliJ IDEA 里写 JSP 时发现color scheme没有对 JSP 内嵌代码做完整配色的情况。这个问题和 ECharts 本身无关但确实会影响开发体验。我处理的办法是优先把所有图表配置写在独立的.js文件里JSP 里只引入和调用这样就能正常使用 JS 的颜色方案JSP 标签里的 Java 代码用默认配色也能接受。如果是非改不可的情况可以在 IDE 的Editor - Color Scheme - File Types里找到 HTML/JSP 对应的 Scope手动调整嵌入式代码的前景色和背景色。第二关于框选brush 组件后的颜色问题。启用brush后框选区域会有一层默认的高亮颜色这个颜色在brushStyle里可以配置brush: { brushStyle: { color: rgba(47, 111, 237, 0.15) } }同时如果框选后需要支持“右击清除框选并恢复颜色”可以监听contextmenu事件调用brushComponent.clearBrush或通过dispatchAction的takeGlobalCursor来关闭框选模式。这属于颜色之外的事件处理但和“框选后图表颜色变化”的体验是绑定的处理不好很容易让用户以为颜色配置有问题。我遇到的一个真实案例是用户框选柱状图后柱子颜色变成了深色高亮他以为是我们图表配色 bug实际是brushStyle.color默认的遮罩色太深。后来我把透明度调到了 0.1并在右击时清除选框问题就消失了。5.4 常用颜色配置速查表配置位置配置项作用优先级全局color调色盘列表未单独设置颜色时的默认色最低系列series.itemStyle.color整个系列的图形颜色中数据项series.data[i].itemStyle.color单个数据图形的颜色高折线series.lineStyle.color折线的颜色中面积series.areaStyle.color面积填充颜色支持渐变中数据点series.itemStyle.borderColor散点/折点描边颜色中标签series.label.color标签文字颜色中坐标轴xAxis.axisLabel.color坐标轴刻度文字颜色中网格splitLine.lineStyle.color分割线颜色中视觉映射visualMap.inRange.color按数值映射的颜色范围高框选brush.brushStyle.color框选遮罩颜色高这张表我建议你直接存下来。排查颜色问题时从下往上看优先级从上往下看兜底逻辑基本能解决 90% 以上的颜色疑惑。最后说个我自己的小习惯做图表配置时我一般会把全局色盘固定成一个项目统一的品牌色数组然后只在需要强调的数据项上单独覆盖颜色。这样既能保持整套图表的整体感又不会在需要突出重点时显得无能为力。颜色配置这东西规则不复杂但坑确实不少写的时候多留一份心排查的时候按优先级往下捋大部分问题都能很快定位。
阅读完成 · 觉得有帮助？
