手把手教你用ECharts画柱状图

最新推荐文章于 2024-08-27 12:00:00 发布

大数据v

最新推荐文章于 2024-08-27 12:00:00 发布

阅读量2.5w

点赞数 6

文章标签：可视化数据可视化人工智能数据挖掘编程语言

本文链接：https://blog.csdn.net/zw0Pi8G5C1x/article/details/112914066

版权

本文手把手教你使用ECharts创建柱状图，包括简单柱状图、聚合柱状图、水平聚合柱状图和堆叠柱状图，通过实例展示各种效果，适合数据可视化初学者。

摘要由CSDN通过智能技术生成

导读：柱状图主要用于表示离散数据的频数，也是一种基础可视化图。

作者：王大伟

来源：大数据DT（ID：hzdashuju）

01 简单的柱状图

在ECharts中制作柱状图也十分简单，通过将series中的type设置为bar即可，代码如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [100, 150, 120, 90, 50, 130, 110],
        type: 'bar'
    }]
};

可视化结果如图4-8所示。

▲图4-8 简单的柱状图

我们同样可以在代码中添加label以显示具体数值，例如在每个柱子上显示对应数值，代码如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [100, 150, 120, 90, 50, 130, 110],
        type: 'bar',
        label: {
                show: true,
                position: 'top'
            },
    }] 
};

可视化结果如图4-9所示。