正文

学会echarts堆积图，轻松绘制数据分析图表

/0 浏览量
0721

在数据可视化领域，ECharts 是一款功能强大、使用便捷的 JavaScript 图表库。堆积图是 ECharts 中一种常用的图表类型，能够有效地展示多组数据在时间序列上的累积变化。下面，我们就来一步一步地学习如何使用 ECharts 创建堆积图，让数据分析更加直观和生动。

初识堆积图

堆积图是一种组合图表，它将多个系列的数据堆积在一起，形成一个整体。这种图表特别适合用于展示多组数据随时间变化的累积效果，比如销售数据、库存变化等。

堆积图的特点

  • 累积效果：能够清晰地展示每个数据系列相对于整体的变化趋势。
  • 视觉效果：通过不同颜色区分不同的数据系列，使得图表更加直观。
  • 交互性：支持多种交互操作，如缩放、点击等，便于深入分析。

基础搭建

1. 引入 ECharts

首先，确保你的项目中已经引入了 ECharts 库。可以通过 CDN 链接或者下载 ECharts 包的方式引入。

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

2. 准备 DOM 容器

在 HTML 中创建一个用于承载图表的 DOM 元素。

<!-- 图表容器 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

数据准备

堆积图需要准备两组或以上的数据，通常包括：

  • 时间序列数据：如日期、时间戳等。
  • 数值数据：每个时间点对应的数据值。

以下是一个简单的数据示例：

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            stack: '总量'
        },
        {
            data: [720, 832, 801, 834, 1190, 1230, 1220],
            type: 'line',
            stack: '总量'
        }
    ]
};

配置选项

1. X 轴和 Y 轴配置

X 轴和 Y 轴的配置决定了图表的坐标轴样式和数据类型。

xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
    type: 'value'
}

2. 系列配置

系列配置是堆积图的核心，包括数据、图表类型和堆积方式等。

series: [
    {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        stack: '总量'
    },
    {
        data: [720, 832, 801, 834, 1190, 1230, 1220],
        type: 'line',
        stack: '总量'
    }
]

3. 其他配置

ECharts 支持丰富的配置选项，如标题、图例、工具栏等。

title: {
    text: '堆叠折线图'
},
legend: {
    data: ['系列1', '系列2']
},
tooltip: {
    trigger: 'axis'
},
toolbox: {
    show: true,
    feature: {
        dataZoom: {},
        dataView: {},
        magicType: {
            type: ['line', 'bar']
        },
        restore: {},
        saveAsImage: {}
    }
}

初始化图表

最后，使用 ECharts 的 init 方法初始化图表，并传入配置选项。

// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

总结

通过以上步骤，你已经学会了如何使用 ECharts 创建堆积图。堆积图能够帮助你直观地展示多组数据在时间序列上的累积变化，是数据分析中不可或缺的工具之一。希望这篇文章能够帮助你更好地理解和应用 ECharts 堆积图。

-- 展开阅读全文 --