Browse Source

fix:修改告警总览样式问题

temp
zhaohy 3 months ago
parent
commit
a7400bae18
  1. 34
      hx-ai-intelligent/src/view/alarmManagement/alarmOverview/index.vue

34
hx-ai-intelligent/src/view/alarmManagement/alarmOverview/index.vue

@ -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;
} }

Loading…
Cancel
Save