|
|
@@ -4,6 +4,7 @@ import * as echarts from 'echarts'
|
|
|
type ClassifyItem = {
|
|
|
category?: string
|
|
|
name?: string
|
|
|
+ deviceCode?: string
|
|
|
value?: number | string
|
|
|
}
|
|
|
|
|
|
@@ -24,8 +25,14 @@ const barPalette = [
|
|
|
['#8c7cff', '#6854ee']
|
|
|
]
|
|
|
|
|
|
-const categories = computed(() => props.data.map((item) => item.category || item.name || '未分类'))
|
|
|
-const values = computed(() => props.data.map((item) => Number(item.value ?? 0)))
|
|
|
+const displayData = computed(() => {
|
|
|
+ const topData = props.data.filter((item) => item.deviceCode === 'top')
|
|
|
+ return topData.length > 0 ? topData : props.data
|
|
|
+})
|
|
|
+const categories = computed(() =>
|
|
|
+ displayData.value.map((item) => item.category || item.name || '未分类')
|
|
|
+)
|
|
|
+const values = computed(() => displayData.value.map((item) => Number(item.value ?? 0)))
|
|
|
|
|
|
const escapeHtml = (value: string) =>
|
|
|
value.replace(/[&<>"']/g, (char) => {
|
|
|
@@ -139,7 +146,7 @@ const chartOption = computed(() => ({
|
|
|
}))
|
|
|
|
|
|
const renderChart = () => {
|
|
|
- if (!chartRef.value || props.loading || props.data.length === 0) return
|
|
|
+ if (!chartRef.value || props.loading || displayData.value.length === 0) return
|
|
|
if (!chart) {
|
|
|
chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
|
|
|
}
|
|
|
@@ -173,11 +180,11 @@ onBeforeUnmount(() => {
|
|
|
<div>
|
|
|
<h3>分类 Top</h3>
|
|
|
</div>
|
|
|
- <span class="soft-badge">Top {{ data.length }}</span>
|
|
|
+ <span class="soft-badge">Top {{ displayData.length }}</span>
|
|
|
</div>
|
|
|
|
|
|
- <div v-show="data.length > 0 && !loading" ref="chartRef" class="chart-el"></div>
|
|
|
- <div v-if="data.length === 0 || loading" class="empty-state">
|
|
|
+ <div v-show="displayData.length > 0 && !loading" ref="chartRef" class="chart-el"></div>
|
|
|
+ <div v-if="displayData.length === 0 || loading" class="empty-state">
|
|
|
{{ loading ? '加载中...' : '暂无分类数据' }}
|
|
|
</div>
|
|
|
</section>
|