正文

新手必看！echarts堆积图轻松入门，实战案例让你快速上手

/0 浏览量
0510

在数据可视化领域，echarts 是一款功能强大、使用方便的图表库。堆积图作为 echarts 中的一种图表类型，能够清晰地展示数据的累积效果。对于新手来说，堆积图可能显得有些复杂，但别担心，本文将带你轻松入门，并通过实战案例让你快速上手。

堆积图简介

堆积图是一种通过多个柱状图堆叠在一起来展示数据累积效果的可视化图表。它适用于展示多个数据系列在某一时间点或某一区间的累积情况，常用于时间序列数据、销售数据等场景。

堆积图的基本用法

1. 引入 echarts

首先，需要在你的项目中引入 echarts 库。可以通过以下方式引入：

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

2. 创建图表容器

在 HTML 中创建一个用于显示图表的容器，并为其设置一个 ID：

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

3. 初始化图表实例

使用 echarts 实例化一个图表对象：

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

4. 配置图表选项

接下来，配置图表的选项，包括标题、坐标轴、系列等：

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

5. 渲染图表

最后，将配置的选项赋值给图表实例，并调用 setOption 方法渲染图表：

myChart.setOption(option);

实战案例：展示销售额的累积情况

假设你有一家公司的销售额数据，需要展示每个月的销售总额。以下是一个实战案例：

var option = {
    title: {
        text: '销售额累积情况'
    },
    tooltip: {},
    legend: {
        data:['销售额']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销售额',
        type: 'bar',
        stack: '总量',
        data: [120, 200, 150, 80, 70, 110, 130, 100, 80, 70, 110, 130]
    }]
};
myChart.setOption(option);

在这个案例中，我们使用 stack 属性将数据系列进行堆叠，从而展示出每个月的销售总额。

总结

通过本文的介绍，相信你已经对 echarts 堆积图有了初步的了解。在实际应用中，你可以根据需求调整图表的配置，例如修改标题、坐标轴、系列等。通过实战案例，你可以快速上手并掌握堆积图的使用方法。祝你在数据可视化领域取得更大的成就！

-- 展开阅读全文 --