能不能修改文件的样式使各个图分布在四周使四个图中间的空隙稍微大一点，且将图上方的注释移到图的右侧且显示数量例如大保养 10000这样子

为了实现您的要求，您需要调整文件中的样式部分，并对每个图表的部分设置进行相应更改。以下是具体的步骤和代码修改：

### 修改 HTML 结构
首先，在 HTML 中添加一个新的容器 `label` 用于存放图表上方的注释，并将该注释移动到图表的右侧。

<div class="chart-container">
  <div id="chart-1" class="chart" style="width: 450px; height: 300px;"></div>
  <div class="chart-label">在库状态<br>在库: 2300<br>出库: 200000</div>
</div>
<!-- 其他图表同理 -->
<div class="chart-container">
  <div id="chart-2" class="chart" style="width: 450px; height: 300px;"></div>
  <div class="chart-label">检定状态<br>检定中: 2300<br>已检定: 200000</div>
</div>
<div class="chart-container">
  <div id="chart-3" class="chart" style="width: 450px; height: 300px;"></div>
  <div class="chart-label">表具状态<br>新表库存: 350<br>旧表库存: 500<br>已领用: 1000<br>已返厂: 5<br>已拆除: 45</div>
</div>
<div class="chart-container">
  <div id="chart-4" class="chart" style="width: 450px; height: 300px;"></div>
  <div class="chart-label">保养状态<br>大保养: 10000<br>小保养: 2000<br>未保养: 2201100<br>保养超期: 100</div>
</div>

### 修改 CSS 样式
然后，修改 `.chart-container` 和 `.chart-label` 的样式，以实现图表分布在四周且图中间有更大的空隙，并将注释移到图表的右侧。

.meter-status-chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 40px; /* 调整图表之间的间隙 */
  justify-content: center;
}

.chart-container {
  display: flex;
  flex-direction: row; /* 将布局改为水平排列 */
  align-items: center;
  border: 2px solid #f0f0f0;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  width: auto; /* 自适应宽度 */
}

.chart {
  width: 300px; /* 减少图表宽度以留出空间给标签 */
  height: 300px;
}

.chart-label {
  margin-left: 20px; /* 添加左边距以便与图表之间保持一定距离 */
  text-align: left;
  font-size: 14px;
  color: #888888;
}

### 最终效果
通过上述修改，四个图表将分别分布在页面的四角，中间的空隙更大，图上方的注释将被移到图表的右侧，并显示具体的数量值。

您可以复制并粘贴以上代码到您的文件中，然后预览效果。如果需要进一步调整，可以通过修改 `gap` 属性来增加或减少图表之间的间隙。