如何手动添加图例

<div class="legend-container">
  <span class="legend-item" style="background-color: #FF0000;"></span>
  <span class="legend-label">红色线条</span>
</div>
<div class="legend-container">
  <span class="legend-item" style="background-color: #00FF00;"></span>
  <span class="legend-label">绿色线条</span>
</div>
<div class="legend-container">
  <span class="legend-item" style="background-color: #0000FF;"></span>
  <span class="legend-label">蓝色线条</span>
</div>

.legend-container {
  margin-bottom: 10px;
}

.legend-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

.legend-label {
  vertical-align: middle;
}