正文

教你轻松用 ECharts 堆积图可视化复杂数据，让数据分析更直观

/0 浏览量
0330

堆积图是一种强大的数据可视化工具，它能够帮助我们更直观地理解数据的分布和趋势。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括堆积图。在本篇文章中，我将带你一步步学习如何使用 ECharts 创建堆积图，并将其应用于复杂数据分析。

堆积图的基本概念

堆积图是一种通过将多个数据系列叠加在一起来展示数据分布的图表。它适用于展示多个数据系列之间的比较，以及每个数据系列内部各部分与整体的关系。

堆积图的组成

  1. X 轴：通常表示时间或类别。
  2. Y 轴：表示数据的数值。
  3. 系列：每个系列代表一组数据，可以是多个数据点。

准备工作

在开始之前，请确保你已经安装了 Node.js 和 npm，并且可以通过 npm 安装 ECharts：

npm install echarts

创建堆积图

以下是使用 ECharts 创建堆积图的基本步骤：

1. 创建 HTML 文件

创建一个 HTML 文件，并在其中引入 ECharts 的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="height: 500px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '堆积图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

2. 添加数据

在 option 对象中，xAxis.data 定义了 X 轴的类别，而 series[0].data 定义了第一个系列的数值。

3. 调整样式

你可以通过修改 option 对象中的配置项来调整图表的样式，例如标题、图例、坐标轴等。

高级应用

1. 多系列堆积图

要创建多系列堆积图，只需在 series 数组中添加更多系列即可：

series: [{
    name: '系列1',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
}, {
    name: '系列2',
    type: 'bar',
    data: [10, 5, 26, 15, 12, 25]
}]

2. 饼状堆积图

ECharts 还支持将堆积图转换为饼状图。只需将 type 属性从 'bar' 改为 'pie' 即可：

series: [{
    name: '系列1',
    type: 'pie',
    radius: '55%',
    data: [
        {value: 5, name: '衬衫'},
        {value: 20, name: '羊毛衫'},
        {value: 36, name: '雪纺衫'},
        {value: 10, name: '裤子'},
        {value: 10, name: '高跟鞋'},
        {value: 20, name: '袜子'}
    ]
}]

总结

通过学习本文，你现在已经掌握了使用 ECharts 创建堆积图的基本方法。堆积图可以帮助你更直观地分析复杂数据，从而更好地理解数据背后的规律。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --