|
@ -100,7 +100,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="box-bottom-top-unit"> ( 近30天 ) </div> |
|
|
<div class="box-bottom-top-unit"> ( 近30天 ) </div> |
|
|
</div> |
|
|
</div> |
|
|
<div ref="graphChart" style="width: 100%; height: calc(100% - 40px)"></div> |
|
|
<div ref="graphChart" style="width: 100%; height: calc(100% - 30px)"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
@ -173,24 +173,12 @@ |
|
|
} |
|
|
} |
|
|
chartInstance = echarts.init(graphChart.value); |
|
|
chartInstance = echarts.init(graphChart.value); |
|
|
const option = { |
|
|
const option = { |
|
|
title: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
text: '告警趋势/ 近30天', |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
fontWeight: 'normal', |
|
|
|
|
|
color: '#aaaaaa', |
|
|
|
|
|
}, |
|
|
|
|
|
left: '1%', |
|
|
|
|
|
top: '2%', |
|
|
|
|
|
}, |
|
|
|
|
|
tooltip: { |
|
|
tooltip: { |
|
|
trigger: 'axis', |
|
|
trigger: 'axis', |
|
|
axisPointer: { |
|
|
axisPointer: { |
|
|
type: 'shadow', |
|
|
type: 'shadow', |
|
|
}, |
|
|
}, |
|
|
formatter: function (params: any) { |
|
|
formatter: function (params: any) { |
|
|
console.log(params, '错误'); |
|
|
|
|
|
if (params.length > 0) { |
|
|
if (params.length > 0) { |
|
|
let res = params[0].axisValue + '<br/>'; |
|
|
let res = params[0].axisValue + '<br/>'; |
|
|
params.forEach((item: any) => { |
|
|
params.forEach((item: any) => { |
|
@ -212,7 +200,7 @@ |
|
|
legend: [ |
|
|
legend: [ |
|
|
{ |
|
|
{ |
|
|
top: 5, |
|
|
top: 5, |
|
|
left: 'right', // 将图例居中显示 |
|
|
left: 'center', // 将图例居中显示 |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
color: 'rgb(89, 89, 89)', |
|
|
color: 'rgb(89, 89, 89)', |
|
|
fontSize: 14, |
|
|
fontSize: 14, |
|
@ -483,13 +471,13 @@ |
|
|
legend: { |
|
|
legend: { |
|
|
// 设置图例靠右,上下居中,垂直排列 |
|
|
// 设置图例靠右,上下居中,垂直排列 |
|
|
right: 50, |
|
|
right: 50, |
|
|
top: 'center', |
|
|
top: 'bottom', |
|
|
orient: 'vertical', |
|
|
orient: 'vertical', |
|
|
// 图例图标设置为圆形 |
|
|
// 图例图标设置为圆形 |
|
|
// icon: 'circle', |
|
|
// icon: 'circle', |
|
|
itemWidth: 16, |
|
|
itemWidth: 16, |
|
|
itemHeight: 16, |
|
|
itemHeight: 16, |
|
|
itemGap: 30, |
|
|
itemGap: 20, |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
fontSize: 14, |
|
|
fontSize: 14, |
|
|
}, |
|
|
}, |
|
@ -598,11 +586,11 @@ |
|
|
legend: { |
|
|
legend: { |
|
|
// 设置图例靠右,上下居中,垂直排列 |
|
|
// 设置图例靠右,上下居中,垂直排列 |
|
|
right: 50, |
|
|
right: 50, |
|
|
top: 'center', |
|
|
top: 'bottom', |
|
|
orient: 'vertical', |
|
|
orient: 'vertical', |
|
|
itemWidth: 16, |
|
|
itemWidth: 16, |
|
|
itemHeight: 16, |
|
|
itemHeight: 16, |
|
|
itemGap: 30, |
|
|
itemGap: 20, |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
fontSize: 14, |
|
|
fontSize: 14, |
|
|
}, |
|
|
}, |
|
@ -788,13 +776,13 @@ |
|
|
padding: 12px; |
|
|
padding: 12px; |
|
|
.box-bottom-top { |
|
|
.box-bottom-top { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 40px; |
|
|
height: 30px; |
|
|
padding: 0px 12px; |
|
|
padding: 0px 6px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
position: relative; |
|
|
position: relative; |
|
|
.box-bottom-top-title { |
|
|
.box-bottom-top-title { |
|
|
width: auto; |
|
|
width: auto; |
|
|
height: 40px; |
|
|
height: 30px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
left: 62px; |
|
|
left: 62px; |
|
@ -802,11 +790,11 @@ |
|
|
} |
|
|
} |
|
|
.box-bottom-top-unit { |
|
|
.box-bottom-top-unit { |
|
|
width: auto; |
|
|
width: auto; |
|
|
height: 40px; |
|
|
height: 30px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
left: 148px; |
|
|
left: 148px; |
|
|
top: 13px; |
|
|
top: 16px; |
|
|
color: rgba(102, 102, 102, 1); |
|
|
color: rgba(102, 102, 102, 1); |
|
|
font-size: 12px; |
|
|
font-size: 12px; |
|
|
} |
|
|
} |
|
|