数据可视化之柱状图：特点，应用场景，以及效果展示与代码绘制
数据可视化之柱状图：特点，应用场景，以及效果展示与代码绘制
柱状图是一种常见的数据可视化工具，通过矩形条的高度或长度来直观地表示数据的大小。本文将详细介绍柱状图的特点、应用场景，并通过ECharts展示如何绘制柱状图和堆叠柱状图。
柱状图特点
直观比较：柱状图以矩形条的高度或长度来直观地表示数据的大小，使得不同类别之间的数据差异一目了然。例如，比较不同产品的销售额、不同地区的人口数量等，用户可以快速看出哪个类别的数据值较大，哪个较小。
清晰展示数量差异：能够清晰地展示不同类别之间的数量差异程度。当数据差距较大时，柱状图可以通过矩形条的明显长短差异突出这种差距；当数据差距较小时，也能精确地反映出细微的区别。
易于理解：结构简单，由坐标轴和矩形条组成，不涉及复杂的图形元素，对于普通观众和非专业数据分析人员来说非常容易理解。即使没有专业的统计知识，也能从柱状图中快速获取关键信息。
可分组比较：可以进行分组展示，方便对多个相关类别进行比较。比如，将不同产品按照不同销售渠道进行分组，然后用柱状图展示每个渠道中各产品的销售情况，从而更深入地分析数据。
适合少量类别：对于类别数量较少的情况效果较好，一般来说，当类别数量在十几个以内时，柱状图能够清晰地展示每个类别的数据。但如果类别过多，柱状图可能会显得拥挤和杂乱，影响可读性。
应用场景
销售数据分析：企业可以用柱状图展示不同产品在不同时间段的销售数量、销售额等指标。通过比较不同产品的销售情况，了解哪些产品畅销，哪些产品滞销，从而调整生产和销售策略。例如，在季度销售报告中，用柱状图展示各个产品的季度销售额，帮助管理层快速了解公司的销售业绩。
市场调研：在市场调研中，柱状图可用于展示不同品牌在市场中的占有率。或者比较消费者对不同产品属性的满意度，如价格、质量、服务等。这样可以帮助企业了解自己在市场中的地位以及消费者的需求偏好。
人口统计：政府部门和研究机构可以使用柱状图展示不同地区的人口数量、年龄分布、性别比例等信息。例如，用柱状图比较不同城市的人口数量，了解人口分布情况，为城市规划和资源分配提供依据。
学术研究：在学术研究中，柱状图可用于展示实验结果、调查数据等。比如，比较不同处理方法下的实验效果、不同学科的学生人数等。柱状图能够直观地呈现数据，使研究结果更易于理解和交流。
柱状图的效果展示与代码绘制
柱状图
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,
},
{
type: "bar",
name:"数据2",
data:[10,{
value:35,
itemStyle:{
color: "red"
}
},20,60,50,40,35],
showBackground:true,
backgroundStyle:{
color:'red',
opacity:0.1
},
label:{
show:true,
},
}
]
};
my_bar.setOption(option)
堆叠柱状图
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",
showBackground: true,
backgroundStyle: {
color: 'red',
opacity: 0.1
},
label: {
show: true,
},
stack:"相同的标记"
},
{
type: "bar",
name: "数据2",
data: [10, 30, 30+5, 15, 35, 30, 70],
colorBy: "series",
showBackground: true,
backgroundStyle: {
color: 'red',
opacity: 0.1
},
label: {
show: true,
},
stack:"相同的标记"
}
]
};
my_bar.setOption(option)