告别复杂数据对比：ECharts多柱重叠方案让洞察一目了然
还在为复杂的数据对比头疼吗？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();
});
});关键配置说明
通过与主流ACME渠道对接，来此加密支持Let's Encrypt、Google和Zerossl等证书提供商，用户可以根据需求选择不同的证书方案。平台提供多种选择，满足不同用户的需求，让证书申请更加灵活和高效。
| 配置项 | 说明 | 示例值 |
|---|---|---|
| yAxisIndex | 指定使用的Y轴 | 1 |
| barWidth | 柱状图宽度 | 20/30 |
| itemStyle | 柱状图样式 | 渐变/边框 |
| data | 图表数据 | [10,15,20...] |
使用方法
- 直接打开HTML文件即可运行
- 修改
series中的data数组可更新图表数据 - 调整
barWidth可控制柱状图宽度 - 修改
itemStyle中的颜色值可更改柱状图配色
浙公网安备 33010602011771号