正文

教你轻松上手echarts堆积图，数据分析可视化新技能！

/0 浏览量
0901

堆积图（Stacked Chart）是 ECharts 库中一种非常实用的图表类型，它可以将多个数据系列叠加在一起，直观地展示不同系列数据在整体中的占比和趋势。通过堆积图，我们可以更清晰地了解数据之间的关系和变化。下面，我将带领你一步步学习如何使用 ECharts 创建堆积图，让你轻松掌握数据分析可视化技能。

1. ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、地图等，可以满足各种数据分析可视化的需求。ECharts 支持多种数据格式，易于使用，且具有高性能。

2. 堆积图基础

2.1 堆积图类型

ECharts 提供了以下几种堆积图类型：

  • 堆积柱状图（Stacked Column）
  • 堆积折线图（Stacked Line）
  • 堆积面积图（Stacked Area）

2.2 堆积图特点

  • 多个数据系列叠加，直观展示数据占比
  • 可以同时展示多个维度数据
  • 支持自定义颜色、标签、工具提示等

3. 创建堆积图

3.1 准备工作

首先，确保你的项目中已经引入了 ECharts 库。你可以通过以下方式引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

3.2 创建图表

以下是一个简单的堆积柱状图示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '堆积柱状图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    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: [2, 5, 15, 3, 4, 6],
            stack: '总量'
        },
        {
            name: '系列3',
            type: 'bar',
            data: [10, 10, 10, 5, 10, 5],
            stack: '总量'
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

3.3 配置项详解

  • title: 图表标题
  • tooltip: 鼠标悬停时显示的提示框
  • legend: 图例
  • xAxis: 横轴
  • yAxis: 纵轴
  • series: 数据系列

在 series 配置项中，type 指定图表类型（如：’bar’、’line’、’area’ 等），data 指定数据，stack 指定数据系列是否叠加。

4. 实战案例

以下是一个实战案例：创建一个堆积折线图，展示某个城市一周内不同天气情况下的温度变化。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '堆积折线图示例'
    },
    tooltip: {},
    legend: {
        data:['晴天', '多云', '阴天', '雨天']
    },
    xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    yAxis: {},
    series: [
        {
            name: '晴天',
            type: 'line',
            stack: '总量',
            data: [20, 18, 22, 19, 21, 18, 20]
        },
        {
            name: '多云',
            type: 'line',
            stack: '总量',
            data: [15, 14, 16, 13, 17, 14, 15]
        },
        {
            name: '阴天',
            type: 'line',
            stack: '总量',
            data: [10, 9, 11, 8, 10, 9, 10]
        },
        {
            name: '雨天',
            type: 'line',
            stack: '总量',
            data: [5, 3, 7, 4, 6, 3, 5]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

通过以上示例，你可以看到堆积图在实际数据分析中的应用。在实际项目中，你可以根据自己的需求调整图表类型、配置项和数据。

5. 总结

本文介绍了 ECharts 堆积图的基本概念、创建方法和实战案例。通过学习本文，相信你已经掌握了堆积图的使用技巧。在实际项目中，你可以根据需求灵活运用堆积图，展示更加丰富、直观的数据分析结果。祝你学习愉快！

-- 展开阅读全文 --