正文

从幼儿园到大学：教你用 ECharts 堆积图轻松展示数据趋势与对比

/0 浏览量
0405

嘿，小朋友！今天我们要来学习一种神奇的工具，叫做 ECharts，它可以帮助我们用堆积图的方式来展示数据趋势和对比。听起来是不是很酷？那就让我们一起踏上这场探索之旅吧！

ECharts 是什么？

首先，得先认识一下 ECharts。ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地嵌入到网页中，帮助我们把数据转换成图形，让复杂的数据变得直观易懂。简单来说，它就像一个魔法师，可以把数字变成一幅幅生动的画。

堆积图简介

堆积图是 ECharts 中的一种图表类型，它能够将多个数据系列堆叠在一起，通过高度来表示数据的大小。这样，我们就可以很容易地看到不同数据系列之间的趋势和对比。

幼儿园：入门级堆积图

1. 准备数据

首先，我们需要准备一些数据。比如，我们可以记录一下幼儿园小朋友每天吃的水果数量。

var data = [
    {name: '苹果', value: 5},
    {name: '香蕉', value: 3},
    {name: '橙子', value: 2}
];

2. 创建图表

接下来，我们使用 ECharts 创建一个简单的堆积图。

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

var option = {
    title: {
        text: '幼儿园水果消耗量'
    },
    tooltip: {},
    legend: {
        data:['苹果', '香蕉', '橙子']
    },
    xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    yAxis: {},
    series: [{
        name: '苹果',
        type: 'bar',
        data: [5, 3, 2, 5, 3, 2, 5]
    }, {
        name: '香蕉',
        type: 'bar',
        data: [3, 5, 3, 5, 3, 5, 3]
    }, {
        name: '橙子',
        type: 'bar',
        data: [2, 3, 5, 2, 3, 5, 2]
    }]
};

myChart.setOption(option);

3. 预览效果

将以上代码放入 HTML 文件中，打开浏览器预览，你就能看到一个直观的堆积图，展示出每天吃不同水果的数量。

小学：进阶堆积图

1. 多维度数据

随着我们年级的增长，数据也变得越来越复杂。我们可以尝试在堆积图中展示更多维度的数据，比如每个小朋友吃水果的数量。

var data = [
    {name: '小明', apple: 5, banana: 3, orange: 2},
    {name: '小红', apple: 3, banana: 5, orange: 3},
    {name: '小刚', apple: 2, banana: 3, orange: 5}
];

2. 饼图组合

为了更直观地展示每个小朋友吃水果的比例，我们可以将堆积图和饼图结合起来。

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

var option = {
    title: {
        text: '小学水果消耗量'
    },
    tooltip: {},
    legend: {
        data:['苹果', '香蕉', '橙子']
    },
    xAxis: {
        data: ["小明", "小红", "小刚"]
    },
    yAxis: {},
    series: [{
        name: '苹果',
        type: 'bar',
        data: [5, 3, 2]
    }, {
        name: '香蕉',
        type: 'bar',
        data: [3, 5, 3]
    }, {
        name: '橙子',
        type: 'bar',
        data: [2, 3, 5]
    }]
};

myChart.setOption(option);

初中：高级堆积图

1. 动态数据

随着我们年龄的增长，数据也变得越来越动态。我们可以尝试在堆积图中展示动态变化的数据，比如每个季度水果消耗量的变化。

var data = [
    {name: '苹果', value: [5, 7, 8, 10]},
    {name: '香蕉', value: [3, 5, 6, 8]},
    {name: '橙子', value: [2, 4, 5, 7]}
];

2. 时间轴

为了更清晰地展示数据变化，我们可以使用时间轴来展示每个季度水果消耗量的变化。

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

var option = {
    title: {
        text: '初中水果消耗量'
    },
    tooltip: {},
    legend: {
        data:['苹果', '香蕉', '橙子']
    },
    xAxis: {
        type: 'category',
        data: ['第一季度', '第二季度', '第三季度', '第四季度']
    },
    yAxis: {},
    series: [{
        name: '苹果',
        type: 'line',
        data: [5, 7, 8, 10]
    }, {
        name: '香蕉',
        type: 'line',
        data: [3, 5, 6, 8]
    }, {
        name: '橙子',
        type: 'line',
        data: [2, 4, 5, 7]
    }]
};

myChart.setOption(option);

大学：实战应用

到了大学，我们可以尝试将堆积图应用到实际项目中，比如分析某款游戏的用户活跃度、展示某个地区的气温变化等。

1. 数据采集

首先，我们需要采集相关数据。比如，我们可以通过 API 获取某款游戏的用户活跃度数据。

var data = [
    {name: '用户 A', value: 100},
    {name: '用户 B', value: 150},
    {name: '用户 C', value: 200}
];

2. 数据可视化

接下来，我们使用 ECharts 创建一个堆积图来展示用户活跃度。

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

var option = {
    title: {
        text: '游戏用户活跃度'
    },
    tooltip: {},
    legend: {
        data:['用户 A', '用户 B', '用户 C']
    },
    xAxis: {
        type: 'category',
        data: ['活跃用户', '潜在用户', '沉默用户']
    },
    yAxis: {},
    series: [{
        name: '用户 A',
        type: 'bar',
        data: [100]
    }, {
        name: '用户 B',
        type: 'bar',
        data: [150]
    }, {
        name: '用户 C',
        type: 'bar',
        data: [200]
    }]
};

myChart.setOption(option);

总结

通过学习 ECharts 堆积图，我们可以轻松地展示数据趋势和对比。从幼儿园到大学，我们学会了如何使用堆积图展示不同类型的数据，并将其应用到实际项目中。希望这篇文章能帮助你更好地理解 ECharts 堆积图，开启你的数据可视化之旅！

-- 展开阅读全文 --