正文

学会echarts堆积图：轻松绘制多维度数据可视化，实用案例教学

/0 浏览量
0427

堆积图是一种在echarts中非常实用的图表类型，它能够帮助用户直观地展示多维度数据的分布和趋势。通过堆积图，我们可以将多个数据系列堆叠在一起，以便于比较它们在不同维度上的累积情况。以下，我们将通过一些实用案例，带领大家学会如何使用echarts创建堆积图。

1. 基础堆积图

首先，我们来创建一个最简单的堆积图。

1.1 HTML结构

<div id="basicStackChart" style="width: 600px;height:400px;"></div>

1.2 JavaScript代码

var myChart = echarts.init(document.getElementById('basicStackChart'));

var option = {
    title: {
        text: '基础堆积图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        stack: '总量'
    }]
};

myChart.setOption(option);

这段代码创建了一个包含6个数据系列的堆积图，每个系列代表一个商品类别，展示其销量。

2. 堆积柱状图

堆积柱状图可以更直观地展示数据的增长趋势。

2.1 HTML结构

<div id="stackColumnChart" style="width: 600px;height:400px;"></div>

2.2 JavaScript代码

var myChart = echarts.init(document.getElementById('stackColumnChart'));

var option = {
    title: {
        text: '堆积柱状图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        stack: '总量'
    }]
};

myChart.setOption(option);

这里，我们将堆积图的数据类型从bar改为bar，即可得到堆积柱状图。

3. 堆积折线图

堆积折线图适用于展示数据随时间的变化趋势。

3.1 HTML结构

<div id="stackLineChart" style="width: 600px;height:400px;"></div>

3.2 JavaScript代码

var myChart = echarts.init(document.getElementById('stackLineChart'));

var option = {
    title: {
        text: '堆积折线图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        stack: '总量',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

通过将数据类型改为line，我们可以得到堆积折线图。

4. 实用案例：销售额分析

下面，我们将通过一个实际案例，展示如何使用堆积图来分析销售额。

4.1 数据准备

假设我们有一家服装店的销售额数据，包括不同商品类别和月份。

var data = [
    {name: '衬衫', sales: [5, 20, 30, 40, 50]},
    {name: '羊毛衫', sales: [15, 10, 25, 20, 35]},
    {name: '雪纺衫', sales: [10, 15, 20, 25, 30]},
    {name: '裤子', sales: [20, 25, 30, 35, 40]},
    {name: '高跟鞋', sales: [25, 30, 35, 40, 45]},
    {name: '袜子', sales: [30, 35, 40, 45, 50]}
];

4.2 JavaScript代码

var myChart = echarts.init(document.getElementById('salesChart'));

var option = {
    title: {
        text: '销售额分析'
    },
    tooltip: {},
    legend: {
        data: data.map(item => item.name)
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月']
    },
    yAxis: {},
    series: data.map(item => ({
        name: item.name,
        type: 'line',
        stack: '总量',
        data: item.sales
    }))
};

myChart.setOption(option);

通过上述代码，我们可以得到一个展示各个月份各商品类别销售额的堆积折线图，从而分析出销售趋势和热门商品。

总结

通过本文的案例教学，相信大家已经学会了如何使用echarts创建堆积图，并能够根据实际需求调整图表类型和样式。在实际应用中，堆积图可以帮助我们更好地理解和分析多维度数据，提高数据可视化效果。

-- 展开阅读全文 --