206 lines
4.7 KiB
Vue
206 lines
4.7 KiB
Vue
<template>
|
|
<div class="project-e-trend-census">
|
|
<div class="trend-conter">
|
|
<e-echarts-line
|
|
ref="echartsLineTrend"
|
|
:styles="echartsOption.styles"
|
|
:colorList="echartsOption.colorList"
|
|
:eId="echartsOption.eId"
|
|
:option="resultOption"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import EEchartsLine from "@/components/Echarts/EEchartsLine";
|
|
import * as echarts from "echarts";
|
|
export default {
|
|
name: "ETrendCensus",
|
|
components: {
|
|
EEchartsLine
|
|
},
|
|
props: ["result"],
|
|
data() {
|
|
return {
|
|
echartsOption: {
|
|
styles: "width: 100%; height: 100%;",
|
|
colorList: ["#FC6A16", "#1EEEFF"],
|
|
eId: "trendEchartsLine",
|
|
},
|
|
typeName: "alarm",
|
|
resultOption: {
|
|
color: ["#FC6A16", "#1EEEFF"],
|
|
title: {
|
|
text: "",
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
top: -5,
|
|
right: 5,
|
|
data: ["报警", "预警"],
|
|
// icon: "circle",
|
|
textStyle: {
|
|
color: "#344567",
|
|
fontSize: 12,
|
|
fontWeight: 400
|
|
},
|
|
},
|
|
grid: {
|
|
left: "10",
|
|
right: "10",
|
|
bottom: "5",
|
|
top: 37,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
show: true,
|
|
data: [],
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
// color: "#E8E8E8",
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
// color: "#E8E8E8",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "报警",
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 2,
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(252,106,22,0.8)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(252,106,22,0.1)",
|
|
},
|
|
]),
|
|
},
|
|
markPoint: {
|
|
symbolSize: 35,
|
|
data: [
|
|
{ type: 'max', name: 'Max' },
|
|
{ type: 'min', name: 'Min' }
|
|
]
|
|
},
|
|
label: {
|
|
show: false,
|
|
formatter: function (params) {
|
|
return echarts.format.formatTime("yyyy-MM-dd", params.value);
|
|
},
|
|
backgroundColor: "#7581BD",
|
|
},
|
|
data: [],
|
|
},
|
|
{
|
|
name: "预警",
|
|
type: "line",
|
|
markPoint: {
|
|
symbolSize: 35,
|
|
data: [
|
|
{ type: 'max', name: 'Max' },
|
|
{ type: 'min', name: 'Min' }
|
|
]
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(30,238,255,0.8)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(30,238,255,0.1)",
|
|
},
|
|
]),
|
|
},
|
|
smooth: true,
|
|
symbolSize: 2,
|
|
data: [],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
result: {
|
|
handler: function (val, oldVal) {
|
|
this.resultOption.xAxis.data = val["name"];
|
|
this.resultOption.series[0].data = val["alarm"];
|
|
this.resultOption.series[1].data = val["warning"];
|
|
this.updateEcharts();
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {
|
|
// 类型发生变化根据新数据刷新 图表信息
|
|
updateEcharts() {
|
|
this.$refs.echartsLineTrend.updateEchart();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.project-e-trend-census {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.trend-conter {
|
|
width: 100%;
|
|
height: 200px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding-top: 10px;
|
|
background-size: contain;
|
|
padding: 0;
|
|
.tabs-block {
|
|
width: 305px;
|
|
height: 38px;
|
|
background: #bfbfbf94;
|
|
display: flex;
|
|
color: #fff;
|
|
> div {
|
|
width: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
letter-spacing: 7px;
|
|
cursor: default;
|
|
}
|
|
.div-select {
|
|
background: #0010ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|