1. 从默认主题说起为什么柱状图和legend必须改我团队里有个新同事第一次用ECharts交出来的看板长这样柱状图是默认的蓝紫色柱子顶部方方正正右下角的legend是一排又小又圆的点。功能完整数据没错但放到客户的大屏上一看整体风格直接垮掉。老板只说了一句不够高级剩下全是我来返工。从那以后我就养成了习惯只要是正式项目柱状图和legend十有八九都要自定义。默认情况下ECharts能给到一套还算协调的配色legend图标统一是圆形小色点图例文字是纯黑色柱状图本体是扁平纯色。这个组合并不能说丑但它的问题在于没有个性。它既不能匹配品牌的VI色也不能体现出数据的强弱对比放在数据可视化大屏上更是一眼就能看出是模板效果。1.1 默认样式长什么样以及它的局限性先把默认状态的配置摊开看其实很简单option { xAxis: { type: category, data: [周一, 周二, 周三, 周四, 周五] }, yAxis: { type: value }, series: [ { name: 销售额, type: bar, data: [120, 200, 150, 80, 170] } ] };就这么一段ECharts会自己补上颜色、坐标轴、legend。legend默认取的是全局调色盘color数组里的第一个颜色图标默认是一个圆点。如果你的页面里只有一根柱子这样其实还行。但只要系列一多或者你给柱子加了渐变填充问题就来了柱子的渐变效果很漂亮但legend颜色还是老实的纯色和图例项脱节系列增加到五六个之后默认调色盘的颜色会显得很跳跃没有统一的设计语言legend的圆形小点放在一个商务风浓重的后台里怎么看怎么违和。更麻烦的是ECharts 5的默认样式在动效上很克制柱状图没有光晕、没有立体感。你要做出那种科技感大屏或者可视化报表该有的质感默认配置是远远不够的。1.2 哪些业务场景逼着你不得不自定义我接手过的项目里逼着我去改柱状图和legend样式的主要是这么几类场景第一类是数据可视化大屏。大屏一般背景是深蓝色或者深灰色默认的浅色文字和标准圆点图例放上去对比度不够而且大屏讲究信息密度legend往往要自己控制位置、字体大小和图标样式才能压得住画面。第二类是toB的后台报表系统。这种系统通常有品牌色客户会给一份VI规范表格、按钮、图表全部要统一色值。图表legend如果还是ECharts默认色审查那一关就过不了。第三类是运营活动页或内部工具。这类场景对视觉要求高有时候运营会指定让某个柱状图里某根柱子高亮legend里也要对应体现重点数据的状态。说到底自定义柱状图和legend不是炫技而是真实业务需求。接下来我按顺序拆解先搞定柱状图本体的颜色和形状再解决legend颜色最后处理legend形状全部给到能直接跑的代码和踩坑经验。2. 柱状图本体自定义渐变、圆角和边框优先先处理主角——柱子本身。柱状图的自定义入口非常集中基本都在series.itemStyle里。你只要记住一个原则ECharts里所有视觉元素要么是纯色要么是渐变对象要么是带透明度的复杂填充先理解颜色值是怎么被解析的后续就一通百通。2.1 itemStyle里最常用的颜色控制参数itemStyle里和控制颜色相关的字段主要有这几个参数作用示例值color柱子填充颜色#409effborderColor柱子边框颜色#fffborderWidth柱子边框宽度2borderRadius柱子圆角[10, 10, 0, 0]shadowColor柱子阴影颜色rgba(0,0,0,0.3)shadowBlur柱子阴影模糊大小10一个最简单的自定义柱状图是这样的option { xAxis: { type: category, data: [周一, 周二, 周三] }, yAxis: { type: value }, series: [{ name: 销售额, type: bar, data: [120, 200, 150], itemStyle: { color: #ff7d3c, borderRadius: [6, 6, 0, 0] } }] };这里borderRadius接收一个数组四个值分别对应左上、右上、右下、左下。给柱子顶部加上圆角视觉上会更柔和这也是目前很多大屏模板的常见风格。如果只传一个数字6代表四个角都是6像素但柱状图底部如果也被圆角了看起来会有点浮所以我一般写成[6, 6, 0, 0]只圆顶部。2.2 线性渐变让柱状图摆脱死板纯色柱子看多了就木。尤其在深色大屏上纯色一块会很刺眼而渐变可以让柱子有从底部生长出来的光泽感。ECharts里做渐变要用到echarts.graphic.LinearGradient它接收五个参数x1, y1渐变起始点的相对坐标0到1之间x2, y2渐变结束点的相对坐标colorStops颜色断点数组global是否用全局坐标默认false纵向柱状图最常用的写法是从上到下渐变也就是(0, 0, 0, 1)itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #5b8ff9 }, { offset: 1, color: #30e3ca } ]), borderRadius: [6, 6, 0, 0] }这里的offset是渐变的相对位置0表示顶部1表示底部。上面这段代码的意思是柱子顶部是亮蓝色的#5b8ff9越往下越接近青绿色#30e3ca。很多大屏项目喜欢这种上亮下暗的渐变因为视觉重心在数据上方和柱子的语义方向一致。如果柱子是横向的yAxis变成类目轴渐变方向就要相应改成从左到右(0, 0, 1, 0)否则颜色会拧着来。2.3 圆角、边框和柱宽的配合柱状图好不好看取决于三件事的协调圆角、边框和柱宽。我见过不少新手只顾着调颜色柱子之间挨得太紧或者太宽观感都不对。柱宽由barWidth控制可以写固定像素值也可以写百分比比如40%表示每个类目宽度的40%。柱间距则由barCategoryGap控制默认是20%也就是类目间空隙占类目宽度的20%。我调大屏模板时习惯把barWidth设在30%到50%之间既有呼吸感又不至于太细。边框的设置尤其适合深色背景。深色大屏上柱子加一圈亮色描边能强化科技感itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: rgba(91, 143, 249, 0.9) }, { offset: 1, color: rgba(48, 227, 202, 0.2) } ]), borderColor: rgba(91, 143, 249, 0.6), borderWidth: 1, borderRadius: [4, 4, 0, 0] }这里注意一个细节渐变尾部我用rgba(48, 227, 202, 0.2)也就是带透明度的颜色这样柱子底部不会显得脏。如果两个颜色都不带透明度底部会有一条明显的分界线反而难看。3. legend颜色为什么容易各调各的机制拆解很多人在柱状图本体自定义完以后开始碰legend然后就会发现一个尴尬的现场柱子已经改成渐变了legend却还是那个默认的纯色小圆点颜色和柱子对不上。这不是ECharts的bug而是它的机制决定的。3.1 legend颜色与系列颜色的默认关联规则ECharts里legend项的颜色默认并不是从series.itemStyle里取的而是从系列当前的主颜色取的。对普通纯色柱子来说这个主颜色就是series.itemStyle.color所以你会觉得legend颜色自动跟随柱子颜色。但一旦你给柱子用了渐变对象LinearGradientlegend就不知道怎么取了。ECharts内部拿到的不是一个能直接显示的颜色字符串而是一个渐变对象legend在画小图标时只能退回到全局调色盘color数组里的对应颜色。也就是说柱子的渐变纯属外观没有改掉legend底层要用的颜色身份。你看到legend颜色不对往往是这个原因。3.2 多系列/动态数据下图例颜色失配的根因多系列的时候情况更明显。假设你有两个系列分别叫销售额和利润都用了不同方向的渐变。默认情况下ECharts会把全局调色盘color: [#5b8ff9, #ff7d3c]分配给两个系列legend图标也对应取这两个纯色。如果两个系列的主色和你渐变的顶部颜色接近那看着还算和谐如果不接近比如渐变整体偏暗legend却是个亮色视觉上就会非常分裂。动态数据的场景则是另一个坑。我用setOption去更新数据时如果新数据里系列数量变了legend里的项数也会跟着变但图标颜色可能还是老的。根因是setOption默认是合并模式老的legend样式配置不会被自动清掉。这时候不显示正确颜色很正常。所以要彻底解决legend颜色问题思路应该从依赖自动匹配转变成手动指定。legend不是不能改而是你要告诉它每个图例项显示什么文字、什么颜色、什么形状。下面两个章节我会分别讲颜色和形状的手动指定玩法。4. 自定义legend颜色textStyle、formatter与富文本方案legend的颜色控制分三个层级全局统一、单项统一、单项内富文本混排。需求复杂度不同用的方案也不同。4.1 最简单的全局统一改色如果你只是想改变legend所有文字的颜色比如大屏深色背景上要换成浅色文字一行配置就够legend: { textStyle: { color: #fff } }这个方案对大多数后台页面足够用了。但有个问题一旦你同时设置了legend.data数组并且每一项里也写了textStyle.color那么数组里的配置优先级更高会覆盖全局的textStyle.color。这是我建议你要记住的规则局部永远优先于全局。4.2 用formatter给每个图例项指定独立颜色如果业务要求销售额这个词显示成蓝色利润显示成橙色共用一个富文本单位那就要用legend.formatter配合legend.textStyle.rich。思路是这样的formatter可以接收一个函数函数的参数是当前图例项的name返回值是你要展示的富文本字符串。富文本字符串的语法是{样式名|内容}样式名对应rich里定义的key。我给一个能直接跑的例子legend: { data: [销售额, 利润], formatter: function(name) { const colorMap { 销售额: #5b8ff9, 利润: #ff7d3c }; return {name| name } {value|●}; }, textStyle: { rich: { name: { fontSize: 14, color: #333 }, value: { fontSize: 14, color: #5b8ff9 } } } }这里有个麻烦rich.value里的颜色是写死的我虽然想让销售额和利润后面的圆点分别显示自己的颜色但上面的写法做不到因为rich的样式按key匹配所有图例项复用的是同一个value样式。要真正实现每个图例项颜色不同你需要在formatter里给每一项生成独立key。我是这样处理的legend: { data: [销售额, 利润], formatter: function(name) { const colorMap { 销售额: #5b8ff9, 利润: #ff7d3c }; return { name | name }; }, textStyle: { rich: { 销售额: { color: #5b8ff9, fontSize: 14 }, 利润: { color: #ff7d3c, fontSize: 14 } } } }注意一点rich里key不能是中文。上面这个写法如果直接跑中文key在部分浏览器里会出问题。所以我的建议是用英文别名做key在formatter里做映射formatter: function(name) { const keyMap { 销售额: sales, 利润: profit }; return { keyMap[name] | name }; }, textStyle: { rich: { sales: { color: #5b8ff9, fontSize: 14 }, profit: { color: #ff7d3c, fontSize: 14 } } }这种写法的核心价值在于图例项的文字颜色可以和柱子渐变完全解耦你可以把图例文字设置成品牌色而柱子继续保留渐变色。这个在很多模板页里非常实用。4.3 富文本rich的进阶玩法textStyle.rich能做的不只是颜色还能控制上下标、对齐方式、背景色、边框、内边距等等。比如我想在图例里同时展示数值和单位并且让单位弱化formatter: function(name) { const map { 销售额: { key: sales, value: 120万 }, 利润: { key: profit, value: 45万 } }; const item map[name]; return {name| name } {num| item.value }; }, textStyle: { rich: { name: { color: #333, fontSize: 14 }, num: { color: #999, fontSize: 12 } } }这种文字辅助说明的图例样式在数据大屏上很常见。你不需要额外加DOM节点纯靠富文本就能实现性能也更好。4.4 完整可运行的legend颜色示例综合起来一个同时用上渐变柱子和自定义legend颜色的最小示例长这样option { color: [#5b8ff9, #ff7d3c], legend: { top: 10, data: [销售额, 利润], formatter: function(name) { const keyMap { 销售额: sales, 利润: profit }; return { keyMap[name] | name }; }, textStyle: { rich: { sales: { color: #5b8ff9, fontSize: 14 }, profit: { color: #ff7d3c, fontSize: 14 } } } }, xAxis: { type: category, data: [周一, 周二, 周三] }, yAxis: { type: value }, series: [ { name: 销售额, type: bar, data: [120, 200, 150], itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #5b8ff9 }, { offset: 1, color: rgba(91, 143, 249, 0.2) } ]), borderRadius: [6, 6, 0, 0] } }, { name: 利润, type: bar, data: [80, 120, 90], itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #ff7d3c }, { offset: 1, color: rgba(255, 125, 60, 0.2) } ]), borderRadius: [6, 6, 0, 0] } } ] };跑一下这段代码你会发现legend文字颜色现在跟随系列主色了但图标还是没有跟上依然是默认的小圆点。这就轮到形状出场了。5. 自定义legend形状从内置icon到SVG路径legend形状的自定义是让图表脱离模板感的最重要一步。ECharts从5.x开始legend的icon支持三种类型内置形状名、path://开头的SVG路径、image://开头的图片地址。掌握这三种就掌握了图例形状的全部自由度。5.1 内置形状有哪些各自适用场景内置形状虽然简单但大部分场景够用图标值外观适用场景circle圆形默认最常见rect正方形几何感强的报表roundRect圆角矩形偏卡通风的看板triangle三角形警示、趋势类diamond菱形金融、数据产品常用pin图钉形地图类配合arrow箭头形涨跌、流向类none不显示图标纯文字legend用法很简单直接在legend.data的某一项里写iconlegend: { data: [ { name: 销售额, icon: roundRect }, { name: 利润, icon: diamond } ] }内置形状的问题在于它们都是纯几何图形不能完全贴合你的柱子外观。比如柱子是圆角渐变矩形legend却是菱形语义上并没有那么配套。所以更进阶的做法是用path://。5.2 用path://传SVG路径实现任意形状path://后面跟的是一段SVG path数据。你可能觉得写SVG路径很麻烦但好消息是你不需要自己算直接从图标库复制就行。以阿里巴巴图标库为例下载SVG文件后用文本编辑器打开里面有一行dM...z的路径数据把那串数据拼到path://后面就完事。举个例子我想让legend图标和柱状图一样是一个顶部圆角的柱子形状。可以用下面这个简化路径legend: { data: [ { name: 销售额, icon: path://M4 20 L4 8 L8 8 L8 4 L12 4 L12 8 L16 8 L16 20 Z } ] }这段路径我拆开解释一下M是移动到某个坐标L是画直线到某个坐标Z是闭合路径。上面的坐标组合画出来的就是一根直上直下、顶部也是直角的小柱子。如果你想要顶部圆角path会复杂很多我通常不手写直接用制图工具导出。用path://时有一个非常关键的点路径里的填充色要写currentColor。否则你会发现图例文字颜色变了图标颜色却纹丝不动。完整写法是这样icon: path://M4 20 L4 8 L8 8 L8 4 L12 4 L12 8 L16 8 L16 20 Z, itemStyle: { color: #5b8ff9 }这里的原理是legend在渲染图标时会把itemStyle.color如果没有就是全局color数组对应项作为图标的填充色传进去。currentColor这个SVG关键字表示继承当前上下文的颜色所以能正确吃到ECharts传进来的颜色值。如果路径里写死了fill#000那不管你怎么改legend颜色它都是黑色。5.3 形状和颜色组合的实战示例假设我要做一个大屏页面的图例左侧是销售额用蓝色圆角小柱子图标右侧是利润用橙色菱形图标。同时文字颜色也各自对应。配置可以写成这样legend: { top: 10, itemWidth: 16, itemHeight: 16, data: [ { name: 销售额, icon: path://M4 20 L4 8 L8 8 L8 4 L12 4 L12 8 L16 8 L16 20 Z, itemStyle: { color: #5b8ff9 } }, { name: 利润, icon: diamond, itemStyle: { color: #ff7d3c } } ], formatter: function(name) { const keyMap { 销售额: sales, 利润: profit }; return { keyMap[name] | name }; }, textStyle: { rich: { sales: { color: #5b8ff9, fontSize: 14 }, profit: { color: #ff7d3c, fontSize: 14 } } } }这里要重点说明的是legend.data里那一项itemStyle.color。它只影响legend图标的颜色不影响柱子的渐变。所以你现在有了三个可以独立控制的颜色维度柱子颜色由series[].itemStyle.color控制legend图标颜色由legend.data[].itemStyle.color控制legend文字颜色由formattertextStyle.rich控制三个维度解耦以后你的图标设计自由度会非常大。比如可以让柱子和legend图标用同一色系但不同明度或者让legend全部统一成白色只靠形状区分系列这些都是常见的设计手法。6. 一个同时搞定柱状图、legend颜色和形状的完整案例前面几节讲的都是零件这一节拼成一个整机。我模拟一个实际需求某数据可视化大屏要展示三个区域的销售额柱子用渐变legend图标分别是圆角矩形、圆形、三角形并且每个图例项的文字颜色与系列主色一致。数据是动态的后期会用setOption更新。6.1 需求描述与整体设计三个系列华东、华南、华北。设计稿要求华东柱子是蓝绿色渐变legend图标是圆角矩形华南柱子是橙红色渐变legend图标是圆形华北柱子是紫色渐变legend图标是三角形三个图例文字颜色分别对应主色legend放在图表右上角图标大小要稍微大一点方便在大屏上看到。基于上面的设计我要在option里同时处理series数组里每个系列的itemStyle、legend.data里每个项的形状颜色、formatter返回的富文本。6.2 完整option代码const option { backgroundColor: #0f1c2e, color: [#36d1dc, #ff7d3c, #a26cf5], legend: { top: 10, right: 20, itemWidth: 16, itemHeight: 16, data: [ { name: 华东, icon: roundRect, itemStyle: { color: #36d1dc } }, { name: 华南, icon: circle, itemStyle: { color: #ff7d3c } }, { name: 华北, icon: triangle, itemStyle: { color: #a26cf5 } } ], formatter: function(name) { const keyMap { 华东: east, 华南: south, 华北: north }; return { keyMap[name] | name }; }, textStyle: { rich: { east: { color: #36d1dc, fontSize: 14 }, south: { color: #ff7d3c, fontSize: 14 }, north: { color: #a26cf5, fontSize: 14 } } } }, xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月], axisLine: { lineStyle: { color: #fff } }, axisLabel: { color: #fff } }, yAxis: { type: value, splitLine: { lineStyle: { color: rgba(255, 255, 255, 0.2) } }, axisLabel: { color: #fff } }, series: [ { name: 华东, type: bar, data: [120, 200, 150, 80, 170], barWidth: 12, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #36d1dc }, { offset: 1, color: rgba(54, 209, 220, 0.1) } ]), borderRadius: [4, 4, 0, 0] } }, { name: 华南, type: bar, data: [90, 130, 200, 110, 140], barWidth: 12, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #ff7d3c }, { offset: 1, color: rgba(255, 125, 60, 0.1) } ]), borderRadius: [4, 4, 0, 0] } }, { name: 华北, type: bar, data: [60, 90, 120, 170, 90], barWidth: 12, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #a26cf5 }, { offset: 1, color: rgba(162, 108, 245, 0.1) } ]), borderRadius: [4, 4, 0, 0] } } ] };这段代码我实际跑过效果是深蓝背景上有三组渐变柱子legend在右上角华东是圆角小方块华南是实心小圆点华北是三角形文字颜色和三个柱子的主色一一对应。整体视觉风格统一和默认的蓝柱圆点legend完全是两个档次。6.3 效果验证与参数微调代码跑起来以后我会按这几个维度检查legend图标颜色是否和柱子主色一致。如果某个图标还是默认色优先检查legend.data里那项有没有写itemStyle.color以及路径有没有currentColor。图标大小。大屏上16像素有时还是偏小可以调大到itemWidth: 20, itemHeight: 20。但不要太大否则图例项之间的间距会失衡。图例是否换行。图例项多了以后会自动换行默认itemGap是10。如果排版很挤可以调整legend.itemGap到20。legend位置。top、right直接配像素或百分比都行。大屏项目我习惯用百分比比如top: 5%这样分辨率变了图标不会跑偏。微调阶段我还有一个习惯用setOption把数据抽出去。动态更新的时候不用重新毁掉整个图只更新series和legend里会变的部分。7. 我在实际项目中踩过的坑和总结的经验自定义这块代码本身不复杂但组合起来全是坑。我把实战中遇到过的问题和我最终的处理方式整理出来希望能帮你少走弯路。7.1 图例图标不显示或不更新的几个原因我排查过最多的一个问题是配置了legend.data里的icon但图例怎么都不变。第一种原因legend.data里某项的name和series里的name不一致。ECharts匹配图例和系列是严格按name来的写错一个字都匹配不上。匹配不上时图例项不会消失而是变成纯文本没有图标。第二种原因icon的值拼错了。比如roundRect是首字母小写r如果你写成RoundRectECharts会把它当成不认识的形状名结果也不显示图标。大小写很敏感。第三种原因itemWidth或itemHeight被设成了0。有时为了做纯文字legend我会把itemWidth: 0这时候如果后续想恢复图标容易忘记改回来。第四种原因用path://加载SVG路径时路径本身有语法错误。尤其是我直接从图标库复制的路径里如果含有fill、stroke这些属性需要删掉只保留d里的内容。路径字符串里还不要有换行和多余空格。7.2 legend颜色与tooltip、颜色数组的连带问题自定义了legend之后别忘了tooltip里也有颜色小圆点。这个圆点默认取系列的颜色如果你柱子用了渐变tooltip里的圆点也会出现和legend一样的失配问题。我一般会在tooltip的formatter里手动处理颜色tooltip: { trigger: axis, formatter: function(params) { const colorMap { 华东: #36d1dc, 华南: #ff7d3c, 华北: #a26cf5 }; let html ; params.forEach(function(item) { html span styledisplay:inline-block;width:10px;height:10px;border-radius:50%;background: colorMap[item.seriesName] ;margin-right:5px;/span; html item.seriesName item.value br/; }); return html; }, extraCssText: max-width: 280px; white-space: normal; }这里顺带解决了一个高频问题ECharts tooltip内容一长就会溢出容器。上面的extraCssText里设置white-space: normal再配合自己在formatter里加br/换行就能让tooltip自动换行。我见过很多同事在这上面卡住实际上ECharts的tooltip默认是不换行的一定要在extraCssText里写white-space: normal才能生效。7.3 动态数据下setOption的注意事项用setOption动态更新数据时legend的坑也比较集中。场景一图表第一次渲染时数据只有两个系列第二次setOption变成了三个系列。这时候如果更新时没有给legend重新传data数组新系列的legend项不会自动出现。我的办法是每次更新都重传legend.data并且用setOption(option, true)开启notMerge模式让旧的配置完全被覆盖。场景二更新数据时我不想让legend闪烁但又必须改颜色。解决办法是给legend的某些项加selected状态保持用户在页面上的交互选择。不要每次更新都粗暴地重置否则用户刚点了隐藏华东下一次数据刷新它又自己显示出来。场景三动态数据下柱状图的渐变颜色如果也要跟着变比如数据超过某个阈值柱子变红那你需要在每次更新数据时重新生成LinearGradient对象不能复用上一次的。因为ECharts的渐变对象内部缓存了颜色断点复用的话只会显示第一次的颜色。一个简单办法是写一个函数根据value返回itemStylefunction getBarItemStyle(value) { const color value 150 ? #ff4d4f : #36d1dc; return { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: color }, { offset: 1, color: rgba(255, 255, 255, 0.1) } ]), borderRadius: [4, 4, 0, 0] }; }然后每个data项里单独写data: [ { value: 120, itemStyle: getBarItemStyle(120) }, { value: 200, itemStyle: getBarItemStyle(200) } ]这样每根柱子都能根据数值动态换色legend不受影响因为legend颜色仍然由legend.data[].itemStyle.color单独控制。7.4 关于性能和扩展的小建议最后说两个工程层面的建议。一是图例项不要太多。legend项数超过8个时视觉效果会变得很碎。如果系列确实很多可以考虑用legend.type: scroll让图例可以滚动避免全部挤在一个平面。二是把颜色值抽成常量。项目里如果多处使用同一套颜色我建议维护一个themeColors.js导出主色、辅助色、渐变起止色。这样改设计方案时不用满项目里找#36d1dc这种魔法值。这个习惯尤其适合同时维护多个大屏项目的场景。在实际操作中我想额外分享一点要验证legend图标颜色和柱子是否真正吻合最有效的办法不是看渲染结果截图而是用ECharts官方示例编辑器把option贴进去鼠标hover每一个legend项看它们是否能正确控制对应系列。如果hover时高亮的系列颜色和legend图标不一致那一定是哪个环节的颜色对象引用没有对上按前面说的三颜色维度解耦逐个排查很快就能定位。这套方法我用了很久希望对你也有用。