meilan-app/src/components/h-legend/h-legend.vue

<template>
  <view class="h-legend-container">
    <view v-for="(item, index) in legendData" :key="index" class="legend-item"
      :style="{ marginRight: index === legendData.length - 1 ? '0' : itemSpacing + 'rpx' }">
      <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
      <text class="legend-text" :style="{ fontSize: textSize + 'rpx', color: textColor }">
        {{ item.name }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HLegend',
  props: {
    // 图例数据数组
    legendData: {
      type: Array,
      default: () => []
    },
    // 图例颜色块大小
    colorSize: {
      type: Number,
      default: 24
    },
    // 文字大小
    textSize: {
      type: Number,
      default: 24
    },
    // 文字颜色
    textColor: {
      type: String,
      default: '#333333'
    },
    // 图例间距
    itemSpacing: {
      type: Number,
      default: 32
    }
  }
}
</script>

<style lang="scss" scoped>
.h-legend-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  padding: 16rpx 0;
}

.legend-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.legend-color {
  border-radius: 4rpx;
  margin-right: 12rpx;
  margin-top: 2rpx;
  flex-shrink: 0;
  width: 45rpx;
  height: 22rpx;
}

.legend-text {
  font-weight: 400;
  white-space: nowrap;
}
</style>