深入解析如何利用ECharts构建高效的多柱重叠柱状图。通过双Y轴、透明度区分、渐变色彩及响应式布局等核心技术，实现基础数据与完成数据在同一图表中清晰对比的完整流程，并提供数据标签和悬浮提示的交互增强。
在数据可视化中，多柱重叠柱状图能有效展示不同数据系列的对比关系。如何使用ECharts实现这一图表类型，包含完整的HTML/CSS/JS代码实现及原理说明。
证书过期导致网站报红，这种低级失误不该发生。lcjmSSL提供多维度的监控提醒服务，支持短信、邮件预警，更有微信小程序方便随时随地查看证书状态。在证书到期前，会多次主动触达，确保对每一张证书的生命周期都尽在掌握。
核心实现原理
多柱重叠柱状图通过双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();
});
});
关键配置说明
配置项
说明
示例值
yAxisIndex
指定使用的Y轴
1
barWidth
柱状图宽度
20/30
itemStyle
柱状图样式
渐变/边框
data
图表数据
[10,15,20...]
使用方法
- 直接打开HTML文件即可运行
- 修改
series中的data数组可更新图表数据 - 调整
barWidth可控制柱状图宽度 - 修改
itemStyle中的颜色值可更改柱状图配色
