fix:修改告警总览样式问题
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user