echarts
<template>
<div class="server-charts">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div :id="IdName" class="chart-block"></div>
<div class="chart-bottom">
<div class="left">
<el-button class="el-icon-d-arrow-left"></el-button>
</div>
<div class="center">
<el-button class="el-icon-zoom-out"></el-button>
<el-button class="all">全貌</el-button>
<el-button class="el-icon-zoom-in"></el-button>
</div>
<div class="right">
<el-button class="el-icon-d-arrow-right"></el-button>
</div>
</div>
</div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入dayJS
import dayjs from 'dayjs'
// 引入获取数据接口
import { getServerData } from '@/api/report.js'
export default {
name: 'server-charts',
props: ['IdName'],
data () {
return {
// 入参
testRunId: '11',
indices: ['cpu', 'mem', 'diskiops', 'diskmbps', 'netiops', 'netmbps'],
interval: 10,
// 图标数据
option: {
title: {
text: `${this.IdName}(%)`,
padding: 20
},
tooltip: {
trigger: 'axis'
},
legend: {
icon: 'circle',
right: 55,
top: 20
},
grid: {
left: '3%',
right: '3%',
top: '20%',
bottom: '11%',
containLabel: true
},
// toolbox: {
// feature: {}
// },
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
min: 0,
max: 100,
// splitNumber: 5,
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: []
},
// 时间选择器
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
},
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
}
},
computed: {
refreshChartStatus () {
return this.$store.getters.getRefreshChart
}
},
watch: {
// 侧边栏变化重载图表
refreshChartStatus () {
const myChart = echarts.getInstanceByDom(document.getElementById(this.IdName))
this.$nextTick(() => {
myChart.resize()
})
}
},
methods: {
// echarts 自适应大小
chartResize () {
this.myChart = echarts.init(document.getElementById(this.IdName))
this.$nextTick(() => {
this.myChart.resize()
})
this.myChart.setOption(this.option)
window.addEventListener('resize', () => {
this.myChart.resize()
})
},
// 获取图表数据
async getWorkData (params) {
const { data } = await getServerData(params)
// 数据填充option
var res = data.data
res.indices.forEach((item) => {
const ydata = []
for (var i = 0; i < item.data.length; i++) {
ydata.push(item.data[i].split('%')[0])
}
var seriesItem = {
name: item.name,
type: 'line',
data: ydata,
symbol: 'none', // 去掉折现交接处圆圈
symbolSize: 2, // 折线粗细
color: 'rgb(75, 168, 255)'
}
this.option.series.push(seriesItem)
})
// 处理x轴坐标
// var sDate = dayjs(res.startdate).format('YYYY/MM/DD H:m:s')
res.indices[0].data.forEach((item, i) => {
// 使用dayJS处理时间相加
var sDate = dayjs(res.startdate).add(res.interval * i, 's').format('YYYY/M/DD H:m:s')
this.option.xAxis.data.push(sDate)
})
// 绘制echarts图表
this.myChart.setOption(this.option)
}
},
created () {
// 调用接口
if (this.IdName === 'cpu') {
this.getWorkData({
testRunId: this.testRunId,
indices: this.indices[0],
interval: this.interval
})
} else if (this.IdName === 'mem') {
this.getWorkData({
testRunId: this.testRunId,
indices: this.indices[1],
interval: this.interval
})
} else if (this.IdName === 'diskiops') {
this.getWorkData({
testRunId: this.testRunId,
indices: this.indices[2],
interval: this.interval
})
} else if (this.IdName === 'diskmbps') {
this.getWorkData({
testRunId: this.testRunId,
indices: this.indices[3],
interval: this.interval
})
} else if (this.IdName === 'netiops') {
this.getWorkData({
testRunId: this.testRunId,
indices: this.indices[4],
interval: this.interval
})
} else if (this.IdName === 'netmbps') {
this.getWorkData({
testRunId: this.testRunId,
indices: this.indices[5],
interval: this.interval
})
}
},
mounted () {
this.chartResize()
}
}
</script>
<style lang="less" scoped>
.server-charts {
padding: 5px 0;
border: 1px solid #e6e6e6;
position: relative;
.chart-block {
width: 100%;
height: 447px;
}
.check-box {
position: relative;
.tital {
position: absolute;
right: 310px;
top: 20px;
font-size: 14px;
height: 19px;
line-height: 19px;
}
.el-checkbox-group {
width: 300px;
position: absolute;
right: 0;
top: 20px;
.el-checkbox {
z-index: 2;
margin-right: 20px;
margin-bottom: 10px;
}
}
}
.chart-bottom {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 2%;
position: absolute;
bottom: 20px;
.center {
display: flex;
justify-content: center;
}
.el-button {
padding: 8px 8px;
border-radius: 0;
}
/deep/ .all {
padding: 8px 20px!important;
}
}
}
</style>
