From 3c72ce79e5481f4889b3270b6b29c2830485a36b Mon Sep 17 00:00:00 2001 From: xuhuajiao <13476289682@163.com> Date: Thu, 18 Dec 2025 12:51:25 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9C=80=E6=B1=82=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RFIDArchives/returnArchives/index.vue | 4 +- .../environmentalScreen/module/catePie.vue | 75 ++++++++++++------- 2 files changed, 51 insertions(+), 28 deletions(-) diff --git a/src/views/archivesManage/RFIDArchives/returnArchives/index.vue b/src/views/archivesManage/RFIDArchives/returnArchives/index.vue index 4477934..a191c34 100644 --- a/src/views/archivesManage/RFIDArchives/returnArchives/index.vue +++ b/src/views/archivesManage/RFIDArchives/returnArchives/index.vue @@ -127,9 +127,9 @@ export default { isReturn: true, selections: [], queryOption: [ + { value: 'caseName', label: '档案盒' }, { value: 'orderNo', label: '单据号' }, - { value: 'borrowerName', label: '借阅人' }, - { value: 'caseName', label: '档案盒' } + { value: 'borrowerName', label: '借阅人' } // { value: 'barcode', label: '条形码' } ], isRfidReading: false, // 控制RFID读取状态:true=正在读取,false=未读取 diff --git a/src/views/environmentalScreen/module/catePie.vue b/src/views/environmentalScreen/module/catePie.vue index 053cddf..60bfa5b 100644 --- a/src/views/environmentalScreen/module/catePie.vue +++ b/src/views/environmentalScreen/module/catePie.vue @@ -25,12 +25,13 @@ export default { }, refreshtime: { type: Number, - default: null // 接收父组件的刷新间隔值 + default: null } }, data() { return { - chart: null + chart: null, + timer: null // 新增:定时器统一管理 } }, watch: { @@ -45,10 +46,10 @@ export default { } }, mounted() { - // this.initChart() this.refreshEchart() }, beforeDestroy() { + clearInterval(this.timer) // 新增:清除定时器 if (this.chart) { this.chart.dispose() this.chart = null @@ -58,7 +59,7 @@ export default { refreshEchart() { if (this.refreshtime) { this.timer = setInterval(() => { - this.initChart() + this.drawChart() // 优化:直接重绘而非重新初始化 }, this.refreshtime) } else { this.initChart() @@ -81,19 +82,25 @@ export default { ? this.cateData : [{ name: '无告警数据', value: 1, itemStyle: { color: '#666666' }}] - // 处理0值显示问题:将0替换为极小值,确保标签能显示(视觉上无占比) - const processedData = chartData.map(item => ({ - ...item, - value: item.value === 0 ? 0 : item.value - })) + // ========== 核心修改:0值项分配极小占比,实现视觉分离 ========== + const processedData = chartData.map(item => { + // 0值替换为极小值(0.01),非0值保持原样 + const displayValue = item.value === 0 ? 0.01 : item.value + return { + ...item, + value: displayValue, + // 新增:存储原始值,用于tooltip/label显示 + rawValue: item.value + } + }) const option = { backgroundColor: 'transparent', tooltip: { trigger: 'item', textStyle: { fontSize: 12 }, - // Tooltip 仍显示 名称+数量+百分比(完整信息) - formatter: '{b}: {c} 次 ({d}%)' + // 优化:显示原始0值,而非极小值 + formatter: (params) => `${params.name}: ${params.data.rawValue} 次 (0%)` }, legend: { bottom: 10, @@ -118,27 +125,30 @@ export default { name: '当日告警统计', type: 'pie', radius: ['30%', '60%'], - center: ['50%', '40%'], - avoidLabelOverlap: false, + center: ['50%', '44%'], + avoidLabelOverlap: true, // 优化:开启标签防重叠 + // 优化:调整标签线样式,强制分开0值项标签 labelLine: { show: true, - length: 10, - length2: 20, - // 0值项的引导线设为半透明 + length: 10, // 增加基础长度 + length2: 15, // 增加二级长度 + smooth: 0.2, // 轻微平滑,避免线条重叠 lineStyle: (params) => ({ - color: params.data.value < 0.1 ? 'rgba(255,255,255,0.3)' : '#ffffff' + color: params.data.rawValue === 0 + ? 'rgba(255,255,255,0.3)' + : '#ffffff', + width: 1 }) }, label: { show: true, fontSize: 11, color: '#ffffff', - // 核心修改:标签显示 实际数量(替换原来的{d}%) - formatter: function(params) { - // 还原极小值为0显示 - const value = params.value < 0.1 ? 0 : params.value - return `${value} 次` - } + // 优化:显示原始0值 + formatter: (params) => `${params.data.rawValue} 次`, + // 新增:调整标签位置,强制分开 + position: 'outer', + distance: 20 // 标签离饼图的距离 }, emphasis: { label: { @@ -152,9 +162,14 @@ export default { shadowColor: 'rgba(0, 0, 0, 0.5)' } }, - data: processedData, // 使用处理后的数据(兼容0值) + data: processedData, animationDuration: 1000, - animationEasing: 'cubicOut' + animationEasing: 'cubicOut', + // 新增:饼图扇区之间增加间隙,进一步分开 + itemStyle: { + borderColor: 'transparent', + borderWidth: 1 + } } ] } @@ -180,10 +195,18 @@ export default { border-radius: 4px !important; } -// 可选:0值项的标签文字设为半透明,视觉区分 +// 0值项标签半透明区分 :deep(.ec-label) { &[style*="0 次"] { fill: rgba(255,255,255,0.5) !important; } } + +// 新增:给饼图扇区加间隙,视觉上更易区分 +:deep(.ec-pie) { + g > path { + stroke: transparent !important; + stroke-width: 1px !important; + } +}