正文

教你轻松上手：ECharts堆积图实战攻略，解锁数据可视化新技能

/0 浏览量
0821

在数据可视化的世界里，ECharts是一个强大的工具，它可以帮助我们以图表的形式直观地展示数据。堆积图作为ECharts中的一种图表类型，能够有效地展示多个数据系列在同一个坐标系中的变化趋势。今天，就让我们一起来学习如何使用ECharts制作堆积图，并解锁数据可视化新技能。

一、了解堆积图

堆积图，顾名思义，就是通过堆积的方式将多个数据系列叠加在一起，形成一个整体。这种图表类型非常适合用于展示多个数据系列在时间序列或类别序列上的累计变化情况。

1.1 堆积图的类型

ECharts中的堆积图主要分为两种类型：

  • 普通堆积图：适用于展示多个数据系列在同一时间或同一类别上的累积变化。
  • 百分比堆积图：每个数据系列表示的是相对于总量的百分比，适用于比较各部分在整体中的占比。

1.2 堆积图的特点

  • 直观：通过堆积的方式，可以清晰地看到各数据系列之间的对比和趋势。
  • 灵活：可以结合多种图表类型，如折线图、柱状图等，实现更丰富的视觉效果。
  • 动态：支持动态数据加载和交互，提升用户体验。

二、ECharts堆积图的基本使用

2.1 引入ECharts库

首先，确保你的项目中已经引入了ECharts库。可以通过CDN链接或npm包管理工具进行引入。

<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2.2 创建图表容器

在HTML中创建一个用于显示图表的容器。

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

2.3 初始化图表

使用ECharts提供的初始化方法，创建一个图表实例。

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

2.4 设置图表配置项和数据显示

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2']
    },
    xAxis: {
        data: ["A", "B", "C", "D", "E", "F"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            stack: '总量'
        },
        {
            name: '系列2',
            type: 'bar',
            data: [10, 5, 20, 10, 5, 20],
            stack: '总量'
        }
    ]
};

myChart.setOption(option);

2.5 查看效果

完成以上步骤后，在浏览器中打开HTML文件，你应该能看到一个展示堆积图的页面。

三、实战案例：制作百分比堆积图

百分比堆积图可以更直观地展示各部分在整体中的占比。以下是一个制作百分比堆积图的示例：

var option = {
    title: {
        text: '百分比堆积图示例'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            var total = 0;
            params.forEach(function (item) {
                total += item.value;
            });
            var res = params.map(function (item) {
                return item.marker + item.seriesName + ' : ' +
                    (item.value / total * 100).toFixed(2) + '%';
            }).join('<br>');
            return res;
        }
    },
    legend: {
        data:['系列1', '系列2']
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [10, 20, 30, 40, 50, 60]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [20, 10, 30, 20, 40, 30]
        }
    ]
};

通过以上代码，你可以制作一个百分比堆积图，并在图表中显示每个数据系列相对于总量的百分比。

四、总结

通过本文的学习，相信你已经掌握了ECharts堆积图的基本使用方法和实战技巧。在实际应用中，可以根据需求调整图表样式、配置项和数据，制作出更加美观、实用的堆积图。希望这篇文章能帮助你解锁数据可视化新技能，在数据可视化的道路上越走越远。

-- 展开阅读全文 --