正文

教你一招，用 ECharts 堆积图轻松分析多维度数据

/0 浏览量
0518

在数据可视化领域，ECharts 是一款功能强大、使用便捷的图表库。堆积图（Stacked Chart）是 ECharts 中的一种图表类型，它能够有效地展示多维度数据之间的关系。本文将为你详细介绍如何使用 ECharts 堆积图来分析多维度数据。

1. 了解堆积图

堆积图是一种用于展示多个数据系列之间关系的图表。它通过将多个数据系列叠加在一起，来展示每个数据系列在整个数据集中的占比情况。在堆积图中，每个数据系列都由多个部分组成，这些部分在图表上呈现出不同的颜色，使得用户可以清晰地看到每个数据系列的变化趋势。

2. 准备数据

在使用堆积图之前，首先需要准备数据。假设我们有一组销售数据，包含产品 A、产品 B 和产品 C 的销售情况，以及每个月的销售总额。以下是一个简单的数据示例：

var data = [
  {name: '1月', '产品A': 120, '产品B': 200, '产品C': 150, '总和': 470},
  {name: '2月', '产品A': 180, '产品B': 300, '产品C': 120, '总和': 600},
  {name: '3月', '产品A': 150, '产品B': 250, '产品C': 180, '总和': 580}
];

3. 创建堆积图

接下来，我们可以使用 ECharts 创建堆积图。以下是一个简单的 ECharts 堆积图示例代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '产品销售情况'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['产品A', '产品B', '产品C', '总和']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '产品A',
                type: 'bar',
                stack: '总量',
                data: [120, 180, 150]
            },
            {
                name: '产品B',
                type: 'bar',
                stack: '总量',
                data: [200, 300, 250]
            },
            {
                name: '产品C',
                type: 'bar',
                stack: '总量',
                data: [150, 120, 180]
            },
            {
                name: '总和',
                type: 'bar',
                stack: '总量',
                data: [470, 600, 580]
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>
</html>

4. 分析堆积图

通过观察堆积图，我们可以得出以下结论：

  • 产品 A、产品 B 和产品 C 的销售情况在不同月份有所波动。
  • 在 2 月份，产品 B 的销售额最高，达到了 300。
  • 3 月份，产品 A 和产品 C 的销售额并列第一，均为 150。

5. 总结

使用 ECharts 堆积图可以轻松分析多维度数据，帮助你更好地了解数据之间的关系。通过本文的介绍，相信你已经掌握了如何创建和使用堆积图。在实际应用中，你可以根据需要调整图表样式、颜色和配置项，以更好地展示你的数据。

-- 展开阅读全文 --