From 5a537b356ffc7f36e3360bdb2d53496078149ad2 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 29 一月 2026 10:33:23 +0800
Subject: [PATCH] 进销存升级 1.来票登记优化
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 157 ++++++++++++++++++++++------------------------------
1 files changed, 67 insertions(+), 90 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..c787fce 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -2,8 +2,8 @@
<div>
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
- <div style="height: 70%">
- <div style="height: 100%">
+ <div class="pie-chart-wrapper">
+ <div class="pie-background"></div>
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -11,7 +11,7 @@
:series="landSeries"
:tooltip="landTooltip"
:color="landColors"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ :options="pieOptions"
style="height: 100%"
class="land-chart"
/>
@@ -28,36 +28,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: [],
@@ -95,52 +83,62 @@
// 鎻愮ず妗�
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%'],
label: {
show: true,
+ position: 'outside',
color: '#fff',
fontSize: 12,
lineHeight: 18,
+ rich: {
+ ...dotRich,
+ 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 || []
- if (!children.length) return ''
- // label 灞曠ず children 鐨� name + value
- return children.map((c) => `${c.name} ${c.value}`).join('\n')
+ const parentName = params?.data?.name || ''
+ 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}|} `
+ 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',
},
- 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 +147,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,
},
@@ -177,8 +162,12 @@
const chartStyle = {
width: '100%',
- height: '150%',
- height: '100%',
+ height: '126%',
+}
+
+const pieOptions = {
+ backgroundColor: 'transparent',
+ textStyle: { color: '#B8C8E0' },
}
const loadData = async () => {
@@ -199,44 +188,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>
@@ -247,4 +202,26 @@
width: 100%;
height: 420px;
}
+
+.pie-chart-wrapper {
+ position: relative;
+ width: 100%;
+ height: 320px;
+ background: transparent;
+}
+
+.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;
+ z-index: 1;
+ pointer-events: none;
+}
</style>
--
Gitblit v1.9.3