喜欢的类型帅死我了

布丁碎

已于 2024-03-13 17:18:22 修改

阅读量991

点赞数 29

文章标签：开发语言 python 信息可视化

于 2024-03-12 22:45:36 首次发布

本文链接：https://blog.csdn.net/2301_77834805/article/details/136664804

版权

本文详细介绍了柱状图和条形图这两种常用的数据可视化工具，包括它们的定义、特点、应用场景，并通过ECharts实例展示了如何创建和使用它们。同时，对比了柱状图和条形图在x轴和y轴数据格式上的区别。

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

柱状图和条形图

柱状图和条形图是常用的数据可视化工具，用于比较不同类别或组之间的数据大小或变化趋势。它们在统计学、商业分析和科学研究等领域广泛应用。

一.什么是柱状图和条形图

1.柱状图

柱状图最常见，它利用柱子高度，反映数据的差异。横轴代表比较的类别，纵轴代表类别对应的刻度值。要显示数据的分布特征，或要表示同一件事物在不同期间的变化情况，就要选择柱形图。

2.条形图

条形图其实是柱形图的旋转图表，又称横向柱形图。它用条形长短来观察各种信息的大小，比较各种数值或比例。

二.条形图和柱状图的实例

1.条形图

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   
<script src="js/echarts.js"></script>
</head>
<body>
   
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
// 步骤3：基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
// 步骤4：准备配置项
       var option={
           title:{
               text:'成绩',
subtext:'数学成绩'
           },
           tooltip:{
               trigger:'axis',
           },
           toolbox:{
               show:true,
               feature: {
   mark: { show: true },
   dataView: { show: true, readOnly: false },
   magicType: { show: true, type: ['line', 'bar'] },
   restore: { show: true },
   saveAsImage: { show: true },
      },
           },
       calculable: true,
       xAxis:[
           {
               type:'value',
               boundaryGap:[0, 0.01],
           },
       ],
       yAxis:[
           {
               type:'category',
               data:['小明','小红','小兰'],
           },
       ],
       series: [
{
name: '数学',
type: 'bar',
markPoint: { // 标记点
data: [
{
type: 'max', name: '最大值'
},{
type: 'min', name: '最小值'
}
]
},
markLine: { // 标记线
data: [
{
type: 'average', name: '平均值'
}
]
},
label: { // 柱状图上的文字设置
show: true, // 是否显示
rotate: 60, // 旋转角度
position: 'top' // 显示位置
},
barWidth: '30%', // 柱的宽度
data: ['78','60','89']
}
]
}
// 步骤5：将配置项设置给echarts实例对象
       myChart.setOption(option);
       </script>
</body>
</html>