统计字段机值: 需求计划,完成指标:99.11% 框架协议,完成指标:101.97% 公开采购,完成指标:100.56% 独加采购,完成指标:100% 招标采购,完成指标:78.6% 平台采购,完成指标:100% 采购资金,完成指标:140.42% 库存周转,完成指标:293.23% 根据这些信息在html中写出一个柱状图
时间: 2023-12-21 18:04:06 浏览: 63
以下是一个简单的 HTML 柱状图,其中使用了 CSS 样式来设置不同字段的颜色和高度。
```html
<!DOCTYPE html>
<html>
<head>
<title>采购完成指标柱状图</title>
<style>
.bar {
display: inline-block;
width: 50px;
height: 200px;
background-color: #4CAF50;
margin-right: 10px;
text-align: center;
color: white;
font-size: 16px;
font-weight: bold;
position: relative;
}
.bar span {
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
text-align: center;
font-size: 14px;
font-weight: normal;
}
.demand-plan {
height: 198px;
background-color: #4286f4;
}
.framework-agreement {
height: 203px;
background-color: #ff9800;
}
.public-procurement {
height: 201px;
background-color: #9c27b0;
}
.single-procurement {
height: 200px;
background-color: #e91e63;
}
.tender-procurement {
height: 157px;
background-color: #f44336;
}
.platform-procurement {
height: 200px;
background-color: #00bcd4;
}
.procurement-funds {
height: 280px;
background-color: #8bc34a;
}
.inventory-turnover {
height: 586px;
background-color: #607d8b;
}
</style>
</head>
<body>
<div class="bar demand-plan">
<span>需求计划</span>
99.11%
</div>
<div class="bar framework-agreement">
<span>框架协议</span>
101.97%
</div>
<div class="bar public-procurement">
<span>公开采购</span>
100.56%
</div>
<div class="bar single-procurement">
<span>独加采购</span>
100%
</div>
<div class="bar tender-procurement">
<span>招标采购</span>
78.6%
</div>
<div class="bar platform-procurement">
<span>平台采购</span>
100%
</div>
<div class="bar procurement-funds">
<span>采购资金</span>
140.42%
</div>
<div class="bar inventory-turnover">
<span>库存周转</span>
293.23%
</div>
</body>
</html>
```
这个柱状图中每个条形都代表了一个字段的完成指标,高度表示完成率。不同字段使用了不同的颜色,并在下方显示了字段名称和完成率。你可以根据需要调整每个条形的颜色和高度。
阅读全文