diff --git a/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue b/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue index c72fa098..c9d62352 100644 --- a/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue +++ b/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) { - // 第二个系列(Top3) + } else if (param.seriesIndex === 2 || param.seriesIndex === 3) { + // 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,显示透明背景但有边框效果 - if (params.value === 0.1) { - return 'rgba(0,0,0,0.1)'; + // 如果值为0,不显示颜色条 + if (params.value === 0) { + 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 = alarmTypeType.value[params.dataIndex]?.value || 0; + const realValue = alarmTypeTypeTop.value[params.dataIndex]?.total || 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,显示透明背景但有边框效果 - if (params.value === 0 || params.value === 0.1) { - return 'rgba(0,0,0,0.1)'; + // 如果值为0,不显示颜色条 + if (params.value === 0) { + 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)), - zlevel: 1 + label: { show: false }, // 实际值柱状图不显示标签 + data: alarmTypeTypeTop.value.map((item: any) => item.total || 0), + zlevel: 2 } ] };