49 lines
908 B
Vue
49 lines
908 B
Vue
<template>
|
|
<view class="legend-container">
|
|
<view class="legend-title">{{ dimensionName ? `当前维度：${dimensionName}` : '分组' }}</view>
|
|
<view class="legend-list">
|
|
<view v-for="group in groups" :key="group.value" class="legend-item">
|
|
<text>{{ group.label || group.value }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Legend',
|
|
props: {
|
|
groups: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
dimensionName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.legend-container {
|
|
padding: 8px 16px;
|
|
background: #f7f7f7;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.legend-title {
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
.legend-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.legend-item {
|
|
background: #e3e6ef;
|
|
border-radius: 4px;
|
|
padding: 2px 8px;
|
|
font-size: 12px;
|
|
}
|
|
</style> |