From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 292 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 197 insertions(+), 95 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 7bd7307..27262ae 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -2,88 +2,156 @@
<div>
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
- <div style="height: 100%">
+ <div class="pie-chart-wrapper">
+ <div class="pie-center">
+ <span class="pie-center-value">{{ totalCategories }}</span>
+ <span class="pie-center-label">鍚堣(绫�)</span>
+ </div>
<Echarts
ref="chart"
:chartStyle="chartStyle"
- :grid="grid"
- :legend="workInProcessBarLegend"
- :series="workInProcessBarSeries"
- :tooltip="tooltip"
- :xAxis="workInProcessXAxis"
- :yAxis="workInProcessYAxis"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ :legend="landLegend"
+ :series="landSeries"
+ :tooltip="landTooltip"
+ :color="landColors"
+ :options="pieOptions"
style="height: 100%"
- class="work-in-process-chart"
- />
+ class="land-chart"
+ >
+ <div v-if="loaded && !dataList.length" class="chart-empty">鏆傛棤鏁版嵁</div>
+ </Echarts>
</div>
</div>
</div>
</template>
<script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'
+import { BI, baseChartOptions, withTooltip } from '../../theme.js'
-// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
-const workInProcessXAxis = ref([
- {
- type: 'category',
- axisTick: { show: false },
- axisLabel: {
- color: '#B8C8E0',
- interval: 0,
- rotate: 25
+const dataList = ref([])
+const loaded = ref(false)
+
+const landColors = BI.series
+
+// 澶х被鎬绘暟锛堝悇鍒嗙被涓嬬殑绫荤洰鏁颁箣鍜岋級
+const totalCategories = computed(() =>
+ dataList.value.reduce((sum, d) => sum + (Number(d.value) || 0), 0)
+)
+
+const landObjData = computed(() => {
+ const obj = {}
+ dataList.value.forEach((d) => {
+ obj[d.name] = d
+ })
+ return obj
+})
+
+// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
+const landLegend = computed(() => {
+ const data = dataList.value.map((d, idx) => ({
+ name: d.name,
+ icon: 'circle',
+ textStyle: {
+ fontSize: 14,
+ color: landColors[idx % landColors.length],
},
- data: [],
- },
-])
+ }))
-const workInProcessYAxis = [
- {
- type: 'value',
- axisLabel: { color: '#B8C8E0' },
- name: '',
- },
-]
-
-const workInProcessBarLegend = {
- show: false,
- textStyle: { color: '#B8C8E0' },
- data: [],
-}
-
-const workInProcessBarSeries = ref([
- {
- name: '浜у搧鏁伴噺',
- type: 'bar',
- barWidth: 25,
- barGap: 0,
- emphasis: {
- focus: 'series',
+ return {
+ show: data.length > 0,
+ orient: 'vertical',
+ top: 'center',
+ left: '50%',
+ itemGap: 20,
+ itemWidth: 8,
+ itemHeight: 8,
+ data,
+ formatter(name) {
+ const item = landObjData.value[name]
+ if (!item) return name
+ const short = name.length > 8 ? `${name.slice(0, 8)}鈥 : name
+ return `{title|${short}}{value|${item.value}}{unit|绫粆`
},
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#4EE4FF' },
- { offset: 1, color: '#00A4ED' },
- ],
+ textStyle: {
+ rich: {
+ title: {
+ fontSize: 13,
+ color: BI.text,
+ width: 108,
+ overflow: 'truncate',
+ },
+ value: {
+ color: BI.textStrong,
+ fontSize: 14,
+ fontWeight: 600,
+ padding: [0, 0, 0, 10],
+ },
+ unit: {
+ color: BI.text,
+ fontSize: 12,
+ },
},
- borderRadius: [4, 4, 0, 0]
+ },
+ }
+})
+
+// 鎻愮ず妗嗭細鍗犳瘮 + 瀛愬垎绫绘槑缁�
+const landTooltip = withTooltip({
+ trigger: 'item',
+ confine: true,
+ formatter(params) {
+ const d = params.data || {}
+ const val = Number(d.value || 0)
+ let html = `${params.marker}<b>${d.name || ''}</b> ${val} 绫� 路 ${params.percent}%`
+ const children = Array.isArray(d.children) ? d.children : []
+ if (children.length) {
+ const shown = children.slice(0, 8).map((c) => c.name).join('銆�')
+ html += `<br/><span style="color:${BI.text}">瀛愮被锛�</span>${shown}${children.length > 8 ? '鈥�' : ''}`
+ }
+ return html
+ },
+})
+
+// 鍙屽眰鐜舰楗煎浘
+const landSeries = computed(() => [
+ {
+ name: '浜у搧澶х被',
+ type: 'pie',
+ radius: ['42%', '58%'],
+ center: ['25%', '50%'],
+ itemStyle: {
+ borderColor: BI.sliceBorder,
+ borderWidth: 2,
+ borderRadius: 4,
},
label: {
- show: true,
- position: 'top',
- color: '#B8C8E0',
+ show: false,
},
- data: [],
+ minAngle: 8,
+ data: dataList.value,
+ animationType: 'scale',
+ animationEasing: 'elasticOut',
+ },
+ {
+ // 鍐呭湀杞ㄩ亾鐜�
+ type: 'pie',
+ radius: ['33%', '36%'],
+ center: ['25%', '50%'],
+ silent: true,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ color: 'rgba(74, 108, 240, 0.22)',
+ },
+ data: [1],
},
])
@@ -92,51 +160,85 @@
height: '100%',
}
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '15%',
- containLabel: true,
-}
+const pieOptions = baseChartOptions
-const tooltip = {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- formatter: function (params) {
- let result = params[0].axisValueLabel + '<br/>'
- params.forEach((item) => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
- })
- return result
- },
-}
-
-// 鑾峰彇鍚勪骇鍝佸ぇ绫诲垎甯�
-const getProductCategoryDistribution = () => {
- productCategoryDistribution()
- .then((res) => {
- if (res.code === 200 && res.data && res.data.items) {
- workInProcessXAxis.value[0].data = res.data.items.map(item => item.name)
- workInProcessBarSeries.value[0].data = res.data.items.map(item => parseInt(item.value))
- }
- })
- .catch((error) => {
- console.error('鑾峰彇鍚勪骇鍝佸ぇ绫诲垎甯冨け璐�:', error)
- })
+const loadData = async () => {
+ try {
+ const res = await productCategoryDistribution()
+ const items = res?.data?.items || []
+ dataList.value = items.map((it) => ({
+ name: it.name,
+ value: Number(it.value || 0),
+ rate: it.rate,
+ children: Array.isArray(it.children) ? it.children : [],
+ }))
+ } catch (e) {
+ console.error('鑾峰彇浜у搧澶х被鍒嗗竷澶辫触:', e)
+ dataList.value = []
+ } finally {
+ loaded.value = true
+ }
}
onMounted(() => {
- getProductCategoryDistribution()
+ loadData()
})
</script>
<style scoped>
.panel-item-customers {
- border: 1px solid #1a58b0;
+ border: 1px solid var(--bi-panel-border);
+ background: var(--bi-panel-bg);
+ border-radius: 8px;
padding: 18px;
width: 100%;
height: 420px;
}
+
+.pie-chart-wrapper {
+ position: relative;
+ width: 100%;
+ height: 384px;
+ background: transparent;
+}
+
+.pie-center {
+ position: absolute;
+ left: 25%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ pointer-events: none;
+ z-index: 2;
+}
+
+.pie-center-value {
+ font-weight: 600;
+ font-size: 22px;
+ color: var(--bi-text-strong);
+ font-variant-numeric: tabular-nums;
+}
+
+.pie-center-label {
+ font-size: 12px;
+ color: var(--bi-text);
+}
+
+.chart-empty {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ height: 384px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--bi-text);
+ font-size: 14px;
+ letter-spacing: 1px;
+ pointer-events: none;
+}
</style>
--
Gitblit v1.9.3