正文

新手必看：如何用 ECharts 堆积图轻松展示复杂数据，实例教学让你快速上手

/0 浏览量
0702

ECharts 是一款功能强大的前端可视化库，能够帮助我们轻松地将数据转换为图表，便于数据分析和展示。其中，堆积图（Stacked Bar Chart）是一种常见的图表类型，能够清晰地展示多个系列数据的叠加情况。本文将带您深入了解 ECharts 堆积图的使用方法，并通过实例教学，让您快速上手。

堆积图概述

堆积图是一种组合了柱状图和折线图的图表类型，用于展示多个系列数据在各个维度上的叠加情况。它能够清晰地反映每个系列数据的大小和占比，适合用于展示多个时间序列数据或不同分类的数据。

ECharts 堆积图的基本使用

1. 引入 ECharts 库

首先，您需要在您的项目中引入 ECharts 库。可以通过以下两种方式引入：

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

2. 创建图表容器

在 HTML 中创建一个用于展示图表的容器，例如：

<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: ["分类1", "分类2", "分类3", "分类4"]
    },
    yAxis: {},
    series: [{
        name: '系列1',
        type: 'bar',
        stack: '总量',
        data: [5, 20, 36, 10]
    }, {
        name: '系列2',
        type: 'bar',
        stack: '总量',
        data: [10, 15, 26, 20]
    }]
};

myChart.setOption(option);

在上面的代码中，我们设置了图表的标题、提示框、图例、坐标轴和数据系列。stack 属性用于设置系列是否堆叠。

实例教学：创建一个动态更新的堆积图

以下是一个动态更新的堆积图实例，演示了如何通过定时器更新图表数据。

1. 准备数据

var data = [
    {
        name: '系列1',
        data: []
    },
    {
        name: '系列2',
        data: []
    }
];
for (var i = 0; i < 100; i++) {
    data[0].data.push(Math.round(Math.random() * 100));
    data[1].data.push(Math.round(Math.random() * 100));
}

2. 创建图表并设置定时器

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

function updateChart() {
    var newData = [];
    for (var i = 0; i < 100; i++) {
        newData.push(Math.round(Math.random() * 100));
    }
    data[0].data.push(newData);
    data[0].data.shift();
    data[1].data.push(newData);
    data[1].data.shift();

    var option = {
        title: {
            text: '动态更新的堆积图'
        },
        tooltip: {},
        legend: {
            data:['系列1', '系列2']
        },
        xAxis: {
            data: ["分类" + (i + 1)]
        },
        yAxis: {},
        series: data
    };
    myChart.setOption(option);
}

setInterval(updateChart, 1000);

在这个实例中，我们通过定时器不断更新图表数据，模拟实时数据的更新效果。

总结

通过本文的学习，您应该已经掌握了 ECharts 堆积图的基本使用方法和动态更新的实现技巧。在实际应用中，您可以结合自己的需求进行相应的调整和优化。希望这篇文章能帮助您在数据可视化道路上越走越远！

-- 展开阅读全文 --