From 0b8b77e3320c45260f28f92dadf9c66515d75328 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 17:50:06 +0800
Subject: [PATCH] fix: 样式调整
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 115 +++++++++++++++------------------------------------------
1 files changed, 30 insertions(+), 85 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 998bfef..9346680 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -3,7 +3,6 @@
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
<div style="height: 70%">
- <div style="height: 100%">
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -28,36 +27,24 @@
// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
const dataList = ref([])
-import { productCategoryDistribution } from '@/api/viewIndex.js'
// 棰滆壊鍒楄〃
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
+// label 瀵屾枃鏈細涓烘瘡涓鑹茬敓鎴愪竴涓皬鍦嗙偣鏍峰紡锛堢‘淇濆湪 label 涓彲瑙侊級
+const dotRich = landColors.reduce((acc, color, idx) => {
+ acc[`dot${idx}`] = {
+ width: 8,
+ height: 8,
+ borderRadius: 8,
+ backgroundColor: color,
+ align: 'center',
+ }
+ return acc
+}, {})
+
// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
const landLegend = {
-// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
-const workInProcessXAxis = ref([
- {
- type: 'category',
- axisTick: { show: false },
- axisLabel: {
- color: '#B8C8E0',
- interval: 0,
- rotate: 25
- },
- data: [],
- },
-])
-
-const workInProcessYAxis = [
- {
- type: 'value',
- axisLabel: { color: '#B8C8E0' },
- name: '',
- },
-]
-
-const workInProcessBarLegend = {
show: false,
icon: 'circle',
data: [],
@@ -111,36 +98,42 @@
center: ['50%', '50%'],
label: {
show: true,
+ position: 'outside',
color: '#fff',
fontSize: 12,
lineHeight: 18,
+ rich: {
+ ...dotRich,
+ parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
+ child: { fontSize: 12, color: '#fff', lineHeight: 18 },
+ },
formatter: function (params) {
const children = params?.data?.children || []
- if (!children.length) return ''
- // label 灞曠ず children 鐨� name + value
- return children.map((c) => `${c.name} ${c.value}`).join('\n')
+ const parentName = params?.data?.name || ''
+ const parentValue = params?.data?.value ?? 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} ${parentValue}}`,
+ ...children.map((c) => `{child|${c.name}}`),
+ ].join('\n')
},
},
labelLine: {
show: true,
- length: 40,
- length2: 40,
+ length: 20,
+ length2: 20,
lineStyle: {
color: '#B8C8E0',
},
- name: '浜у搧鏁伴噺',
- type: 'bar',
- barWidth: 25,
- barGap: 0,
- emphasis: {
- focus: 'series',
},
itemStyle: {
color: function (params) {
return landColors[params.dataIndex % landColors.length]
},
},
- // 鍒濆缁戝畾涓哄搷搴斿紡鏁版嵁婧愶紝鍚庣画閫氳繃鎺ュ彛濉厖
data: dataList.value,
},
{
@@ -149,19 +142,6 @@
radius: ['35%', '40%'],
center: ['50%', '50%'],
silent: true,
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#4EE4FF' },
- { offset: 1, color: '#00A4ED' },
- ],
- },
- borderRadius: [4, 4, 0, 0]
- },
label: {
show: false,
},
@@ -178,7 +158,6 @@
const chartStyle = {
width: '100%',
height: '150%',
- height: '100%',
}
const loadData = async () => {
@@ -199,44 +178,10 @@
landLegend.data = []
landSeries.value[0].data = []
}
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '15%',
- containLabel: true,
-}
-
-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)
- })
}
onMounted(() => {
loadData()
- getProductCategoryDistribution()
})
</script>
--
Gitblit v1.9.3