正文

教你用ECharts轻松制作堆积图，数据可视化不再难！

/0 浏览量
0831

堆积图是一种常用的数据可视化图表，它能够将多个数据系列堆叠在一起，从而直观地展示不同系列之间的比较关系。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型和灵活的配置选项，使得制作堆积图变得非常简单。下面，我将详细讲解如何使用 ECharts 制作堆积图。

1. 准备工作

在开始制作堆积图之前，你需要确保以下几点：

  • 安装 ECharts：你可以通过 npm、yarn 或直接下载 ECharts 的 JavaScript 文件来安装 ECharts。
  • 引入 ECharts：在你的 HTML 文件中引入 ECharts 的 JavaScript 文件。
  • 准备数据：堆积图需要的数据通常是二维数组，每个数组元素代表一个数据点。

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.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    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>

在这个例子中，我们创建了一个包含六个数据点的堆积图，其中每个数据点代表一个商品类别及其销量。

3. 调整堆积图样式

ECharts 提供了丰富的配置选项，你可以通过修改 option 对象来调整堆积图的样式。以下是一些常用的配置选项：

  • color：设置图表的颜色。
  • barWidth：设置柱状图的宽度。
  • label：设置柱状图上的标签。
  • itemStyle：设置柱状图的样式，如阴影、渐变等。

4. 高级堆积图

除了基本堆积图，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'));

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

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

在这个例子中，我们创建了两个数据系列，它们都堆叠在同一个 stack 上，从而形成了一个堆叠堆积图。

5. 总结

通过以上讲解，相信你已经掌握了使用 ECharts 制作堆积图的基本方法。ECharts 提供了丰富的图表类型和配置选项，使得数据可视化变得更加简单和有趣。希望这篇文章能帮助你轻松制作出精美的堆积图！

-- 展开阅读全文 --