137 lines
3.0 KiB
Vue
137 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="main-content">
|
||
|
|
<div class="title-content">
|
||
|
|
<div class="box-between">
|
||
|
|
<div>监控点运行情况趋势图</div>
|
||
|
|
</div>
|
||
|
|
<div class="time-condition">
|
||
|
|
<el-radio-group v-model="timeRadio" size="small">
|
||
|
|
<el-radio-button label="3">近七日</el-radio-button>
|
||
|
|
<el-radio-button label="4">近一月</el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chart" ref="ChartFour"></div>
|
||
|
|
<!-- <div v-if="statsEnterpriseList.length == 0">
|
||
|
|
<div class="placeholderBox">
|
||
|
|
<img src="@/assets/images/noData.png" alt="" />
|
||
|
|
<p>暂无数据</p>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import echarts from "echarts4";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
timeRadio: "3",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
mounted() {
|
||
|
|
this.centerOne();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
centerOne() {
|
||
|
|
let ageChart = echarts.init(this.$refs.ChartFour);
|
||
|
|
let option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
axisPointer: {
|
||
|
|
type: "cross",
|
||
|
|
label: {
|
||
|
|
backgroundColor: "#6a7985",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ["Email"],
|
||
|
|
right: 20,
|
||
|
|
top: 10
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: "3%",
|
||
|
|
right: "3%",
|
||
|
|
bottom: "0%",
|
||
|
|
top: "15%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: "category",
|
||
|
|
boundaryGap: false,
|
||
|
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: "value",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Email",
|
||
|
|
type: "line",
|
||
|
|
stack: "Total",
|
||
|
|
areaStyle: {},
|
||
|
|
emphasis: {
|
||
|
|
focus: "series",
|
||
|
|
},
|
||
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||
|
|
}
|
||
|
|
],
|
||
|
|
};
|
||
|
|
ageChart.setOption(option);
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
ageChart.resize();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.main-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.title-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.box-between {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
margin-left: 16px;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-between::before {
|
||
|
|
content: "";
|
||
|
|
width: 3px;
|
||
|
|
height: 25px;
|
||
|
|
background: #268dff;
|
||
|
|
position: absolute;
|
||
|
|
left: -8px;
|
||
|
|
}
|
||
|
|
.time-condition {
|
||
|
|
margin-right: 16px;
|
||
|
|
margin-top: 5px;
|
||
|
|
:deep() {
|
||
|
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||
|
|
background-color: transparent;
|
||
|
|
border: 1px solid #f28586;
|
||
|
|
color: #f28586;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 88%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|