From bc5cf4a258aba4774829ce421af83f9b4aedf4cc Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 一月 2026 14:08:39 +0800
Subject: [PATCH] fix: 大屏样式优化
---
src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue | 2 +-
src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue | 2 +-
src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue | 2 +-
src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue | 12 +++++-------
src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue | 2 +-
src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue | 2 +-
src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue | 2 +-
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 24 ++++++++++++++----------
8 files changed, 25 insertions(+), 23 deletions(-)
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue
index 3b8da7f..3b04ffa 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue
@@ -86,8 +86,8 @@
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
- lineStyle: { color: 'rgba(11, 137, 254, 0.40)', width: 2 },
- itemStyle: { color: 'rgba(11, 137, 254, 0.40)', borderWidth: 0 },
+ lineStyle: { color: 'rgba(11, 137, 254,1', width: 2 },
+ itemStyle: { color: 'rgba(11, 137, 254, 1)', borderWidth: 0 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(11, 137, 254, 0.40)' },
@@ -105,8 +105,8 @@
symbol: 'circle',
symbolSize: 8,
- lineStyle: { color: 'rgba(11, 249, 254, 0.5)', width: 2 },
- itemStyle: { color: 'rgba(11, 249, 254, 0.5)', borderWidth: 0 },
+ lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 },
+ itemStyle: { color: 'rgba(11, 249, 254, 1)', borderWidth: 0 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(11, 249, 254, 0.5)' },
@@ -121,10 +121,8 @@
const tooltip = {
trigger: 'axis',
axisPointer: { type: 'line' },
- backgroundColor: 'rgba(10, 28, 58, 0.9)',
- borderColor: 'rgba(78, 228, 255, 0.3)',
borderWidth: 1,
- textStyle: { color: '#B8C8E0', fontSize: 12 },
+ textStyle: { fontSize: 12 },
formatter(params) {
let result = params[0].axisValue + '<br/>'
params.forEach((item) => {
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
index e8ed776..a0c892a 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
@@ -65,7 +65,7 @@
formatter(params) {
let result = params[0].axisValueLabel + '<br/>'
params.forEach((item) => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
})
return result
},
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
index a1c255f..9ddab7f 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
@@ -123,7 +123,7 @@
// 鍙屽眰鐜舰楗煎浘
const landSeries = ref([
{
- name: '浜у搧澶х被',
+ name: '浜у搧閲囪喘閲戦鍒嗘瀽',
type: 'pie',
radius: ['40%', '60%'],
center: ['25%', '50%'],
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
index cd8f1e3..a282389 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
@@ -109,7 +109,7 @@
const pieSeries = computed(() => [
{
- name: '鍚勪骇鍝侀攢鍞噾棰濆垎鏋�',
+ name: '浜у搧閿�鍞噾棰濆垎鏋�',
type: 'pie',
radius: '60%',
center: ['25%', '50%'],
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
index a28ded3..da736e1 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
@@ -108,7 +108,7 @@
formatter: function (params) {
let result = params[0].axisValueLabel + '<br/>'
params.forEach((item) => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
})
return result
},
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 67e0217..c787fce 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -83,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%'],
@@ -105,21 +108,22 @@
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}}`
- // 灏忓渾鐐� + 鐖剁骇 name + 鐖剁骇 value锛屾崲琛屽睍绀� children 鐨� name + value
- return [
- `${dot}{parent|${parentName}}`,
- ...children.map((c) => `{child|${c.name}}`),
- ].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: {
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
index 506ea9d..9d4e983 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
@@ -104,7 +104,7 @@
formatter: function (params) {
let result = params[0].axisValueLabel + '<br/>'
params.forEach((item) => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
})
return result
},
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue
index 94ea975..77ed111 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/right-top.vue
@@ -120,7 +120,7 @@
textStyle: { fontSize: '100%' },
formatter: function (params) {
let result = params[0].axisValueLabel + '<br/>'
- result += `<div style="">${params[0].marker}${params[0].value}</div>`
+ result += `<div>${params[0].marker}${params[0].value}</div>`
return result
},
}
--
Gitblit v1.9.3