正文

教你轻松用echarts制作堆积图，数据分析更直观

/0 浏览量
0330

堆积图是一种用于展示多组数据在相同时间或空间维度上的累积关系的图表。它可以帮助我们更直观地理解数据的趋势和组成。ECharts 是一个使用 JavaScript 实现的开源可视化库，能够轻松实现各种图表的制作。下面，我将详细讲解如何使用 ECharts 制作堆积图。

准备工作

在开始之前，请确保你的环境中已经安装了 ECharts。可以通过以下方式安装：

// 使用 npm 安装 ECharts
npm install echarts

// 使用 CDN 链接引入 ECharts
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

创建基本的堆积图

HTML 结构

首先，我们需要创建一个用于放置图表的容器。可以使用一个简单的 div 元素。

<div id="main" style="width: 600px;height:400px;"></div>

初始化图表

接下来，在 JavaScript 中初始化图表。这里我们使用 echarts.init() 方法来创建图表实例。

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]
    }]
};

在这个例子中，我们创建了一个包含衬衫、羊毛衫、雪纺衫等商品的销量数据。xAxis 定义了图表的横坐标，series 定义了图表的数据和类型。

渲染图表

最后，将配置好的选项设置到图表实例中，并调用 setOption() 方法来渲染图表。

myChart.setOption(option);

高级堆积图

ECharts 支持多种堆积图类型，例如：

  • 堆叠堆积图：所有系列数据在垂直方向上堆叠。
  • 百分比堆积图：每个系列的数据相对于整个图表的数据进行百分比堆叠。

要创建堆叠堆积图，只需将 type 属性设置为 'stack'，如下所示：

series: [{
    name: '销量',
    type: 'bar',
    stack: '总量',
    data: [5, 20, 36, 10, 10, 20]
}, {
    name: '其他',
    type: 'bar',
    stack: '总量',
    data: [10, 15, 20, 30, 10, 20]
}]

要创建百分比堆积图，可以将 type 属性设置为 'pie'，并设置 label 的 percentage 属性为 true。

series: [{
    name: '销量',
    type: 'pie',
    radius: '55%',
    label: {
        formatter: '{b|{c}}{per|{d}%}',
        rich: {
            b: {
                fontSize: 16,
                lineHeight: 40
            },
            per: {
                color: '#999',
                position: 'inside',
                fontSize: 14
            }
        }
    },
    data: [
        {value: 335, name: '衬衫'},
        {value: 310, name: '羊毛衫'},
        {value: 234, name: '雪纺衫'},
        {value: 135, name: '裤子'},
        {value: 1548, name: '高跟鞋'},
        {value: 835, name: '袜子'}
    ]
}]

总结

通过以上步骤，你可以轻松地使用 ECharts 制作堆积图，并通过堆积图更直观地分析数据。ECharts 提供了丰富的图表类型和配置选项，可以帮助你实现各种复杂的数据可视化需求。希望这篇文章能帮助你更好地掌握 ECharts 的使用方法。

-- 展开阅读全文 --