资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

柱状图的详细属性

创作时间:

作者:

@小白创作中心

柱状图的详细属性

引用

CSDN

https://blog.csdn.net/qq_55006020/article/details/142929933

柱状图是一种常见的数据可视化工具，通过矩形条的高度或长度来直观地表示数据的大小。它在销售数据分析、市场调研、人口统计等领域有着广泛的应用。本文将详细介绍柱状图的特点、应用场景，并通过ECharts库展示如何绘制普通柱状图和堆叠柱状图。

一、柱状图特点

直观比较：

柱状图以矩形条的高度或长度来直观地表示数据的大小，使得不同类别之间的数据差异一目了然。
例如，比较不同产品的销售额、不同地区的人口数量等，用户可以快速看出哪个类别的数据值较大，哪个较小。

清晰展示数量差异：

能够清晰地展示不同类别之间的数量差异程度。
当数据差距较大时，柱状图可以通过矩形条的明显长短差异突出这种差距；当数据差距较小时，也能精确地反映出细微的区别。

易于理解：

结构简单，由坐标轴和矩形条组成，不涉及复杂的图形元素，对于普通观众和非专业数据分析人员来说非常容易理解。
即使没有专业的统计知识，也能从柱状图中快速获取关键信息。

可分组比较：

可以进行分组展示，方便对多个相关类别进行比较。
比如，将不同产品按照不同销售渠道进行分组，然后用柱状图展示每个渠道中各产品的销售情况，从而更深入地分析数据。

适合少量类别：

对于类别数量较少的情况效果较好，一般来说，当类别数量在十几个以内时，柱状图能够清晰地展示每个类别的数据。
但如果类别过多，柱状图可能会显得拥挤和杂乱，影响可读性。

二、应用场景

销售数据分析：

企业可以用柱状图展示不同产品在不同时间段的销售数量、销售额等指标。
通过比较不同产品的销售情况，了解哪些产品畅销，哪些产品滞销，从而调整生产和销售策略。
例如，在季度销售报告中，用柱状图展示各个产品的季度销售额，帮助管理层快速了解公司的销售业绩。

市场调研：

在市场调研中，柱状图可用于展示不同品牌在市场中的占有率。
或者比较消费者对不同产品属性的满意度，如价格、质量、服务等。
这样可以帮助企业了解自己在市场中的地位以及消费者的需求偏好。

人口统计：

政府部门和研究机构可以使用柱状图展示不同地区的人口数量、年龄分布、性别比例等信息。
例如，用柱状图比较不同城市的人口数量，了解人口分布情况，为城市规划和资源分配提供依据。

学术研究：

在学术研究中，柱状图可用于展示实验结果、调查数据等。
比如，比较不同处理方法下的实验效果、不同学科的学生人数等。
柱状图能够直观地呈现数据，使研究结果更易于理解和交流。

三、柱状图的效果展示与代码绘制

1. 普通柱状图

<!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: '我的柱状图'
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            name: '月份',
        },
        yAxis: {
            type:"value",
            boundaryGap: ['0%', '20%']
        },
        tooltip: {},
        grid: {},
         legend:{
            data:['数据1',"数据2"]
         },
        series:[
            {
                type: "bar",
                name: "数据1",
                data: [5, 25, 30, 10, 30, 25, 65],
                symbolSize: 20,
                smooth: true,
            },
            {
                //本章知识点 柱状图：  bar 类型
                type: "bar",
                name:"数据2",
                data:[10,{
                    value:35,
                    itemStyle:{
                        color: "red"
                    }
                },20,60,50,40,35],
                showBackground:true, //打开没有到达顶峰的柱状背景
                backgroundStyle:{//设置则需要属性true才会生效  设置背景颜色为红色
                    color:'red',
                    opacity:0.1
                },
                label:{  //柱状图上显示对应的数值
                    show:true,
                },
            }
        ]
    };
    my_bar.setOption(option)
</script>
</body>
</html>

2. 堆叠柱状图

<!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: '我的柱状图'
        },
        yAxis: {
            type: "value",
            boundaryGap: ['0%', '20%']
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            name: '月份',
        },
        tooltip: {},
        grid: {},
        legend: {
            data: ['数据1','数据2']
        },
        series: [
            {
                type: "bar",
                name: "数据1",
                realtimeSort: false,
                data: [5, 25, 30, 10, 30, 25, 65],
                colorBy: "data", //设置每一个柱状颜色是否相同 默认是相同的 也就是series
                // realtimeSort:true,//排序 从小到大
                showBackground: true, //打开没有到达顶峰的柱状背景
                backgroundStyle: {//设置则需要属性true才会生效  设置背景颜色为红色
                    color: 'red',
                    opacity: 0.1
                },
                label: {  //柱状图上显示对应的数值
                    show: true,
                },
                stack:"相同的标记"  //只要他们标记相同 就可以实现堆叠柱状图
            },
            {
                type: "bar",
                name: "数据2",
                data: [10, 30, 30+5, 15, 35, 30, 70],
                colorBy: "series", //设置每一个柱状颜色是否相同 默认是相同的 也就是series
                // realtimeSort:true,//排序 从小到大
                showBackground: true, //打开没有到达顶峰的柱状背景
                backgroundStyle: {//设置则需要属性true才会生效  设置背景颜色为红色
                    color: 'red',
                    opacity: 0.1
                },
                label: {  //柱状图上显示对应的数值
                    show: true,
                },
                stack:"相同的标记"
            }
        ]
    };
    my_bar.setOption(option)
</script>
</body>
</html>