From 085cf2147684e4849f68d5f7c99e122815e45e0f Mon Sep 17 00:00:00 2001 From: buaixuexideshitongxue <2936013465@qq.com> Date: Tue, 17 Mar 2026 11:44:17 +0800 Subject: [PATCH] =?UTF-8?q?fix--jwpy=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/datav/Jwpy.vue | 117 +++++++++++++++++++++++---------------- 1 file changed, 70 insertions(+), 47 deletions(-) diff --git a/src/views/datav/Jwpy.vue b/src/views/datav/Jwpy.vue index 2439fae..2a0605f 100644 --- a/src/views/datav/Jwpy.vue +++ b/src/views/datav/Jwpy.vue @@ -292,10 +292,46 @@ const time = ref([ const getDistributionFun = async()=>{ console.log('---------') const res = await selectDistribution(time.value); - option4.value.series[0].data=res.total; - option4.value.series[1].data=res.checkStatus; - // option4.value.series[2].data=res.checkStatus; - option4.value.yAxis.data=res.name; + + // 准备数据 + const names = res.name; + const totalData = res.total; + const checkStatusData = res.checkStatus; + + // 组合数据并排序 + const combinedData = names.map((name, index) => ({ + name: name, + total: totalData[index], + checkStatus: checkStatusData[index] + })); + + // 按照下发数排序 + // combinedData.sort((a, b) => b.total - a.total); + combinedData.sort((a, b) => a.total - b.total); + // 更新图表配置 + option4.value.yAxis.data = combinedData.map(item => item.name); + option4.value.series[0].data = combinedData.map(item => ({ + value: item.checkStatus, + itemStyle: { + color: '#4987F6' + }, + label: { + show: true, + position: 'right', + color: '#fff', + formatter: (params) => { + const item = combinedData[params.dataIndex]; + return `${item.checkStatus}/${item.total}`; + } + } + })); + option4.value.series[1].data = combinedData.map(item => ({ + value: item.total - item.checkStatus, + itemStyle: { + color: '#193775' + } + })); + console.log('option4',option4.value) } @@ -329,14 +365,14 @@ const toggleSelect=()=> { const handleYearChange = (checkedYear) => { toggleSelect() - yearValue.value= years.value.find(s=>s.ID == checkedYear).PeriodName; + yearValue.value= years.value.find(s=>s.ID == checkedYear).PeriodName; console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) getData(); } const handleMonthChange = (checkedMonth) => { toggleSelect() - monthValue.value= months.value.find(s=>s.ID === checkedMonth).SonPeriodName; + monthValue.value= months.value.find(s=>s.ID === checkedMonth).SonPeriodName; console.log(monthValue.value) console.log("年份" + selectYear.value + " 月份" + selectMonth.value + " 单位" + selectOrg.value + " task" + task.value) getData(); @@ -648,9 +684,23 @@ const option3 = ref({ grid: {left: '8%', right: '0%', top: '10%', bottom: '10%'}, }); const option4 = ref({ - tooltip: {}, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + formatter: function(params) { + const check = params[0].value; + const remaining = params[1].value; + const total = check + remaining; + return `${params[0].name}
+ 下发数: ${total}
+ 查实数: ${check}
+ 占比: ${((check/total)*100).toFixed(1)}%`; + } + }, legend: { - data: ['下发数', '查实数'], + data: ['查实数', '下发数'], textStyle: { color: '#fff', }, @@ -681,54 +731,27 @@ const option4 = ref({ }, series: [ { - name: '下发数', + name: '查实数', type: 'bar', + stack: 'total', + barWidth: '60%', data: [], - label: { - show: true, - position: 'right', - color:'#fff' - }, itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: 'rgba(40,230,255,0.63)' - }, {offset: 1, color: 'rgba(40,230,255,0)'}]) - }, + color: '#4987F6' + } }, { - name: '查实数', + name: '下发数', type: 'bar', + stack: 'total', + barWidth: '60%', data: [], - label: { - show: true, - position: 'right', - color:'#fff' - }, itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, - [{offset: 0, color: 'rgba(255,218,51,0.52)'}, - {offset: 1, color: 'rgba(255,219,49,0)'}]) - } - }, - // { - // name: '办结数', - // type: 'bar', - // data: [], - // label: { - // show: true, - // position: 'right', - // color:'#fff' - // }, - // itemStyle: { - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - // offset: 0, - // color: '#6FDBA0' - // }, {offset: 1, color: '#6FDBA0'}]) - // } - // } + color: '#193775' + }, + } ], - grid: {left: '17%', right: '0%', top: '10%', bottom: '10%'}, + grid: {left: '17%', right: '15%', top: '10%', bottom: '10%'}, });