当前位置：首页 > news >正文

告别复杂数据对比：ECharts多柱重叠方案让洞察一目了然

news 2026/4/18 8:37:58

还在为复杂的数据对比头疼吗？ECharts多柱重叠柱状图的终极解决方案。

通过巧妙运用不可见的第二Y轴和不同透明度，完美叠加基础数据与完成数据，结合渐变色彩与交互提示，助您轻松提升数据分析效率，快速发现业务洞察。

在数据可视化中，多柱重叠柱状图能有效展示不同数据系列的对比关系。

如何使用ECharts实现这一图表类型，包含完整的HTML/CSS/JS代码实现及原理说明。

核心实现原理

多柱重叠柱状图通过双Y轴方案实现不同系列的堆叠和重叠效果：

双Y轴设计：将基础柱状图(总数)放在第二个不可见的Y轴上
视觉区分：使用不同透明度区分重叠部分
渐变色彩：增强视觉效果
响应式设计：适配不同屏幕尺寸

完整代码实现

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts多柱重叠柱状图</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><link rel="stylesheet" href="style.css">
</head>
<body><div class="chart-container"><div id="mainChart" style="width: 100%; height: 600px;"></div></div><script src="script.js"></script>
</body>
</html>

CSS样式

body {margin: 0;padding: 20px;font-family: 'Arial', sans-serif;background-color: #f5f7fa;
}.chart-container {max-width: 1200px;margin: 0 auto;background: white;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);padding: 20px;
}h1 {text-align: center;color: #333;margin-bottom: 30px;
}

JavaScript配置

document.addEventListener('DOMContentLoaded', function() {// 初始化图表const chartDom = document.getElementById('mainChart');const myChart = echarts.init(chartDom);// 配置项const option = {title: {text: '多柱重叠柱状图示例',subtext: '本周与上周数据对比',left: 'center',textStyle: {color: '#333',fontSize: 18,fontWeight: 'bold'}},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',shadowStyle: {color: 'rgba(150, 150, 150, 0.1)'}},formatter: function(params) {let result = params[0].name + '<br/>';params.forEach(item => {result += `${item.marker} ${item.seriesName}: ${item.value}<br/>`;});return result;}},legend: {data: ['本周总数', '上周总数', '本周完成数', '上周完成数'],top: 40,textStyle: {color: '#666'}},grid: {left: '3%',right: '4%',bottom: '3%',top: '20%',containLabel: true},yAxis: [{type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],axisLine: {lineStyle: {color: '#ddd'}},axisLabel: {color: '#666'}},{type: 'category',show: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],xAxis: {type: 'value',axisLine: {show: false},axisLabel: {color: '#999'},splitLine: {lineStyle: {type: 'dashed',color: '#eee'}}},series: [{name: '本周总数',type: 'bar',yAxisIndex: 1,  // 使用第二个Y轴barWidth: 30,itemStyle: {color: 'rgba(41, 188, 203, 0.2)',borderColor: 'rgba(41, 188, 203, 0.8)',borderWidth: 1,borderRadius: [4, 4, 0, 0]},data: [40, 40, 40, 40, 40, 40, 40],label: {show: true,position: 'top',formatter: '{c}',color: '#666'}},{name: '上周总数',type: 'bar',yAxisIndex: 1,barWidth: 30,itemStyle: {color: 'rgba(63, 133, 240, 0.2)',borderColor: 'rgba(63, 133, 240, 0.8)',borderWidth: 1,borderRadius: [4, 4, 0, 0]},data: [50, 50, 50, 50, 50, 50, 50],label: {show: true,position: 'top',formatter: '{c}',color: '#666'}},{name: '本周完成数',type: 'bar',barWidth: 20,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#29bccb' },{ offset: 1, color: '#1a8c99' }]),borderRadius: [4, 4, 0, 0]},data: [10, 15, 20, 20, 30, 45, 55],label: {show: true,position: 'insideTop',color: 'white'}},{name: '上周完成数',type: 'bar',barWidth: 20,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3f85f0' },{ offset: 1, color: '#2a5caa' }]),borderRadius: [4, 4, 0, 0]},data: [9, 27, 36, 30, 22, 35, 40],label: {show: true,position: 'insideTop',color: 'white'}}]};// 应用配置myChart.setOption(option);// 响应式调整window.addEventListener('resize', function() {myChart.resize();});
});