feat:透明柱状图自适应，数值标签定位
This commit is contained in:
zhongzm
@@ -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
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user