正文

从零开始，学会echarts堆积图：轻松实现数据分析与可视化展示

/0 浏览量
0702

在当今信息爆炸的时代，数据分析已经成为各个行业的重要技能。而可视化则是数据分析的得力助手，它能够帮助我们更加直观地理解数据背后的信息。ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够轻松地实现各种复杂的数据可视化效果。本文将带领你从零开始，学会使用 ECharts 堆积图进行数据分析与可视化展示。

一、ECharts 基础入门

1.1 安装与引入

首先，你需要安装 ECharts。由于 ECharts 是一个纯 JavaScript 库，你可以通过以下两种方式引入到你的项目中：

方式一：CDN 引入

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

方式二：npm 安装

npm install echarts --save

1.2 ECharts 基本结构

ECharts 的基本结构包括以下几个部分：

  • echarts.init()：初始化一个 ECharts 实例。
  • option：ECharts 实例的配置项，用于设置图表的各种属性和参数。
  • myChart.setOption(option)：将配置项应用到 ECharts 实例中。

二、堆积图基础知识

堆积图是一种常用的图表类型，它能够将多个数据系列叠加在一起，从而展示多个数据系列之间的累加关系。在 ECharts 中，堆积图分为以下几种类型：

  • 普通堆积图：将多个数据系列按照顺序堆积在一起。
  • 百分比堆积图：将每个数据系列按照百分比堆积在一起。
  • 时间堆积图：用于展示时间序列数据。

三、ECharts 堆积图实现

3.1 创建基本堆积图

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

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '基本堆积图'
        },
        tooltip: {},
        legend: {
            data:['系列1', '系列2']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [
            {
                name: '系列1',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },
            {
                name: '系列2',
                type: 'bar',
                stack: '总量',
                data: [10, 15, 25, 5, 10, 15]
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>
</html>

3.2 饼图与堆积图结合

在实际应用中，我们可以将饼图与堆积图结合使用，以展示不同数据系列之间的占比关系。以下是一个结合饼图与堆积图的示例：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '饼图与堆积图结合'
        },
        tooltip: {},
        legend: {
            data:['系列1', '系列2']
        },
        xAxis: {
            type: 'category',
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '系列1',
                type: 'pie',
                radius: '30%',
                center: ['50%', '60%'],
                data: [
                    {value: 5, name: '系列1'},
                    {value: 20, name: '系列2'},
                    {value: 36, name: '系列3'},
                    {value: 10, name: '系列4'},
                    {value: 10, name: '系列5'},
                    {value: 20, name: '系列6'}
                ],
                label: {
                    normal: {
                        formatter: '{b}: {c} ({d}%)'
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                name: '系列2',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>
</html>

四、总结

通过本文的学习，相信你已经掌握了使用 ECharts 堆积图进行数据可视化展示的基本方法。在实际应用中，你可以根据自己的需求，对堆积图进行各种定制化设置，以更好地展示你的数据。希望本文能够帮助你轻松实现数据分析与可视化展示。

-- 展开阅读全文 --