正文

新手必看！如何用ECharts轻松制作堆积图，可视化数据分析全攻略

/0 浏览量
0808

堆积图是一种常用的数据可视化图表，它能够帮助我们直观地展示多个数据系列在时间序列或其他分类上的累积情况。ECharts 是一个使用 JavaScript 实现的开源可视化库，它功能强大且易于使用。本篇攻略将带你一步步学会如何用 ECharts 制作堆积图，并进行数据分析。

选择合适的堆积图类型

在 ECharts 中，堆积图主要有两种类型：堆叠堆积图和百分比堆积图。

  • 堆叠堆积图：所有数据系列叠加在一起，每个系列的数据会覆盖其他系列。
  • 百分比堆积图：每个系列的数据以百分比的形式展示，总值为 100%。

根据你的数据和分析需求，选择合适的堆积图类型。

准备数据

在开始制作堆积图之前，你需要准备以下数据：

  • 数据系列：你想要展示的数据。
  • 分类轴：数据的分类，如时间、地区等。
  • 数据值：每个数据系列的具体数值。

以下是一个简单的数据示例：

var data = [
    {name: '系列1', value: [120, 200, 150, 80, 70, 110, 130]},
    {name: '系列2', value: [60, 70, 80, 110, 130, 150, 160]},
    {name: '系列3', value: [70, 110, 130, 150, 160, 170, 180]}
];

初始化 ECharts 实例

在 HTML 页面中引入 ECharts 库，并创建一个用于绘制图表的 DOM 元素。然后，初始化 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.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
    </script>
</body>
</html>

配置 ECharts 选项

接下来，配置 ECharts 选项，包括图表类型、数据系列、坐标轴等。

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [120, 200, 150, 80, 70, 110, 130]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [60, 70, 80, 110, 130, 150, 160]
        },
        {
            name: '系列3',
            type: 'bar',
            stack: '总量',
            data: [70, 110, 130, 150, 160, 170, 180]
        }
    ]
};

渲染图表

最后，使用 setOption 方法将配置项应用到 ECharts 实例中，渲染图表。

myChart.setOption(option);

总结

通过以上步骤，你已经成功使用 ECharts 制作了一个堆积图。你可以根据自己的需求修改数据、配置项等，以达到更好的可视化效果。希望这篇攻略能帮助你轻松掌握堆积图制作技巧，更好地进行数据分析。

-- 展开阅读全文 --