From 710bcdab858d407d3be9e7a1df32282379c29df6 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 28 一月 2026 17:58:00 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_New' into dev_New
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 91 ++++++++++++++++++++-------------------------
1 files changed, 40 insertions(+), 51 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index aa202b6..c787fce 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -2,7 +2,8 @@
<div>
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
- <div style="height: 70%">
+ <div class="pie-chart-wrapper">
+ <div class="pie-background"></div>
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -10,7 +11,7 @@
:series="landSeries"
:tooltip="landTooltip"
:color="landColors"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ :options="pieOptions"
style="height: 100%"
class="land-chart"
/>
@@ -82,17 +83,20 @@
// 鎻愮ず妗�
const landTooltip = {
- triggerOn: 'click',
+ // triggerOn: 'hover',
alwaysShowContent: true,
position: function (pt) {
return [pt[0], 130]
+ },
+ formatter: function (params) {
+ return `${params.name} (${params.value}绫�)`
},
}
// 鍙屽眰鐜舰楗煎浘
const landSeries = ref([
{
- name: '澶栧湀',
+ name: '浜у搧澶х被',
type: 'pie',
radius: ['35%', '55%'],
center: ['50%', '50%'],
@@ -104,27 +108,28 @@
lineHeight: 18,
rich: {
...dotRich,
- parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
+ parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
child: { fontSize: 12, color: '#fff', lineHeight: 18 },
},
formatter: function (params) {
const children = params?.data?.children || []
const parentName = params?.data?.name || ''
- const parentValue = params?.data?.value ?? 0
+ const rawVal = params?.data?.value
+ const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
const dot = `{${dotKey}|} `
- if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
- // 鐢� marker 鏄剧ず涓庢墖鍖哄悓鑹茬殑灏忓渾鐐癸紝鍐嶆樉绀虹埗绾у悕绉帮紝鍚庨潰鍒楀嚭 children 鐨� name + value
- return [
- `${dot}{parent|${parentName} ${parentValue}}`,
- ...children.map((c) => `{child|${c.name} ${c.value || 0}}`),
- ].join('\n')
+ const parentLine = `${dot}{parent|${parentName} (${parentValue}绫�)}`
+ if (!children.length) return parentLine
+ // 鐖剁骇鍏ㄩ儴鏄剧ず锛涘瓙绾ф渶澶� 5 涓紝瓒呭嚭鏄剧ず鐪佺暐鍙�
+ const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
+ if (children.length > 5) displayed.push('{child|鈥')
+ return [parentLine, ...displayed].join('\n')
},
},
labelLine: {
show: true,
- length: 40,
- length2: 40,
+ length: 20,
+ length2: 20,
lineStyle: {
color: '#B8C8E0',
},
@@ -134,7 +139,6 @@
return landColors[params.dataIndex % landColors.length]
},
},
- // 鍒濆缁戝畾涓哄搷搴斿紡鏁版嵁婧愶紝鍚庣画閫氳繃鎺ュ彛濉厖
data: dataList.value,
},
{
@@ -158,7 +162,12 @@
const chartStyle = {
width: '100%',
- height: '150%',
+ height: '126%',
+}
+
+const pieOptions = {
+ backgroundColor: 'transparent',
+ textStyle: { color: '#B8C8E0' },
}
const loadData = async () => {
@@ -194,45 +203,25 @@
height: 420px;
}
-.quality-cards {
- display: flex;
- gap: 12px;
+.pie-chart-wrapper {
+ position: relative;
width: 100%;
- height: 54px;
- justify-content: space-between;
- align-items: center;
+ height: 320px;
+ background: transparent;
}
-.quality-cardSec {
- display: flex;
-}
-
-.quality-cardTitle {
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- display: flex;
- align-items: flex-start;
- flex-direction: column;
-}
-
-.quality-card {
- width: 80px;
- height: 60px;
- background-size: cover;
+.pie-background {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-51.5%, -39%);
+ width: 360px;
+ height: 360px;
+ background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
+ background-size: contain;
background-position: center;
background-repeat: no-repeat;
-}
-
-.quality-card.one {
- background-image: url('@/assets/BI/yuancailiaoyijianicon@2x.png');
-}
-
-.quality-card.two {
- background-image: url('@/assets/BI/guochengyijianicon@2x.png');
-}
-
-.quality-card.three {
- background-image: url('@/assets/BI/chuchangyijianicon@2x.png');
+ z-index: 1;
+ pointer-events: none;
}
</style>
--
Gitblit v1.9.3