<template>
  <div class="echart-legend">
    <div v-for="(item, index) in legends" :key="index" class="legend-box">
      <div class="legend-icon"></div>
      <div class="legend-label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps<{
    legends: any[];
  }>();
</script>

<style lang="less" scoped>
  .echart-legend {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .legend-box {
      display: flex;
      align-items: center;

      &:nth-child(1) {
        .legend-icon {
          background-color: #3bd97a;
        }
      }
      &:nth-child(2) {
        .legend-icon {
          background-color: #d35400;
        }
      }
      &:nth-child(3) {
        .legend-icon {
          background-color: #c0392b;
        }
      }
      &:nth-child(4) {
        .legend-icon {
          background-color: #50b2f9;
        }
      }
      &:nth-child(5) {
        .legend-icon {
          background-color: #1fd0da;
        }
      }
      &:nth-child(6) {
        .legend-icon {
          background-color: #ff6666;
        }
      }
      &:nth-child(7) {
        .legend-icon {
          background-color: #3b4bd9;
        }
      }
      &:nth-child(8) {
        .legend-icon {
          background-color: #f18736;
        }
      }
    }

    .legend-icon {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 6px;
    }
  }
</style>
