ECharts堆积图应用案例解析
堆积图（Stacked Chart）是一种非常实用的图表类型，它能够展示多个数据系列，并且通过堆积的方式，使得不同系列的数据可以直观地对比。ECharts 是一个功能强大的图表库，可以帮助我们轻松实现堆积图。下面，我将通过五个实际应用案例，来解析如何使用 ECharts 创建堆积图。
案例一：销售数据堆积图
1.1 案例背景
在销售数据分析中，堆积图可以用来展示不同产品类别在不同时间段的销售总量。
1.2 数据准备
假设我们有以下销售数据：
| 时间段 | 产品A | 产品B | 产品C |
|---|---|---|---|
| 1月 | 100 | 200 | 300 |
| 2月 | 150 | 250 | 350 |
| 3月 | 200 | 300 | 400 |
1.3 代码实现
var option = {
title: {
text: '销售数据堆积图'
},
tooltip: {},
legend: {
data:['产品A', '产品B', '产品C']
},
xAxis: {
data: ["1月", "2月", "3月"]
},
yAxis: {},
series: [
{
name: '产品A',
type: 'bar',
stack: '总量',
data: [100, 150, 200]
},
{
name: '产品B',
type: 'bar',
stack: '总量',
data: [200, 250, 300]
},
{
name: '产品C',
type: 'bar',
stack: '总量',
data: [300, 350, 400]
}
]
};
1.4 效果展示
通过上述代码，我们可以得到一个清晰的堆积图，展示了不同产品在不同时间段的销售总量。
案例二：网站流量堆积图
2.1 案例背景
网站流量分析是网站运营中非常重要的一环，堆积图可以用来展示不同来源的流量占比。
2.2 数据准备
假设我们有以下网站流量数据：
| 来源 | 流量 |
|---|---|
| 直接访问 | 1000 |
| 搜索引擎 | 1500 |
| 社交媒体 | 2000 |
| 其他 | 500 |
2.3 代码实现
var option = {
title: {
text: '网站流量堆积图'
},
tooltip: {},
legend: {
data:['直接访问', '搜索引擎', '社交媒体', '其他']
},
xAxis: {
data: ["直接访问", "搜索引擎", "社交媒体", "其他"]
},
yAxis: {},
series: [
{
name: '流量',
type: 'bar',
stack: '总量',
data: [1000, 1500, 2000, 500]
}
]
};
2.4 效果展示
通过上述代码，我们可以得到一个直观的堆积图，展示了不同来源的流量占比。
案例三：库存变化堆积图
3.1 案例背景
库存管理是企业运营中的重要环节，堆积图可以用来展示不同产品在不同时间段的库存变化。
3.2 数据准备
假设我们有以下库存数据：
| 时间段 | 产品A | 产品B | 产品C |
|---|---|---|---|
| 1月 | 100 | 200 | 300 |
| 2月 | 150 | 250 | 350 |
| 3月 | 200 | 300 | 400 |
3.3 代码实现
var option = {
title: {
text: '库存变化堆积图'
},
tooltip: {},
legend: {
data:['产品A', '产品B', '产品C']
},
xAxis: {
data: ["1月", "2月", "3月"]
},
yAxis: {},
series: [
{
name: '产品A',
type: 'bar',
stack: '总量',
data: [100, 150, 200]
},
{
name: '产品B',
type: 'bar',
stack: '总量',
data: [200, 250, 300]
},
{
name: '产品C',
type: 'bar',
stack: '总量',
data: [300, 350, 400]
}
]
};
3.4 效果展示
通过上述代码，我们可以得到一个清晰的堆积图，展示了不同产品在不同时间段的库存变化。
案例四：项目进度堆积图
4.1 案例背景
项目进度跟踪是项目管理中的重要环节，堆积图可以用来展示不同任务在不同时间段的完成情况。
4.2 数据准备
假设我们有以下项目进度数据：
| 任务 | 1月 | 2月 | 3月 |
|---|---|---|---|
| 任务A | 20% | 40% | 60% |
| 任务B | 30% | 50% | 70% |
| 任务C | 40% | 60% | 80% |
4.3 代码实现
var option = {
title: {
text: '项目进度堆积图'
},
tooltip: {},
legend: {
data:['任务A', '任务B', '任务C']
},
xAxis: {
data: ["1月", "2月", "3月"]
},
yAxis: {},
series: [
{
name: '任务A',
type: 'bar',
stack: '总量',
data: [20, 40, 60]
},
{
name: '任务B',
type: 'bar',
stack: '总量',
data: [30, 50, 70]
},
{
name: '任务C',
type: 'bar',
stack: '总量',
data: [40, 60, 80]
}
]
};
4.4 效果展示
通过上述代码，我们可以得到一个直观的堆积图，展示了不同任务在不同时间段的完成情况。
案例五：股票价格堆积图
5.1 案例背景
股票市场分析是金融投资中的重要环节，堆积图可以用来展示不同股票在不同时间段的涨跌幅。
5.2 数据准备
假设我们有以下股票价格数据：
| 日期 | 股票A | 股票B | 股票C |
|---|---|---|---|
| 1月1日 | 100 | 200 | 300 |
| 1月2日 | 105 | 210 | 315 |
| 1月3日 | 110 | 220 | 330 |
5.3 代码实现
var option = {
title: {
text: '股票价格堆积图'
},
tooltip: {},
legend: {
data:['股票A', '股票B', '股票C']
},
xAxis: {
data: ["1月1日", "1月2日", "1月3日"]
},
yAxis: {},
series: [
{
name: '股票A',
type: 'bar',
stack: '总量',
data: [100, 105, 110]
},
{
name: '股票B',
type: 'bar',
stack: '总量',
data: [200, 210, 220]
},
{
name: '股票C',
type: 'bar',
stack: '总量',
data: [300, 315, 330]
}
]
};
5.4 效果展示
通过上述代码，我们可以得到一个清晰的堆积图，展示了不同股票在不同时间段的涨跌幅。
通过以上五个案例，我们可以看到，使用 ECharts 创建堆积图非常简单。只需要准备好数据，编写相应的代码，就可以得到一个直观、清晰的图表。在实际应用中，我们可以根据具体需求调整图表样式和参数，以满足不同的展示效果。