如何用ECharts多条柱状图实现多维度数据对比展示

威震华夏关云长 · 发表于 2025-9-15 11:10:00

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

ECharts是百度开源的一个基于JavaScript的数据可视化库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器。它提供了直观、交互丰富、可高度个性化定制的数据可视化图表。在数据分析和展示中，多维度数据对比是非常常见的需求，通过多条柱状图可以直观地展示不同类别在多个维度上的差异，帮助用户快速理解数据背后的信息。

ECharts基础

安装和引入ECharts

通过npm安装：

npm install echarts --save

复制代码

在HTML文件中引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

复制代码

或者在JavaScript模块中引入：

import * as echarts from 'echarts';

复制代码

基本使用步骤

使用ECharts的基本步骤如下：

1. 准备一个具备大小（宽高）的DOM容器
2. 初始化echarts实例
3. 指定图表的配置项和数据
4. 使用刚指定的配置项和数据显示图表

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 基础使用</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

复制代码

基础柱状图实现

单条柱状图

下面是一个简单的单条柱状图示例，展示了一周内每天的销售额：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '一周销售额'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '销售额',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
// 可以设置柱状图的样式
itemStyle: {
color: '#5470C6'
}
}]
};
// 使用配置项显示图表
myChart.setOption(option);

复制代码

柱状图样式设置

ECharts提供了丰富的样式设置选项，可以让柱状图更加美观和易读：

var option = {
// ...其他配置
series: [{
name: '销售额',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
// 柱条样式
itemStyle: {
// 颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]),
// 圆角
borderRadius: [5, 5, 0, 0]
},
// 高亮时的样式
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
// 标签设置
label: {
show: true,
position: 'top',
formatter: '{c} 元'
}
}]
};

复制代码

多条柱状图实现

多条柱状图是在同一个图表中展示多个数据系列，每个系列用不同颜色的柱形表示。这种图表非常适合用于比较不同类别在多个指标上的表现。

基本多条柱状图

下面是一个基本的多条柱状图示例，展示了两种产品在一周内的销售情况：

