如何用ECharts多条柱状图实现多维度数据对比展示
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的基本步骤如下：
- 准备一个具备大小（宽高）的DOM容器
- 初始化echarts实例
- 指定图表的配置项和数据
- 使用刚指定的配置项和数据显示图表
示例代码：
<!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> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <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实现多条柱状图进行多维度数据对比展示。以下是一些总结和最佳实践：
- 选择合适的图表类型：根据数据特点选择普通柱状图、堆叠柱状图或百分比堆叠柱状图。
- 合理设置颜色：使用不同的颜色区分不同维度的数据，确保颜色对比度足够，便于区分。
- 添加必要的交互：通过图例、工具箱、数据缩放等增强图表的交互性。
- 优化数据展示：添加数据标签、参考线等辅助元素，提高数据的可读性。
- 考虑响应式设计：确保图表能够适应不同屏幕尺寸。
- 处理大数据量：当数据量较大时，考虑使用数据缩放或分页展示。
- 添加事件处理：通过事件处理增强图表的交互性，提供更好的用户体验。
ECharts作为一个功能强大的数据可视化库，提供了丰富的配置选项和API，能够满足各种数据可视化需求。通过合理利用这些功能，我们可以创建出既美观又实用的多维度数据对比图表，帮助用户更好地理解和分析数据。
支付宝扫一扫
微信扫一扫 |
