From 94c6812662b95123a680dde28fdb5bd3f1a6a4af Mon Sep 17 00:00:00 2001
From: hongchao <3228015117@qq.com>
Date: Wed, 31 Dec 2025 14:53:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/ProvincialCompany.vue     | 333 ++++++++++++++----
 1 file changed, 255 insertions(+), 78 deletions(-)

diff --git a/src/views/home/components/ProvincialCompany.vue b/src/views/home/components/ProvincialCompany.vue
index 6ec13e34..f6cd5ece 100644
--- a/src/views/home/components/ProvincialCompany.vue
+++ b/src/views/home/components/ProvincialCompany.vue
@@ -88,7 +88,7 @@
             <ul class="scroll-list" ref="list">
               <li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }">
                 <div style="display: flex; align-items: center; justify-content: space-between">
-                  <div style="width: 65%">
+<div style="width: 65%">
                     <span>{{ index + 1 }}. </span>
                     <span>{{ item.deptAbbreviation }} </span>
                     <span>{{ item.applyUser }} </span>
@@ -331,86 +331,263 @@ export default {
       chart.setOption(option)
     },
     initBarChart() {
-      const barDom = this.$refs.barRef
-      const barChart = echarts.init(barDom)
-
-      const companyNames = this.tableList.map((item) => item.companyName)
-      const equipTotals = this.tableList.map((item) => item.maNum)
-      const toolTotals = this.tableList.map((item) => item.toolNum)
-
-      const option = {
-        tooltip: { trigger: 'axis' },
-
-        legend: {
-          top: 0,
-          right: 20,
-          data: ['装备总数', '工具总数'],
-        },
-
-        grid: {
-          left: '3%',
-          right: '3%',
-          bottom: '3%',
-          containLabel: true,
-        },
-
-        xAxis: {
+      const barDom = this.$refs.barRef 
+      const barChart = echarts.init(barDom) 
+    
+      const companyNames = this.tableList.map((item) => item.companyName) 
+      const equipTotals = this.tableList.map((item) => item.maNum) 
+      const toolTotals = this.tableList.map((item) => item.toolNum) 
+    
+      // 定义固定的y轴刻度 
+      const yAxisTicks = ['0', '200', '500', '1000', '10000', '100000', '200000+'] 
+      
+      // 定义刻度对应的实际数值 
+      const yAxisValues = [0, 200, 500, 1000, 10000, 100000, 200000] 
+      
+      // 数据映射函数：将原始数据映射到对应的y轴刻度索引 
+      const mapDataToYAxis = (value) => { 
+        for (let i = 0; i < yAxisValues.length; i++) { 
+          if (value <= yAxisValues[i]) { 
+            return i 
+          } 
+        } 
+        return yAxisValues.length - 1 // 超过最大值的都映射到最后一个刻度 
+      } 
+      
+      // 映射后的系列数据 
+      const mappedEquipTotals = equipTotals.map(mapDataToYAxis) 
+      const mappedToolTotals = toolTotals.map(mapDataToYAxis) 
+    
+      // 判断是否同时显示两个系列
+      const showBothSeries = equipTotals.some(val => val > 0) && toolTotals.some(val => val > 0)
+    
+      // 动态生成y轴配置
+      let yAxisConfig
+      if (showBothSeries) {
+        // 同时显示两个系列时，使用固定刻度的category类型y轴
+        yAxisConfig = {
           type: 'category',
-          data: companyNames,
-
-          axisLabel: {
-            fontSize: 13,
-            interval: 0, // 强制全部显示
-            lineHeight: 16,
-            formatter: function (name) {
-              const maxLen = 3 // 每行6字符，可调整
-              if (name.length <= maxLen) return name
-              const rows = Math.ceil(name.length / maxLen)
-              let res = ''
-              for (let i = 0; i < rows; i++) {
-                res += name.substring(i * maxLen, (i + 1) * maxLen) + '\n'
-              }
-              return res
-            },
-          },
-        },
-
-        yAxis: {
-          type: 'value',
+          data: yAxisTicks,
           name: '数量（个）',
           nameTextStyle: { fontSize: 14 },
-        },
-
-        series: [
-          {
-            name: '装备总数',
-            type: 'bar',
-            barWidth: 35,
-            barGap: '0%', // ← 两个柱子紧贴
-            barCategoryGap: '0%', // ← 类目间无空隙
-            itemStyle: {
-              color: '#5470C6',
-              borderRadius: [4, 4, 0, 0],
-            },
-            data: equipTotals,
-          },
-          {
-            name: '工具总数',
-            type: 'bar',
-            barWidth: 35,
-            barGap: '0%',
-            barCategoryGap: '0%',
-            itemStyle: {
-              color: '#91CC75',
-              borderRadius: [4, 4, 0, 0],
-            },
-            data: toolTotals,
-          },
-        ],
+          
+          axisTick: { 
+            show: true, 
+            alignWithLabel: true, 
+            length: 4 
+          }, 
+          
+          axisLabel: { 
+            fontSize: 12, 
+            margin: 8 // 增加标签与坐标轴的间距 
+          }, 
+          
+          // 调整位置 
+          offset: 0, 
+          
+          // 强制将坐标轴显示在网格边缘 
+          boundaryGap: false, 
+          
+          // 分割线配置 
+          splitLine: { 
+            show: true, 
+            lineStyle: { 
+              type: 'dashed', 
+              color: '#e0e0e0' 
+            } 
+          } 
+        }
+      } else {
+        // 只显示一个系列时，使用value类型y轴
+        yAxisConfig = {
+          type: 'value',
+          name: '数量（个）',
+          nameTextStyle: { fontSize: 14 }
+        }
       }
-
-      barChart.setOption(option)
-    },
+    
+      // 动态生成series配置
+      const series = []
+      
+      // 添加装备总数系列（如果有数据）
+      if (equipTotals.some(val => val > 0)) {
+        series.push({
+          name: '装备总数',
+          type: 'bar',
+          barWidth: 35,
+          barGap: '0%', // ← 两个柱子紧贴 
+          barCategoryGap: '0%', // ← 类目间无空隙 
+          itemStyle: { 
+            color: '#5470C6', 
+            borderRadius: [4, 4, 0, 0], 
+          }, 
+          data: showBothSeries ? mappedEquipTotals : equipTotals,
+          coordinateSystem: 'cartesian2d', 
+          xAxisIndex: 0, 
+          yAxisIndex: 0, 
+        })
+      }
+      
+      // 添加工具总数系列（如果有数据）
+      if (toolTotals.some(val => val > 0)) {
+        series.push({
+          name: '工具总数',
+          type: 'bar',
+          barWidth: 35,
+          barGap: '0%', 
+          barCategoryGap: '0%', 
+          itemStyle: { 
+            color: '#91CC75', 
+            borderRadius: [4, 4, 0, 0], 
+          }, 
+          data: showBothSeries ? mappedToolTotals : toolTotals,
+          coordinateSystem: 'cartesian2d', 
+          xAxisIndex: 0, 
+          yAxisIndex: 0, 
+        })
+      }
+    
+      const option = { 
+        tooltip: { 
+          trigger: 'axis', 
+          formatter: function (params) { 
+            // 自定义tooltip显示原始数值 
+            let result = params[0].name + '<br/>' 
+            params.forEach(param => { 
+              // 获取原始数据 
+              const originalValue = param.seriesName === '装备总数' 
+                ? equipTotals[param.dataIndex] 
+                : toolTotals[param.dataIndex] 
+              result += `${param.seriesName}: ${originalValue}个<br/>` 
+            }) 
+            return result 
+          } 
+        }, 
+    
+        legend: { 
+          top: 0, 
+          right: 20, 
+          data: series.map(s => s.name), // 动态设置图例数据
+        }, 
+    
+        grid: { 
+          left: '3%', 
+          right: '3%', 
+          bottom: '3%', 
+          top: '15%', 
+          containLabel: true, 
+        }, 
+    
+        xAxis: { 
+          type: 'category', 
+          data: companyNames, 
+    
+          axisLabel: { 
+            fontSize: 13, 
+            interval: 0, // 强制全部显示 
+            lineHeight: 16, 
+            formatter: function (name) { 
+              const maxLen = 3 // 每行6字符，可调整 
+              if (name.length <= maxLen) return name 
+              const rows = Math.ceil(name.length / maxLen) 
+              let res = '' 
+              for (let i = 0; i < rows; i++) { 
+                res += name.substring(i * maxLen, (i + 1) * maxLen) + '\n' 
+              } 
+              return res 
+            }, 
+          }, 
+        }, 
+    
+        yAxis: yAxisConfig, // 使用动态生成的y轴配置
+    
+        series: series, // 使用动态生成的系列配置
+      } 
+    
+      barChart.setOption(option) 
+      
+      // 监听图例点击事件
+      barChart.on('legendselectchanged', (params) => {
+        // 获取当前显示的系列
+        const selectedSeries = Object.keys(params.selected).filter(key => params.selected[key]);
+        
+        // 判断是否同时显示两个系列
+        const showBothSeries = selectedSeries.length > 1;
+        
+        // 重新生成y轴配置
+        let newYAxisConfig;
+        if (showBothSeries) {
+          // 同时显示两个系列时，使用固定刻度的category类型y轴
+          newYAxisConfig = {
+            type: 'category',
+            data: yAxisTicks,
+            name: '数量（个）',
+            nameTextStyle: { fontSize: 14 },
+            
+            axisTick: { 
+              show: true, 
+              alignWithLabel: true, 
+              length: 4 
+            }, 
+            
+            axisLabel: { 
+              fontSize: 12, 
+              margin: 8 // 增加标签与坐标轴的间距 
+            }, 
+            
+            // 调整位置 
+            offset: 0, 
+            
+            // 强制将坐标轴显示在网格边缘 
+            boundaryGap: false, 
+            
+            // 分割线配置 
+            splitLine: { 
+              show: true, 
+              lineStyle: { 
+                type: 'dashed', 
+                color: '#e0e0e0' 
+              } 
+            } 
+          };
+        } else {
+          // 只显示一个系列时，使用value类型y轴
+          newYAxisConfig = {
+            type: 'value',
+            name: '数量（个）',
+            nameTextStyle: { fontSize: 14 }
+          };
+        }
+        
+        // 更新y轴配置
+        barChart.setOption({
+          yAxis: newYAxisConfig
+        });
+        
+        // 更新系列数据
+        const newSeries = [];
+        
+        // 更新装备总数系列（如果显示）
+        if (params.selected['装备总数']) {
+          newSeries.push({
+            name: '装备总数',
+            data: showBothSeries ? mappedEquipTotals : equipTotals
+          });
+        }
+        
+        // 更新工具总数系列（如果显示）
+        if (params.selected['工具总数']) {
+          newSeries.push({
+            name: '工具总数',
+            data: showBothSeries ? mappedToolTotals : toolTotals
+          });
+        }
+        
+        barChart.setOption({
+          series: newSeries
+        });
+      });
+    }
   },
 }
 </script>
@@ -523,4 +700,4 @@ export default {
 .scroll-list li.odd {
   background-color: #ebf8f3;
 }
-</style>
+</style>
\ No newline at end of file