css上如何显示收入图表

CSS可以帮助我们在网页上展示各种各样的图表，包括收入图表。以下是介绍如何使用CSS展示收入图表的方法。

//HTML代码
<div class="chart">
  <div class="bar" style="height:30%"></div>
  <div class="bar" style="height:60%"></div>
  <div class="bar" style="height:20%"></div>
  <div class="bar" style="height:45%"></div>
  <div class="bar" style="height:80%"></div>
</div> 

首先，在HTML中创建一个包含多个div元素的容器，用来展示整个收入图表。在每个div元素中，定义一个class为“bar”，并使用内联样式属性设置每个“bar”的高度百分比。

//CSS代码
.chart {
  display: flex;
  align-items: flex-end;
  height: 300px;
  width: 80%;
  margin: 0 auto;
  background-color: #EFEFEF;
}
.bar {
  width: 20%;
  background-color: #3F3F3F;
  margin: 0 1%;
  border-radius: 5px 5px 0 0;
  transition: height .3s ease-in-out;
}
.bar:hover {
  height: 100%;
  background-color: #A8A8A8;
} 

接下来，在CSS中对包含容器和每个“bar”元素进行样式设置。在容器类名中，设置容器为flex布局，并且每个“bar”元素的高度将从底部开始而不是从顶部开始，也就是使用了align-items: flex-end属性。设置容器高度和宽度，以及背景颜色。在每个“bar”类名中，设置每个“bar”元素的宽度，背景颜色，外边距，以及使用圆角属性添加美观度。同时，为“bar”元素添加一个动画效果，在鼠标悬浮时，将高度百分比改为100%，同时背景颜色改变。

最终的效果是一个显示收入图表的容器，其中包含多个“bar”元素，每个元素的高度代表该项收入的百分比，每个元素的鼠标悬浮效果代表用户交互。这就是使用CSS展示收入图表的方法。