feat:透明柱状图自适应，数值标签定位

src/views/dashboard/overview2/components/AlarnTypeBar/index.vue

@@ -131,6 +131,10 @@ function initPicture() {
       }
     })
     .then(() => {
+      // 计算最大值用于标准化
+      const maxAlarmValue = Math.max(...alarmTypeType.value.map((item: any) => item.value || 0), 1);
+      const maxTopValue = Math.max(...alarmTypeTypeTop.value.map((item: any) => item.total || 0), 1);
+
       const optionData: EChartsOption = {
         title: [
           {
@@ -164,13 +168,13 @@ function initPicture() {
           formatter: function(params: any) {
             if (Array.isArray(params) && params.length > 0) {
               const param = params[0];
-              // 获取真实值而不是0.1的占位值
+              // 获取真实值
               let realValue = 0;
-              if (param.seriesIndex === 0) {
+              if (param.seriesIndex === 0 || param.seriesIndex === 1) {
-                // 第一个系列（告警类型）
+                // 告警类型背景或实际值
                 realValue = alarmTypeType.value[param.dataIndex]?.value || 0;
-              } else if (param.seriesIndex === 1) {
+              } else if (param.seriesIndex === 2 || param.seriesIndex === 3) {
-                // 第二个系列（Top3）
+                // Top3背景或实际值
                 realValue = alarmTypeTypeTop.value[param.dataIndex]?.total || 0;
               }
               return `${param.name}: ${realValue}`;
@@ -186,11 +190,13 @@ function initPicture() {
             type: 'value',
             gridIndex: 0,
             show: false,
+            max: maxAlarmValue
           },
           {
             type: 'value',
             gridIndex: 1,
             show: false,
+            max: maxTopValue
           }
         ],
         yAxis: [
@@ -224,19 +230,47 @@ function initPicture() {
           }
         ],
         series: [
-          // 四类型告警横向柱状图
+          // 告警类型透明背景柱状图
           {
             type: 'bar',
             xAxisIndex: 0,
             yAxisIndex: 0,
             barWidth: 16,
-            barCategoryGap: '20%',  // 添加柱状图间隙
+            barGap: '-100%', // 重叠显示
+            itemStyle: {
+              borderRadius: [0, 8, 8, 0],
+              color: 'rgba(255,255,255,0.1)',
+              borderColor: '#666',
+              borderWidth: 1
+            },
+            data: Array(alarmTypeType.value.length).fill(maxAlarmValue),
+            zlevel: 1,
+            silent: true, // 不响应鼠标事件
+            label: {
+              show: true,
+              position: 'right',
+              color: '#fff',
+              fontWeight: 'bold',
+              fontSize: 14,
+              formatter: (params: any) => {
+                const realValue = alarmTypeType.value[params.dataIndex]?.value || 0;
+                return `${realValue}`;
+              },
+            }
+          },
+          // 告警类型实际值柱状图
+          {
+            type: 'bar',
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            barWidth: 16,
+            barGap: '-100%', // 重叠显示
             itemStyle: {
               borderRadius: [0, 8, 8, 0],
               color: function (params: any) {
-                // 如果值为0，显示透明背景但有边框效果
+                // 如果值为0，不显示颜色条
-                if (params.value === 0.1) {
+                if (params.value === 0) {
-                  return 'rgba(0,0,0,0.1)';
+                  return 'transparent';
                 }
                 // 渐变色
                 const colorArr = [
@@ -258,10 +292,28 @@ function initPicture() {
                   ])
                 ];
                 return colorArr[params.dataIndex] || colorArr[3];
-              },
+              }
+            },
+            label: { show: false }, // 实际值柱状图不显示标签
+            data: alarmTypeType.value.map((item: any) => item.value || 0),
+            zlevel: 2
+          },
+          // Top3透明背景柱状图
+          {
+            type: 'bar',
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            barWidth: 16,
+            barGap: '-100%', // 重叠显示
+            itemStyle: {
+              borderRadius: [0, 20, 20, 0],
+              color: 'rgba(255,255,255,0.1)',
               borderColor: '#666',
               borderWidth: 1
             },
+            data: Array(alarmTypeTypeTop.value.length).fill(maxTopValue),
+            zlevel: 1,
+            silent: true, // 不响应鼠标事件
             label: {
               show: true,
               position: 'right',
@@ -269,52 +321,36 @@ function initPicture() {
               fontWeight: 'bold',
               fontSize: 14,
               formatter: (params: any) => {
-                // 如果是最小值0.1，显示为0
+                const realValue = alarmTypeTypeTop.value[params.dataIndex]?.total || 0;
-                const realValue = alarmTypeType.value[params.dataIndex]?.value || 0;
                 return `${realValue}`;
               },
-            },
+            }
-            data: alarmTypeType.value.map((item: any) => Math.max(item.value || 0, 0.1)),
-            zlevel: 2
           },
-          // Top3横向柱状图
+          // Top3实际值柱状图
           {
             name: 'Top3',
             type: 'bar',
             xAxisIndex: 1,
             yAxisIndex: 1,
             barWidth: 16,
-            barCategoryGap: '20%',  // 添加柱状图间隙
+            barGap: '-100%', // 重叠显示
             itemStyle: {
               borderRadius: [0, 20, 20, 0],
               color: function (params: any) {
-                // 如果值为0，显示透明背景但有边框效果
+                // 如果值为0，不显示颜色条
-                if (params.value === 0 || params.value === 0.1) {
+                if (params.value === 0) {
-                  return 'rgba(0,0,0,0.1)';
+                  return 'transparent';
                 }
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                   { offset: 0, color: '#f0f5ff' },
                   { offset: 0.5, color: '#adc6ff' },
                   { offset: 1, color: '#2f54eb' },
                 ]);
-              },
-              borderColor: '#666',
-              borderWidth: 1
-            },
-            label: {
-              show: true,
-              position: 'right',
-              color: '#fff',
-              fontWeight: 'bold',
-              fontSize: 14,
-              formatter: (params: any) => {
-                // 如果是最小值0.1，显示为0
-                const realValue = alarmTypeTypeTop.value[params.dataIndex]?.total || 0;
-                return `${realValue}`;
               }
             },
-            data: alarmTypeTypeTop.value.map((item: any) => Math.max(item.total || 0, 0.1)),
+            label: { show: false }, // 实际值柱状图不显示标签
-            zlevel: 1
+            data: alarmTypeTypeTop.value.map((item: any) => item.total || 0),
+            zlevel: 2
           }
         ]
       };