1. 为什么要在同一个图表里混搭柱状图和折线图做过数据看板的人大概都遇到过这种场景老板或者产品经理指着屏幕说“这个销售额用柱子表示增长率用线画出来放一张图里我要一眼看明白。”听起来简单但真动手的时候问题就来了——两个系列的数据量级可能差着十万八千里一个在几千几万一个在零点几柱子和折线叠在一起谁遮谁、谁压谁、左右轴怎么分全是坑。这个需求在电商、金融、运营、物联网监控等领域极其常见。比如月度营收柱状与同比增长率折线、各渠道获客量柱状与转化率折线、服务器请求量柱状与响应延迟折线。把两组甚至多组不同量纲的数据塞进同一张图核心目的只有一个让读者在同一个视觉坐标系里快速建立“量”与“率”之间的关联。如果拆成两张图读者得来回对照信息传递效率直接打对折。ECharts 作为国内使用最广的可视化库之一天然支持这种混合图表。它的series数组里可以放任意类型的系列柱状图用type: bar折线图用type: line再配合双 Y 轴就能把量级差异巨大的数据和谐地放在一起。但“能放”和“放得好”是两码事。我见过太多人直接把两个系列往series里一扔结果折线被柱子挡住、Y 轴刻度对不上、图例点击后布局错乱最后只能截图拼图交差。这篇文章就是来解决这些实际问题的。我会从设计思路讲起把双轴配置、系列顺序、样式调优、交互联动这些关键点拆开揉碎再给出一套可以直接复制粘贴的完整配置。无论你是刚接触 ECharts 的新手还是已经用过但总调不出理想效果的老手都能从里面找到能直接用的东西。下面所有代码和参数都经过实际项目验证你可以放心“抄作业”。2. 核心设计思路与方案选型2.1 单轴还是双轴先算量级差拿到需求第一件事不是打开编辑器写代码而是把两组数据的量级算清楚。假设柱状图数据是月度销售额范围在 8000 到 25000 之间折线图数据是增长率范围在 -0.05 到 0.15 之间。如果强行共用一个 Y 轴折线会变成贴着 X 轴的一条直线完全看不出波动。这时候必须上双 Y 轴。判断标准很简单两组数据的最大值之比超过 5:1或者一组是绝对值、另一组是百分比就果断用双轴。如果比值在 3:1 以内比如柱状是订单量1000-5000折线是客单价80-200其实可以共用一个轴但要在图例和轴名称上标注清楚单位避免误读。双轴配置的核心是yAxis数组里放两个对象然后每个series通过yAxisIndex指定自己用哪根轴。这里有个细节默认情况下ECharts 会把第一个 Y 轴放在左侧第二个放在右侧。但如果你希望折线用左轴、柱子用右轴只需要调整yAxisIndex的值即可轴的位置由数组顺序决定不由系列类型决定。2.2 系列顺序决定谁压谁ECharts 的渲染顺序遵循“后声明的系列画在上面”的原则。也就是说如果series数组里柱状图在前、折线图在后折线会覆盖在柱子上面。这通常是想要的效果因为折线更细被柱子挡住就看不见了。但反过来如果你希望柱子突出、折线作为背景参考那就把折线放前面。我个人的习惯是折线永远放在series数组的最后一位。这样无论后面怎么增删系列折线始终在最上层不会被意外遮挡。另外柱状图可以设置barGap: -100%来实现多组柱子完全重叠但混合图表里一般不需要保持默认即可。2.3 颜色与透明度的心理暗示柱子和折线放在一起颜色搭配直接影响可读性。一个常见的错误是给柱子和折线用相近的色系比如深蓝柱配浅蓝线结果读者分不清哪个是哪个。我的经验是柱子用低饱和度、带透明度的填充色折线用高饱和度、不透明的实线。比如柱子用rgba(84, 112, 198, 0.6)折线用#e6a23c这种对比强烈的橙色。透明度让柱子不会太“重”折线则因为线条细、颜色亮自然跳出来。还有一个细节柱子的边框可以设成和填充色同色但更深一点宽度 1px这样在浅色背景上轮廓更清晰。折线则建议加smooth: true让线条柔和一些但不要过度平滑否则会扭曲数据趋势。smooth: 0.3左右比较合适既美观又不失真。3. 双 Y 轴配置的完整实操3.1 基础配置骨架先看一个最小可运行的双轴混合图表示例。这段代码可以直接丢进 ECharts 的在线编辑器里跑option { tooltip: { trigger: axis, axisPointer: { type: cross } }, legend: { data: [月销售额, 增长率] }, xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: [ { type: value, name: 销售额万元, position: left, axisLabel: { formatter: {value} 万 } }, { type: value, name: 增长率, position: right, axisLabel: { formatter: {value}% }, splitLine: { show: false } } ], series: [ { name: 月销售额, type: bar, yAxisIndex: 0, data: [12000, 15000, 18000, 14000, 22000, 25000], itemStyle: { color: rgba(84, 112, 198, 0.6), borderColor: #5470c6, borderWidth: 1 }, barWidth: 40% }, { name: 增长率, type: line, yAxisIndex: 1, data: [0.05, 0.08, 0.12, -0.03, 0.15, 0.10], smooth: 0.3, lineStyle: { width: 3, color: #e6a23c }, itemStyle: { color: #e6a23c }, symbol: circle, symbolSize: 8 } ] };这段配置里几个关键点yAxis是数组两个对象分别对应左右轴series里每个系列用yAxisIndex明确指向自己的轴右侧轴的splitLine关掉了避免和左侧轴的网格线重叠造成视觉混乱。tooltip的axisPointer设为cross鼠标悬停时会显示十字准星方便同时读取两个系列的值。3.2 轴刻度对齐的隐藏技巧双轴图表最让人头疼的问题之一是左右轴的刻度线对不齐。比如左轴刻度是 0、5000、10000、15000、20000右轴是 -5%、0%、5%、10%、15%网格线错位看起来非常别扭。ECharts 默认不会自动对齐两个轴的刻度需要手动干预。解决办法是给两个轴设置相同的splitNumber或者用interval强制指定刻度间隔。更稳妥的做法是用min、max和interval三个参数把两个轴的范围和步长都固定下来。比如左轴min: 0, max: 25000, interval: 5000右轴min: -0.05, max: 0.15, interval: 0.05这样两个轴都分成 5 段网格线自然对齐。但这里有个坑如果数据动态变化写死的 min/max 可能导致柱子超出绘图区域。所以更通用的方案是用splitNumber统一分段数让 ECharts 自己算范围。实测下来两个轴都设splitNumber: 5大多数情况下能对齐偶尔有偏差也不会太明显。3.3 轴名称与单位的摆放轴名称的位置和格式直接影响图表的专业度。左轴名称建议放在轴顶部用nameLocation: end并且加nameGap: 15让它和轴线保持距离。右轴同理。单位不要写在轴名称里而是通过axisLabel.formatter加到每个刻度值后面这样更清晰。另外如果增长率有负数右轴的axisLabel要处理好负号显示。ECharts 默认会显示负号但如果你用了自定义 formatter记得把负值的情况也考虑进去。比如formatter: function(value) { return (value * 100).toFixed(0) %; }这样 -0.03 会显示成 -3%比直接显示 -0.03 直观得多。4. 样式调优与交互细节4.1 柱状图的宽度与圆角柱子的宽度直接影响图表的呼吸感。barWidth设成40%是个比较安全的默认值但如果 X 轴类别很多比如 12 个月可以降到30%甚至25%避免柱子挤在一起。如果类别很少比如 3 个季度可以加到50%让柱子更饱满。圆角是提升现代感的小技巧。itemStyle.borderRadius: [4, 4, 0, 0]可以让柱子顶部圆润但注意这个属性在 ECharts 5 里才支持数组形式老版本只支持数字。如果项目里用的是 ECharts 4圆角只能用borderRadius: 4统一设置四个角效果会打折扣。还有一个容易被忽略的点柱子的基线。默认情况下柱子从 Y 轴的 0 刻度开始画但如果你的数据都是正数且最小值远大于 0柱子会显得很短。这时候可以设yAxis.min: dataMin让轴从数据最小值开始但这样会扭曲柱子的比例感慎用。我的建议是保持 0 基线通过调整barWidth和颜色来优化视觉效果。4.2 折线的符号与标签折线上的数据点符号symbol默认是实心圆大小 4px。在混合图表里我建议把symbolSize调到 8 左右让点更明显方便读者定位具体数值。如果数据点很密集比如 30 天可以把symbol: none隐藏符号只保留线条避免视觉杂乱。数据标签label要不要显示取决于图表用途。如果是给领导看的汇报图建议只在折线上显示标签柱子不显示因为柱子数量多标签会重叠。折线标签可以用label: { show: true, position: top, formatter: {c}% }但要注意如果两个折线点靠得太近标签会打架。ECharts 没有自动避让标签的功能只能手动调labelLayout或者干脆不显示。4.3 图例交互与系列联动图例legend是混合图表里最容易出问题的地方。默认情况下点击图例会隐藏对应的系列但双轴图表里隐藏一个系列后另一个系列的轴不会自动调整导致图表看起来“空了一半”。更麻烦的是如果隐藏了柱状图折线图的 Y 轴还在右侧左侧轴空着非常难看。解决办法是用legend.selectedMode: multiple允许多选同时监听legendselectchanged事件在隐藏系列时动态调整轴的显示。比如当柱状图被隐藏时把左轴的show设为false右轴移到左侧。这个逻辑需要写一点额外的代码但效果很值得。如果不想写代码至少把legend.selectedMode设成single一次只能显示一个系列避免轴错乱。另外图例的图标icon可以自定义让柱子和折线的图例图标更直观。比如柱子用roundRect折线用line这样即使图例文字被截断读者也能通过图标分辨。5. 常见问题与排查技巧实录5.1 折线被柱子遮挡怎么办这是最高频的问题。原因前面说过是series数组顺序不对。把折线系列移到数组最后一位即可。如果已经放在最后但还是被遮挡检查柱子的z属性是否被手动设成了很大的值。ECharts 里z值越大越靠上柱子和折线的默认z都是 2但柱子因为面积大视觉上会“压住”折线。可以给折线设z: 10强制置顶。还有一种情况是柱子的透明度太低折线从柱子后面透出来但颜色混在一起。这时候要么提高折线的lineStyle.width要么给折线加一层白色描边lineStyle: { shadowBlur: 0, borderColor: #fff, borderWidth: 1 }让它在任何背景上都清晰可见。5.2 双轴刻度对不齐的排查步骤刻度对不齐通常有三个原因一是两个轴的splitNumber不一致二是其中一个轴设了min/max而另一个没设三是数据范围差异太大ECharts 自动计算的刻度间隔无法整除。排查时按这个顺序来检查两个yAxis对象的splitNumber是否相同建议都设 5。检查是否有轴设了min或max如果有另一个轴也要设对应的值保证分段数一致。如果还是对不齐用interval强制指定刻度间隔但要注意数据变化时可能超出范围。提示ECharts 5.0 之后支持alignTicks: true属性开启后会自动对齐两个轴的刻度。如果你的项目用的是 5.x 版本直接在yAxis里加这个属性就行省去手动计算的麻烦。5.3 数据量级差异过大导致折线“贴底”如果柱状图数据是几万折线数据是零点几即使双轴分开折线在右侧轴上也可能因为范围太大而看起来像一条直线。这时候要检查右轴的min和max是否合理。ECharts 默认会从 0 开始但增长率这种数据不需要从 0 开始可以设min: dataMin让轴从数据最小值开始这样折线的波动会被放大更容易观察。但min: dataMin有个副作用如果数据里有 0 或者负值轴的范围会包含 0折线还是会贴底。更精细的做法是用min: function(value) { return value.min - 0.02; }手动留出一点边距让折线不贴边。5.4 移动端适配的注意事项混合图表在手机屏幕上显示时双 Y 轴的轴名称和刻度标签很容易挤在一起。建议在移动端把轴名称隐藏name: 只保留刻度值并且把axisLabel.fontSize调到 10 左右。图例可以改成底部横向排列legend.bottom: 0避免遮挡图表区域。另外移动端的tooltip触发方式建议改成trigger: item因为手指点击不像鼠标悬停那么精确axis触发容易误触。如果一定要用axis把axisPointer.type设成shadow视觉反馈更明显。6. 完整可复用的配置模板把前面所有要点整合起来下面是一份可以直接用于生产环境的配置模板。你可以把它保存成mixedChartOption.js在项目里引入后根据实际数据替换xAxis.data和series.data即可。// mixedChartOption.js export function getMixedChartOption(chartData) { const { categories, barData, lineData, barName, lineName } chartData; return { tooltip: { trigger: axis, axisPointer: { type: cross, crossStyle: { color: #999 } }, formatter: function(params) { let result params[0].axisValue br/; params.forEach(function(item) { const unit item.seriesType bar ? 万元 : %; const value item.seriesType bar ? item.value : (item.value * 100).toFixed(1); result item.marker item.seriesName value unit br/; }); return result; } }, legend: { data: [barName, lineName], bottom: 0, icon: roundRect }, grid: { left: 3%, right: 4%, bottom: 12%, top: 10%, containLabel: true }, xAxis: { type: category, data: categories, axisPointer: { type: shadow }, axisLabel: { fontSize: 12 } }, yAxis: [ { type: value, name: 销售额, nameTextStyle: { fontSize: 12, padding: [0, 0, 0, 20] }, position: left, splitNumber: 5, axisLabel: { fontSize: 12, formatter: {value} 万 }, splitLine: { lineStyle: { type: dashed, color: #e0e0e0 } } }, { type: value, name: 增长率, nameTextStyle: { fontSize: 12, padding: [0, 20, 0, 0] }, position: right, splitNumber: 5, axisLabel: { fontSize: 12, formatter: function(value) { return (value * 100).toFixed(0) %; } }, splitLine: { show: false } } ], series: [ { name: barName, type: bar, yAxisIndex: 0, data: barData, barWidth: 40%, itemStyle: { color: rgba(84, 112, 198, 0.6), borderColor: #5470c6, borderWidth: 1, borderRadius: [4, 4, 0, 0] }, emphasis: { itemStyle: { color: rgba(84, 112, 198, 0.9) } } }, { name: lineName, type: line, yAxisIndex: 1, data: lineData, smooth: 0.3, z: 10, lineStyle: { width: 3, color: #e6a23c, shadowBlur: 0 }, itemStyle: { color: #e6a23c, borderColor: #fff, borderWidth: 1 }, symbol: circle, symbolSize: 8, emphasis: { scale: 1.5 } } ] }; }这份模板里我把tooltip的 formatter 写成了函数自动根据系列类型加不同的单位避免手动拼接字符串出错。grid的bottom设成12%是为了给底部的图例留空间。柱子的borderRadius用了数组形式如果你的 ECharts 版本低于 5.0改成数字4即可。调用的时候只需要传入数据对象import * as echarts from echarts; import { getMixedChartOption } from ./mixedChartOption; const chart echarts.init(document.getElementById(chart)); const data { categories: [1月, 2月, 3月, 4月, 5月, 6月], barData: [12000, 15000, 18000, 14000, 22000, 25000], lineData: [0.05, 0.08, 0.12, -0.03, 0.15, 0.10], barName: 月销售额, lineName: 增长率 }; chart.setOption(getMixedChartOption(data));7. 几个我踩过的坑和最后的小技巧第一个坑是数据更新时的轴范围残留。如果你用setOption更新数据但没设notMerge: trueECharts 会保留上一次的轴范围导致新数据的柱子被截断。解决办法是在setOption的第二个参数里传{ notMerge: true }或者每次更新前先chart.clear()。但clear()会清掉所有配置需要重新setOption完整配置性能开销大。折中方案是用setOption(option, { replaceMerge: [series] })只替换系列数据保留轴配置。第二个坑是图例点击后的轴错乱。前面提过隐藏柱状图后左轴空着很难看。我的做法是监听legendselectchanged事件动态调整轴的show属性chart.on(legendselectchanged, function(params) { const barSelected params.selected[月销售额]; const lineSelected params.selected[增长率]; chart.setOption({ yAxis: [ { show: barSelected }, { show: lineSelected, position: barSelected ? right : left } ] }); });这段代码的逻辑是如果柱状图被隐藏左轴也隐藏右轴移到左侧如果柱状图显示右轴回到右侧。实测下来这个交互细节能让图表的专业度提升一个档次。最后分享一个小技巧给折线加一个渐变填充。虽然折线本身不填充但可以在折线下方加一个areaStyle用从折线颜色到透明的渐变视觉上把折线和柱子区分开。配置如下areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: rgba(230, 162, 60, 0.3) }, { offset: 1, color: rgba(230, 162, 60, 0) } ]) }这个渐变区域不会遮挡柱子因为它在折线下方且透明度很高但能让折线的趋势更醒目。注意areaStyle只在折线系列上生效柱子不需要。如果你的图表背景是深色把渐变的透明度调低一些避免太突兀。混合图表看起来简单但要把双轴、样式、交互都调到位还是得花点心思。上面这些配置和技巧都是我在实际项目里反复验证过的你可以直接拿去用也可以根据自己的数据特点微调。关键是记住一个原则图表是为数据服务的任何样式调整都不能牺牲数据的可读性。柱子和折线谁主谁次轴的范围怎么定颜色怎么配都要围绕“让读者最快理解数据关系”这个目标来做。