fix--jwpy样式修改

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}<br/>
+              下发数: ${total}<br/>
+              查实数: ${check}<br/>
+              占比: ${((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%'},
 });