开发serverMonitor 模块 instances页面，图表配置
This commit is contained in:
parent
7e9c13b401
commit
0434cef898
BIN
src/assets/images/abnormalAlarm/line.png
Normal file
BIN
src/assets/images/abnormalAlarm/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 975 B |
93
src/views/abnormalAlarm/components/summaryArea.vue
Normal file
93
src/views/abnormalAlarm/components/summaryArea.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div id="abstractechar"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Area } from '@antv/g2plot';
|
||||
export default {
|
||||
props:{
|
||||
lineData:{
|
||||
type:Array,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.pieChart()
|
||||
},
|
||||
|
||||
methods: {
|
||||
/* 图表 */
|
||||
pieChart() {
|
||||
const data = this.lineData
|
||||
let _vm= this
|
||||
if(this.chart){
|
||||
this.chart.update({
|
||||
data:data
|
||||
})
|
||||
return
|
||||
}
|
||||
this.chart = new Area("abstractechar",{
|
||||
data,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
colorField: '#0096FF',
|
||||
areaStyle:()=>{
|
||||
return { fill: '#0096FF' }
|
||||
},
|
||||
yAxis: {
|
||||
line:{
|
||||
subTickLine:{
|
||||
count:5,
|
||||
max:100
|
||||
},
|
||||
},
|
||||
},
|
||||
line:{
|
||||
lineWidth:0,
|
||||
lineDash:[0,0]
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
}})
|
||||
this.chart.render()
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 直接当做普通属性调用不加括号
|
||||
// 任何data中数据变化立即重新计算
|
||||
// 计算属性会缓存
|
||||
textColor() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
textColor: function (val) {
|
||||
this.chart.update({
|
||||
areaStyle:{
|
||||
fill:val == 'default' ? '#282828' : '#C7C7C7'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
lineData: function (val) {
|
||||
this.pieChart()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#abstractechar {
|
||||
padding: 0 30px;
|
||||
width:100%;
|
||||
height: 151px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -265,8 +265,17 @@
|
|||
</div>
|
||||
<div class="content-center">
|
||||
<BoxTitle title="Event Timelinen">
|
||||
<template slot="right">asdfadf</template>
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item,index) in types" :key="index">
|
||||
<div :style="`background:${item.color}`" class="li-icon"></div>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="line-bg"></div>
|
||||
<div class="time-line" id="timeLine"></div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<div class="content-bottom-left">
|
||||
|
|
@ -274,32 +283,122 @@
|
|||
<a-row :gutter="20">
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="CPU"></BoxTitle>
|
||||
<div class="gauge-content" id="cpu"></div>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="MEMORY"></BoxTitle>
|
||||
<div class="gauge-content" id="memory"></div>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="LOADS"></BoxTitle>
|
||||
<div class="gauge-content" id="loads"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="content-bottom-left-bottom">
|
||||
<BoxTitle title="CPU utilization">
|
||||
<template slot="right">asdfadf</template>
|
||||
<template slot="right">
|
||||
<div class="right-title">
|
||||
<div class="right-title-item">
|
||||
average value:<i>32%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
minimum value:<i>32%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
Maximum value:<i>32%</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="area-cpu" id="areaCpu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:542px">
|
||||
<BoxTitle title="DISK"></BoxTitle>
|
||||
<div class="bar-disk" id="disk"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var base = +new Date(1968, 9, 3);
|
||||
var oneDay = 24 * 3600 * 1000;
|
||||
var date = [];
|
||||
|
||||
var data = [Math.random() * 300];
|
||||
|
||||
for (var i = 1; i < 200; i++) {
|
||||
var now = new Date(base += oneDay);
|
||||
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
|
||||
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||||
}
|
||||
var data1 = [];
|
||||
var dataCount = 6;
|
||||
var startTime = +new Date();
|
||||
var categories = ['cpu'];
|
||||
var types = [
|
||||
{ name: 'Halt', color: '#ec3e0d' },
|
||||
{ name: 'Critical', color: '#ff683e' },
|
||||
{ name: 'Problematic', color: '#ffbf2e' },
|
||||
{ name: 'Maintained', color: '#a2681e' },
|
||||
{ name: 'Anomalous', color: '#8dac39' },
|
||||
{ name: 'Suspension', color: '#6c6c6c' }
|
||||
];
|
||||
var legendData = types.map(item=>{
|
||||
return item.name
|
||||
})
|
||||
// Generate mock data
|
||||
categories.forEach((category, index) => {
|
||||
var baseTime = startTime;
|
||||
for (var i = 0; i < dataCount; i++) {
|
||||
var typeItem = types[i];
|
||||
var duration = Math.round(Math.random() * 10000);
|
||||
data1.push({
|
||||
name: typeItem.name,
|
||||
value: [index, baseTime, (baseTime += duration), duration],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: typeItem.color
|
||||
}
|
||||
}
|
||||
});
|
||||
baseTime += Math.round(Math.random() * 2000);
|
||||
}
|
||||
});
|
||||
function renderItem1(params, api) {
|
||||
var categoryIndex = api.value(0);
|
||||
var start = api.coord([api.value(1), categoryIndex]);
|
||||
var end = api.coord([api.value(2), categoryIndex]);
|
||||
var height = api.size([0, 1])[1] * 1;
|
||||
var rectShape = echarts.graphic.clipRectByRect(
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height
|
||||
},
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height
|
||||
}
|
||||
);
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
transition: ['shape'],
|
||||
shape: rectShape,
|
||||
style: api.style()
|
||||
}
|
||||
);
|
||||
}
|
||||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import infiniteScroll from 'vue-infinite-scroll';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
directives: { infiniteScroll },
|
||||
components: {
|
||||
|
|
@ -307,6 +406,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
types,
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
busy: false,
|
||||
|
|
@ -323,7 +423,13 @@ export default {
|
|||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
currIndex:null,
|
||||
currIndex: null,
|
||||
timeLine: null,
|
||||
guageCpu: null,
|
||||
guageMemory: null,
|
||||
guageLoads: null,
|
||||
areaCpu: null,
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -345,6 +451,16 @@ export default {
|
|||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawTimeline()
|
||||
this.drawGuageCpu()
|
||||
this.drawGuageMemory()
|
||||
this.drawGuageLoads()
|
||||
this.drawAreaCpu()
|
||||
this.drawDisk()
|
||||
},0)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getSysServer(callBack) {
|
||||
|
|
@ -409,7 +525,603 @@ export default {
|
|||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
drawTimeline() {
|
||||
this.timeLine = echarts.init(document.getElementById("timeLine"))
|
||||
let option = {
|
||||
color:['#7b9ce1','#bd6d6c','#75d874','#e0bc78','#dc77dc','#72b362'],
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
return params.marker + params.name + ': ' + params.value[3] + ' ms';
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0',
|
||||
top:15,
|
||||
height: 32,
|
||||
containLabel: false,
|
||||
show: true
|
||||
},
|
||||
xAxis: {
|
||||
min: startTime,
|
||||
axisLabel: {
|
||||
color: "#ade6ee",
|
||||
fontSize: 14,
|
||||
formatter: function (val) {
|
||||
return Math.max(0, val - startTime) + ' ms';
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
show:false,
|
||||
data: categories
|
||||
},
|
||||
series: [
|
||||
{ name: legendData[0], type: 'bar', data: [] },
|
||||
{ name: legendData[1], type: 'bar', data: [] },
|
||||
{ name: legendData[2], type: 'bar', data: [] },
|
||||
{ name: legendData[3], type: 'bar', data: [] },
|
||||
{ name: legendData[4], type: 'bar', data: [] },
|
||||
{ name: legendData[5], type: 'bar', data: [] },
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: renderItem1,
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0
|
||||
},
|
||||
data: data1
|
||||
}
|
||||
]
|
||||
}
|
||||
this.timeLine.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.timeLine.resize();
|
||||
});
|
||||
},
|
||||
drawGuageCpu() {
|
||||
this.guageCpu = echarts.init(document.getElementById("cpu"))
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '93%'],
|
||||
radius: 90,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle:{
|
||||
color: "#8531f6"
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 20
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color:[[1, '#162b39']],
|
||||
width: 20
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show:false,
|
||||
},
|
||||
splitLine: {
|
||||
show:false,
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontFamily: "MicrogrammaD-MediExte",
|
||||
fontSize: 24,
|
||||
lineHeight: 28,
|
||||
offsetCenter: [0, '-10%'],
|
||||
formatter: '{value} %',
|
||||
color: 'white'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '93%'],
|
||||
radius: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#7776ff' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#ae2cf1' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 2
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.guageCpu.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.guageCpu.resize();
|
||||
});
|
||||
},
|
||||
drawGuageMemory() {
|
||||
this.guageMemory = echarts.init(document.getElementById("memory"))
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '93%'],
|
||||
radius: 90,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle:{
|
||||
color: "#1aad32"
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 20
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color:[[1, '#162b39']],
|
||||
width: 20
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show:false,
|
||||
},
|
||||
splitLine: {
|
||||
show:false,
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontFamily: "MicrogrammaD-MediExte",
|
||||
fontSize: 24,
|
||||
lineHeight: 28,
|
||||
offsetCenter: [0, '-10%'],
|
||||
formatter: '{value} %',
|
||||
color: 'white'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '93%'],
|
||||
radius: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#1bad33' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#14ea38' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 2
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.guageMemory.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.guageMemory.resize();
|
||||
});
|
||||
},
|
||||
drawGuageLoads() {
|
||||
this.guageLoads = echarts.init(document.getElementById("loads"))
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '93%'],
|
||||
radius: 90,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle:{
|
||||
color: "#61bbfa"
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 20
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color:[[1, '#162b39']],
|
||||
width: 20
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show:false,
|
||||
},
|
||||
splitLine: {
|
||||
show:false,
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontFamily: "MicrogrammaD-MediExte",
|
||||
fontSize: 24,
|
||||
lineHeight: 28,
|
||||
offsetCenter: [0, '-10%'],
|
||||
formatter: '{value} %',
|
||||
color: 'white'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '93%'],
|
||||
radius: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#4facfe' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#00f2fe' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 2
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.guageLoads.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.guageLoads.resize();
|
||||
});
|
||||
},
|
||||
drawAreaCpu() {
|
||||
this.areaCpu = echarts.init(document.getElementById("areaCpu"))
|
||||
let option = {
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0',
|
||||
top:15,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
data: date
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type:'line',
|
||||
smooth:true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
itemStyle:{ normal:{color:"#10b3d6"}},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: "#10b3d6",
|
||||
},
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
this.areaCpu.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.areaCpu.resize();
|
||||
});
|
||||
},
|
||||
drawDisk() {
|
||||
this.barDisk = echarts.init(document.getElementById("disk"))
|
||||
let option = {
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0',
|
||||
top:15,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
data: ['C', 'D', 'E']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.5)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(119, 181, 213, 0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
formatter: "{value}%"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 50,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function(params) {
|
||||
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
||||
var colorList = [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#b43c2b' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#d3a721' // 100% 处的颜色
|
||||
}],
|
||||
}, {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#0c5fa6' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#0af0f8' // 100% 处的颜色
|
||||
}],
|
||||
}, {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#0a6f0a' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#90d40c' // 100% 处的颜色
|
||||
}],
|
||||
}
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
},
|
||||
},
|
||||
data: [60, 80, 30],
|
||||
z: 10,
|
||||
zlevel: 0,
|
||||
},
|
||||
{
|
||||
// 分隔
|
||||
type: "pictorialBar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0F375F",
|
||||
},
|
||||
},
|
||||
symbolRepeat: "fixed",
|
||||
symbolMargin: 2,
|
||||
symbol: "rect",
|
||||
symbolClip: true,
|
||||
symbolSize: [50, 4],
|
||||
symbolPosition: "start",
|
||||
data: [60, 80, 30],
|
||||
width: 5,
|
||||
z: 0,
|
||||
zlevel: 1,
|
||||
},
|
||||
],
|
||||
}
|
||||
this.barDisk.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.barDisk.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -578,12 +1290,43 @@ export default {
|
|||
}
|
||||
.content-center{
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
height: 115px;
|
||||
position: relative;
|
||||
// height: 14.9%;
|
||||
.legend-list{
|
||||
list-style:none;
|
||||
li{
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
margin-left: 25px;
|
||||
.li-icon{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line-bg{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 55px;
|
||||
background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
|
||||
}
|
||||
.time-line{
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.content-bottom{
|
||||
width: 100%;
|
||||
height: calc(100% - 461px);
|
||||
height: calc(100% - 446px);
|
||||
// height: 41.6%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -593,11 +1336,40 @@ export default {
|
|||
&-top{
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
.gauge-content{
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
width: 100%;
|
||||
height: calc(100% - 160px);
|
||||
.right-title{
|
||||
font-family: ArialMT;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
color: #ade6ee;
|
||||
font-weight: normal;
|
||||
&-item{
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
i{
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
letter-spacing: 2px;
|
||||
color: #ade6ee;
|
||||
}
|
||||
}
|
||||
.area-cpu{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar-disk{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user