数据可视化之条形图：特点，应用场景，以及效果展示与代码绘制

凡梦_leo

已于 2024-10-14 22:11:44 修改

阅读量994

点赞数 23

分类专栏：数据可视化 # Echarts 文章标签：信息可视化 python pandas 大数据 spark echarts 数据分析

于 2024-10-14 22:05:41 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/142930071

版权

数据可视化同时被 2 个专栏收录

18 篇文章

订阅专栏

Echarts

18 篇文章

订阅专栏

学习：知识的初次邂逅
复习：知识的温故知新
练习：知识的实践应用

一、条形图特点

二、应用场景

三，条形图效果与代码绘制

一、条形图特点

易于比较：
- 条形图以水平或垂直的条形展示数据，使得不同类别之间的数据大小对比非常直观。无论是比较数量、频率还是其他数值指标，用户都可以快速看出哪个类别具有更高或更低的值。
- 例如，在比较不同品牌手机的销量时，条形图可以清晰地显示每个品牌的销售数量差异。
适应不同数据范围：
- 对于数据范围较大或较小的情况都能较好地适应。无论是表示大量的数据还是微小的差异，条形图都可以通过调整条形的长度或高度来准确呈现。
- 比如，在展示不同地区的人口数量时，人口多的地区条形较长，人口少的地区条形较短，即使数量差距很大也能清晰展示。
可展示多组数据：
- 可以方便地展示多组相关数据，通过不同的颜色、图案或分组方式来区分。这有助于用户同时比较多个变量或不同时间段的数据变化。
- 例如，在分析公司不同部门在不同季度的销售额时，可以使用分组条形图，将每个部门的销售额在不同季度用不同颜色的条形表示，以便直观地看出各部门的销售趋势和差异。
灵活性高：
- 条形的方向可以是水平或垂直，根据数据特点和展示需求进行选择。此外，还可以对条形进行排序、添加标签、设置颜色等操作，以满足不同的可视化要求。
- 对于数据标签较长的情况，可以选择水平条形图，以避免标签重叠；对于需要强调数据大小顺序的情况，可以对条形进行排序展示。
占用空间灵活：
- 根据数据的特点和展示空间的限制，可以灵活调整条形图的布局。如果数据类别较多而空间有限，可以采用紧凑的布局方式；如果需要突出某些关键类别，可以适当扩大其条形的宽度或高度。
- 例如，在手机屏幕上展示数据时，可以根据屏幕尺寸和分辨率选择合适的条形图布局，以确保数据清晰可读。

二、应用场景

市场调研分析：
- 在市场调研中，条形图可用于展示消费者对不同品牌的偏好程度、不同产品属性的重要性评级等。
- 例如，通过条形图展示消费者对各个品牌手机的满意度评分，帮助企业了解自身产品在市场中的竞争地位，以及消费者的需求痛点。
项目进度管理：
- 在项目管理中，条形图可以用来展示项目任务的进度情况。每个任务可以用一个条形表示，条形的长度代表任务的完成进度，不同颜色可以表示不同的任务阶段。
- 这样项目团队成员可以直观地了解项目的整体进展，及时发现滞后的任务并采取相应措施。
学术研究报告：
- 在学术研究中，条形图可用于展示实验结果、调查数据等。例如，比较不同处理方法下的实验效果、不同学科的学生人数分布等。
- 条形图能够使研究结果更加直观地呈现，方便读者理解和比较不同数据之间的差异。
人口统计数据展示：
- 政府部门和统计机构可以使用条形图展示不同地区的人口数量、年龄分布、性别比例等信息。
- 比如，用条形图比较不同城市的人口年龄结构，帮助政策制定者了解人口特征，制定相应的社会政策和发展规划。
销售业绩分析：
- 企业可以用条形图展示不同产品的销售业绩、不同销售渠道的销售额等。通过对比不同类别之间的条形高度，可以快速了解哪些产品或渠道表现出色，哪些需要改进。
- 例如，在月度销售报告中，用条形图展示各个产品的销售额，帮助管理层做出决策，调整销售策略。

三，条形图效果与代码绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>条形图</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="root" style="width: 80%;height: 400px;"></div>
<script>
    var my_bar = echarts.init(document.getElementById('root'));
    var option = {
        title: {
            text: '2月份各设备分别的平均产值 总产值为：755590'
        },
        xAxis: {
            type: "value",
            boundaryGap: ['0%', '20%']
        },
        yAxis: {
            type: 'category',
            data: ['油管', '等离子', '切管机','大激光','小激光'],
            name: '2月份',
        },
        tooltip: {},
        grid: {},
        legend: {
            data: ['数据1', "数据2"]
        },
        series: [
            {
                type: "bar",
                realtimeSort: true,
                data: [4097.25,452.35,2559.45,26152.6,4517.85],
                colorBy:"data", //设置每一个柱状颜色是否相同 默认是相同的 也就是series
                realtimeSort:true,//排序 从小到大
                label: { //设置柱状图里面的字体
                            show: true,
                            color: 'red',
                            position: "right", //调整字体的位置
                            fontSize: 18,
                            fontFamily: '幼圆',
                            fontWeight: 'bold',
                            offset: [0, 0],
                            formatter: function (params) { // 设置格式化函数// params 是包含数据信息的对象，例如 params.value 表示当前柱状图的数值
                                // 在这里可以自定义显示格式
                                return params.value + '元'; // 返回数值作为默认格式
                            },
                            valueAnimation: true//实时改变标签 这个属性要设置为true
                        },

            }
        ]
    };
    my_bar.setOption(option)
</script>
</body>
</html>