var option = {
title: {
text: '产品销售对比'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['产品A', '产品B']
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '产品A',
type: 'bar',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '产品B',
type: 'bar',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};

复制代码

堆叠柱状图

堆叠柱状图是将多个数据系列的值堆叠在一起显示，可以展示各部分占总体的比例关系：

var option = {
title: {
text: '产品销售堆叠图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['产品A', '产品B']
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '产品A',
type: 'bar',
stack: '总量', // 设置堆叠
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '产品B',
type: 'bar',
stack: '总量', // 设置堆叠
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};

复制代码

百分比堆叠柱状图

百分比堆叠柱状图是堆叠柱状图的一种变体，每个类别的总高度都是100%，显示各部分所占的百分比：

var option = {
title: {
text: '产品销售占比'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
var tar = params[0];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + '<br/>' +
'占比 : ' + (tar.value * 100 / (params[0].value + params[1].value)).toFixed(2) + '%';
}
},
legend: {
data: ['产品A', '产品B']
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
}
},
series: [
{
name: '产品A',
type: 'bar',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '产品B',
type: 'bar',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};

复制代码

多维度数据对比

多维度数据对比是指在一个图表中同时展示多个维度的数据，帮助用户从不同角度分析数据。通过多条柱状图，我们可以实现多维度数据对比。

多维度数据对比的基本实现

下面是一个展示不同地区在不同年份的GDP数据的多维度对比示例：

var option = {
title: {
text: '多地区GDP对比'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2018', '2019', '2020', '2021', '2022']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['北京', '上海', '广州', '深圳', '杭州']
},
yAxis: {
type: 'value',
name: 'GDP（亿元）',
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name: '2018',
type: 'bar',
data: [30320, 32679, 22859, 24221, 13509]
},
{
name: '2019',
type: 'bar',
data: [35445, 38155, 23628, 26927, 15373]
},
{
name: '2020',
type: 'bar',
data: [36103, 38701, 25019, 27670, 16106]
},
{
name: '2021',
type: 'bar',
data: [40269, 43214, 28231, 30664, 18109]
},
{
name: '2022',
type: 'bar',
data: [41610, 44652, 28839, 32387, 18753]
}
]
};

复制代码

添加平均值参考线

为了更好地进行多维度数据对比，我们可以添加平均值参考线，帮助用户快速识别哪些数据高于或低于平均水平：

var option = {
// ...其他配置
series: [
// ...之前的系列数据
{
name: '平均值',
type: 'line',
markLine: {
silent: true,
lineStyle: {
color: '#333'
},
data: [
{
type: 'average',
name: '平均值'
}
]
}
}
]
};

复制代码

添加数据标签

在柱状图上添加数据标签，可以让用户直接看到具体的数值，提高数据的可读性：

var option = {
// ...其他配置
series: [
{
name: '2018',
type: 'bar',
data: [30320, 32679, 22859, 24221, 13509],
label: {
show: true,
position: 'top',
formatter: '{c}'
}
},
// ...其他系列
]
};

复制代码

自定义颜色方案

为了更好地区分不同维度的数据，我们可以为每个系列设置不同的颜色：

var option = {
// ...其他配置
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'],
series: [
// ...系列数据
]
};

复制代码

高级特性

ECharts提供了许多高级特性，可以增强多条柱状图的交互性和表现力。

数据缩放

当数据量较大时，可以使用数据缩放功能，让用户能够查看局部细节：

var option = {
// ...其他配置
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
// ...其他配置
};

复制代码

工具箱

添加工具箱可以让用户对图表进行更多操作，如数据视图、保存为图片等：

var option = {
// ...其他配置
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
// ...其他配置
};

复制代码

动态排序

通过设置动态排序，可以让柱状图按照数值大小进行排序，更加直观地展示数据差异：

var option = {
// ...其他配置
series: [
{
name: '2018',
type: 'bar',
data: [30320, 32679, 22859, 24221, 13509],
// 开启排序
realtimeSort: true,
// 排序方向
sort: 'descending',
},
// ...其他系列
],
// ...其他配置
};

复制代码

事件处理

ECharts支持丰富的事件处理，可以让图表更加交互：

// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
// 设置配置项
myChart.setOption(option);
// 添加点击事件
myChart.on('click', function(params) {
console.log(params.name, params.value);
alert('您点击了 ' + params.name + '，数值为 ' + params.value);
});

复制代码

实际案例

下面是一个完整的多维度数据对比实例，展示了不同电商平台在不同季度的销售额、用户数和订单量的对比：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电商平台多维度数据对比</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
.chart-container {
width: 100%;
height: 500px;
margin: 20px auto;
}
.controls {
text-align: center;
margin: 20px 0;
}
button {
padding: 8px 15px;
margin: 0 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="controls">
<button onclick="switchDataType('sales')">销售额</button>
<button onclick="switchDataType('users')">用户数</button>
<button onclick="switchDataType('orders')">订单量</button>
</div>
<div id="main" class="chart-container"></div>
<script type="text/javascript">
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 数据
var data = {
sales: {
title: '电商平台季度销售额对比（亿元）',
series: [
{
name: '平台A',
type: 'bar',
data: [120, 132, 101, 134]
},
{
name: '平台B',
type: 'bar',
data: [220, 182, 191, 234]
},
{
name: '平台C',
type: 'bar',
data: [150, 232, 201, 154]
},
{
name: '平台D',
type: 'bar',
data: [320, 332, 301, 334]
}
]
},
users: {
title: '电商平台季度用户数对比（万人）',
series: [
{
name: '平台A',
type: 'bar',
data: [1200, 1320, 1010, 1340]
},
{
name: '平台B',
type: 'bar',
data: [2200, 1820, 1910, 2340]
},
{
name: '平台C',
type: 'bar',
data: [1500, 2320, 2010, 1540]
},
{
name: '平台D',
type: 'bar',
data: [3200, 3320, 3010, 3340]
}
]
},
orders: {
title: '电商平台季度订单量对比（万单）',
series: [
{
name: '平台A',
type: 'bar',
data: [500, 600, 450, 550]
},
{
name: '平台B',
type: 'bar',
data: [800, 750, 780, 850]
},
{
name: '平台C',
type: 'bar',
data: [600, 720, 650, 580]
},
{
name: '平台D',
type: 'bar',
data: [1200, 1300, 1150, 1250]
}
]
}
};
// 当前显示的数据类型
var currentDataType = 'sales';
// 切换数据类型
function switchDataType(type) {
currentDataType = type;
updateChart();
}
// 更新图表
function updateChart() {
var option = {
title: {
text: data[currentDataType].title,
subtext: '数据仅供参考'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['平台A', '平台B', '平台C', '平台D']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: data[currentDataType].series
};
myChart.setOption(option);
}
// 初始化图表
updateChart();
// 响应窗口大小变化
window.addEventListener('resize', function() {
myChart.resize();
});
</script>
</body>
</html>

复制代码

总结与最佳实践

通过本文的介绍，我们了解了如何使用ECharts实现多条柱状图进行多维度数据对比展示。以下是一些总结和最佳实践：

1. 选择合适的图表类型：根据数据特点选择普通柱状图、堆叠柱状图或百分比堆叠柱状图。
2. 合理设置颜色：使用不同的颜色区分不同维度的数据，确保颜色对比度足够，便于区分。
3. 添加必要的交互：通过图例、工具箱、数据缩放等增强图表的交互性。
4. 优化数据展示：添加数据标签、参考线等辅助元素，提高数据的可读性。
5. 考虑响应式设计：确保图表能够适应不同屏幕尺寸。
6. 处理大数据量：当数据量较大时，考虑使用数据缩放或分页展示。
7. 添加事件处理：通过事件处理增强图表的交互性，提供更好的用户体验。

ECharts作为一个功能强大的数据可视化库，提供了丰富的配置选项和API，能够满足各种数据可视化需求。通过合理利用这些功能，我们可以创建出既美观又实用的多维度数据对比图表，帮助用户更好地理解和分析数据。

	通知：关于部分勋章领取条件及购买价格调整的通知	05-18 21:22
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！	10-23 09:31

活动公告

如何用ECharts多条柱状图实现多维度数据对比展示

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

塔罗

立华奏

站长推荐 /1

友情链接

Tencent QQ