正文

从电商销量到人口分布，教你用echarts堆积图轻松分析复杂数据

/0 浏览量
0404

在数字化时代，数据成为了决策者手中的宝贵资源。如何从海量的数据中提取有价值的信息，是每一个数据分析师需要面对的挑战。ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松地将数据转换为直观的图表。今天，我们就来学习如何使用 ECharts 的堆积图功能，分析电商销量和人口分布等复杂数据。

堆积图简介

堆积图（Stacked Bar Chart）是 ECharts 中一种常用的图表类型，它将多个系列的数据堆积在一起，可以用来展示不同类别的数据对比。在堆积图中，每个系列的数据都会按照一定的顺序堆叠，使得用户可以直观地看到每个类别的数据量。

准备数据

在使用 ECharts 堆积图之前，我们需要准备一些数据。以下是一个简单的电商销量数据示例：

[
  { "category": "电子产品", "value": [120, 200, 150] },
  { "category": "服饰", "value": [80, 100, 120] },
  { "category": "食品", "value": [60, 100, 80] }
]

这里的数据包含了三个类别：电子产品、服饰和食品，以及每个类别在三个不同时间点的销量。

创建基本堆积图

接下来，我们将使用 ECharts 创建一个基本的堆积图。首先，我们需要在 HTML 页面中引入 ECharts 的 JS 库：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        // 这里将放置 ECharts 的初始化代码
    </script>
</body>
</html>

然后，在 <script> 标签中，我们初始化 ECharts 实例并配置堆积图：

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

var option = {
    title: {
        text: '电商销量堆积图'
    },
    tooltip: {},
    legend: {
        data:['电子产品', '服饰', '食品']
    },
    xAxis: {
        data: ["1月", "2月", "3月"]
    },
    yAxis: {},
    series: [
        {
            name: '电子产品',
            type: 'bar',
            data: [120, 200, 150],
            stack: '总量'
        },
        {
            name: '服饰',
            type: 'bar',
            data: [80, 100, 120],
            stack: '总量'
        },
        {
            name: '食品',
            type: 'bar',
            data: [60, 100, 80],
            stack: '总量'
        }
    ]
};

myChart.setOption(option);

这段代码创建了一个包含三个系列（电子产品、服饰、食品）的堆积图。每个系列的数据堆叠在同一个坐标轴上，用户可以清晰地看到每个类别的销量情况。

高级堆积图

在了解了基本堆积图之后，我们可以尝试一些高级功能，比如设置不同系列的堆叠顺序、调整颜色、添加数据标签等。

调整堆叠顺序

如果我们想调整堆叠顺序，可以在每个系列的 stack 属性中设置不同的值。例如，我们可以将食品系列放在最下面：

series: [
    // ...其他系列
    {
        name: '食品',
        type: 'bar',
        data: [60, 100, 80],
        stack: '总量'
    }
]

调整颜色

为了使图表更加美观，我们可以为每个系列设置不同的颜色：

itemStyle: {
    color: '#FF6347'
},
{
    name: '服饰',
    type: 'bar',
    data: [80, 100, 120],
    itemStyle: {
        color: '#4682B4'
    },
    stack: '总量'
},
{
    name: '食品',
    type: 'bar',
    data: [60, 100, 80],
    itemStyle: {
        color: '#32CD32'
    },
    stack: '总量'
}

添加数据标签

数据标签可以帮助我们更清晰地了解图表中的具体数值：

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
},
series: [
    // ...其他系列
    {
        name: '食品',
        type: 'bar',
        data: [60, 100, 80],
        itemStyle: {
            color: '#32CD32'
        },
        stack: '总量',
        label: {
            show: true,
            position: 'top'
        }
    }
]

人口分布分析

除了电商销量，我们还可以使用堆积图来分析人口分布。以下是一个人口分布数据的示例：

[
  { "province": "北京", "population": [20000000, 21000000, 22000000] },
  { "province": "上海", "population": [24000000, 25000000, 26000000] },
  { "province": "广东", "population": [10000000, 11000000, 12000000] }
]

使用 ECharts 创建人口分布堆积图的步骤与电商销量类似，只需要将数据替换为人口分布数据即可。

总结

通过学习如何使用 ECharts 的堆积图功能，我们可以轻松地分析电商销量和人口分布等复杂数据。堆积图以其直观的视觉效果，帮助我们更好地理解数据的内在关系。在实际应用中，我们可以根据需要调整图表的样式和功能，使其更符合我们的需求。希望这篇文章能帮助你入门 ECharts 堆积图，开启数据可视化的新篇章。

-- 展开阅读全文 --