正文

教你用 ECharts 堆积图轻松分析数据，一看就懂，案例解析！

/0 浏览量
0810

在数据可视化领域，ECharts 是一个功能强大、易于使用的 JavaScript 库。它可以帮助我们快速创建丰富的图表，其中堆积图是一种特别有用的图表类型，可以展示多个数据系列在时间或其他维度上的累积情况。本文将带你一步步了解如何使用 ECharts 创建堆积图，并通过案例解析让你轻松掌握。

基础知识：什么是堆积图？

堆积图（Stacked Bar Chart）是一种组合图表，它将多个数据系列堆叠在一起，以便比较不同系列的总和。在堆积图中，每个系列都占据一定的宽度，这些宽度可以相互重叠，从而展示出不同系列之间的累积关系。

准备工作

在开始之前，请确保你的项目中已经引入了 ECharts 库。可以通过以下代码在 HTML 文件中引入 ECharts：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

创建堆积图

1. 准备数据

首先，我们需要准备一些数据。以下是一个简单的示例数据：

var data = [
    {name: '系列1', data: [120, 200, 150, 80, 70, 110, 130]},
    {name: '系列2', data: [60, 90, 60, 80, 70, 110, 130]},
    {name: '系列3', data: [30, 40, 50, 60, 70, 110, 130]}
];

2. 配置 ECharts 实例

接下来，我们需要创建一个 ECharts 实例，并设置图表的配置项和数据显示。

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

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [120, 200, 150, 80, 70, 110, 130]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [60, 90, 60, 80, 70, 110, 130]
        },
        {
            name: '系列3',
            type: 'bar',
            stack: '总量',
            data: [30, 40, 50, 60, 70, 110, 130]
        }
    ]
};

myChart.setOption(option);

3. 添加图表到页面

最后，我们需要将 ECharts 实例添加到 HTML 页面中。以下是一个简单的 HTML 示例：

<!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.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        // ECharts 配置和初始化代码
    </script>
</body>
</html>

案例解析

在这个案例中，我们创建了一个简单的堆积图，展示了三个数据系列在七个月份的累积情况。通过调整 series 数组中的 stack 属性，我们可以控制不同系列是否堆叠。

1. 调整堆叠方式

如果我们想改变堆叠方式，可以通过设置 stack 属性为不同的值来实现。例如，将 stack 属性设置为 '总量' 可以使所有系列都按照总量进行堆叠。

2. 添加颜色

为了使图表更加美观，我们可以为不同的系列添加颜色。在 series 数组中，可以通过 itemStyle 属性设置颜色。

{
    name: '系列1',
    type: 'bar',
    stack: '总量',
    itemStyle: {
        color: '#ff7f50'
    },
    data: [120, 200, 150, 80, 70, 110, 130]
}

3. 添加数据标签

在堆积图中，我们可以通过添加数据标签来展示每个数据点的具体数值。在 series 数组中，通过设置 label 属性可以实现。

{
    name: '系列1',
    type: 'bar',
    stack: '总量',
    label: {
        show: true,
        position: 'top',
        formatter: '{c}'
    },
    itemStyle: {
        color: '#ff7f50'
    },
    data: [120, 200, 150, 80, 70, 110, 130]
}

通过以上案例解析，相信你已经对如何使用 ECharts 创建堆积图有了更深入的了解。在实际应用中，你可以根据自己的需求调整图表的样式和配置，以展示更加丰富的数据信息。

-- 展开阅读全文 --