|
|
<template>
|
|
|
<div class="echartsBox">
|
|
|
<div class="gropName">
|
|
|
<el-checkbox-group v-model="checkList">
|
|
|
<el-checkbox
|
|
|
v-for="item in qtOption"
|
|
|
:label="item.groupName"
|
|
|
:key="item.groupName"
|
|
|
><span v-if="item.groupName == 'H2'">{{ item.groupName }}(氢气)</span>
|
|
|
<span v-if="item.groupName == 'CO'"
|
|
|
>{{ item.groupName }}(一氧化碳)</span
|
|
|
>
|
|
|
<span v-if="item.groupName == 'CH4'">{{ item.groupName }}(甲烷)</span>
|
|
|
<span v-if="item.groupName == 'C2H4'"
|
|
|
>{{ item.groupName }}(乙烯)</span
|
|
|
>
|
|
|
<span v-if="item.groupName == 'C2H6'"
|
|
|
>{{ item.groupName }}(乙烷)</span
|
|
|
>
|
|
|
<span v-if="item.groupName == 'C2H2'"
|
|
|
>{{ item.groupName }}(乙炔)</span
|
|
|
></el-checkbox
|
|
|
>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
<div id="demo1"></div>
|
|
|
<div id="demo2"></div>
|
|
|
<div id="demo3"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import axios from "axios";
|
|
|
export default {
|
|
|
name: "",
|
|
|
data() {
|
|
|
return {
|
|
|
checkList: [], //选中勾选框
|
|
|
qtOption: [], //气体数据
|
|
|
myChart: "",
|
|
|
xData1: [], //横坐标
|
|
|
lineData1: [], //纵坐标
|
|
|
yMax1: "", //y轴最大值
|
|
|
channelCrests1: [], //气体数组
|
|
|
dataPointer1: [], //气体点
|
|
|
|
|
|
xData2: [], //横坐标
|
|
|
lineData2: [], //纵坐标
|
|
|
yMax2: "", //y轴最大值
|
|
|
channelCrests2: [], //气体数组
|
|
|
dataPointer2: [], //气体点
|
|
|
|
|
|
xData3: [], //横坐标
|
|
|
lineData3: [], //纵坐标
|
|
|
yMax3: "", //y轴最大值
|
|
|
channelCrests3: [], //气体数组
|
|
|
dataPointer3: [], //气体点
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.getMenuData1();
|
|
|
this.getMenuData2();
|
|
|
this.getMenuData3();
|
|
|
},
|
|
|
mounted() {},
|
|
|
watch: {},
|
|
|
methods: {
|
|
|
//图表1
|
|
|
getMenuData1() {
|
|
|
axios
|
|
|
.get("/aa.json")
|
|
|
.then((res) => {
|
|
|
console.log("getMenuData", res);
|
|
|
// this.qtOption = res.data.config.channels[0].crests;//气体
|
|
|
// console.log(this.qtOption);
|
|
|
this.lineData1 = res.data.data[0]; //纵坐标数据
|
|
|
this.yMax1 = res.data.config.yMax; //y轴最大值
|
|
|
|
|
|
this.channelCrests1 = res.data.config.channels[0].crests;
|
|
|
|
|
|
var timeSpan = 1; //时间间隔
|
|
|
for (
|
|
|
var i = 0;
|
|
|
i < res.data.config.numberOfData * timeSpan;
|
|
|
i = i + timeSpan
|
|
|
) {
|
|
|
this.xData1.push(i);
|
|
|
}
|
|
|
for (var i = 0; i < this.channelCrests1.length; i++) {
|
|
|
this.dataPointer1.push({
|
|
|
name: this.channelCrests1[i].groupName,
|
|
|
label: this.channelCrests1[i].crestNo + "",
|
|
|
xAxis: this.channelCrests1[i].crestTime,
|
|
|
yAxis: this.lineData1[this.channelCrests1[i].crestTime],
|
|
|
});
|
|
|
}
|
|
|
console.log(this.dataPointer1);
|
|
|
|
|
|
//横坐标数据
|
|
|
this.getEchart1();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
},
|
|
|
//图表2
|
|
|
getMenuData2() {
|
|
|
axios
|
|
|
.get("/bb.json")
|
|
|
.then((res) => {
|
|
|
this.lineData2 = res.data.data[0]; //纵坐标数据
|
|
|
this.yMax2 = res.data.config.yMax; //y轴最大值
|
|
|
|
|
|
this.channelCrests2 = res.data.config.channels[0].crests;
|
|
|
var timeSpan = 1; //时间间隔
|
|
|
for (
|
|
|
var i = 0;
|
|
|
i < res.data.config.numberOfData * timeSpan;
|
|
|
i = i + timeSpan
|
|
|
) {
|
|
|
this.xData2.push(i);
|
|
|
}
|
|
|
for (var i = 0; i < this.channelCrests2.length; i++) {
|
|
|
this.dataPointer2.push({
|
|
|
name: this.channelCrests2[i].groupName,
|
|
|
label: this.channelCrests2[i].crestNo + "",
|
|
|
xAxis: this.channelCrests2[i].crestTime,
|
|
|
yAxis: this.lineData2[this.channelCrests2[i].crestTime],
|
|
|
});
|
|
|
}
|
|
|
console.log(this.dataPointer2);
|
|
|
|
|
|
//横坐标数据
|
|
|
//横坐标数据
|
|
|
this.getEchart2();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
},
|
|
|
//图表3
|
|
|
getMenuData3() {
|
|
|
axios
|
|
|
.get("/cc.json")
|
|
|
.then((res) => {
|
|
|
this.lineData3 = res.data.data[0]; //纵坐标数据
|
|
|
this.yMax3 = res.data.config.yMax; //y轴最大值
|
|
|
this.channelCrests3 = res.data.config.channels[0].crests;
|
|
|
var timeSpan = 1; //时间间隔
|
|
|
for (
|
|
|
var i = 0;
|
|
|
i < res.data.config.numberOfData * timeSpan;
|
|
|
i = i + timeSpan
|
|
|
) {
|
|
|
this.xData3.push(i);
|
|
|
}
|
|
|
console.log(this.lineData3);
|
|
|
for (var i = 0; i < this.channelCrests3.length; i++) {
|
|
|
this.dataPointer3.push({
|
|
|
name: this.channelCrests3[i].groupName,
|
|
|
label: this.channelCrests3[i].crestNo + "",
|
|
|
xAxis: this.channelCrests3[i].crestTime,
|
|
|
yAxis: this.lineData3[this.channelCrests3[i].crestTime],
|
|
|
});
|
|
|
}
|
|
|
console.log(this.dataPointer3);
|
|
|
|
|
|
//横坐标数据
|
|
|
this.getEchart3();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
},
|
|
|
//装置数量统计
|
|
|
getEchart1() {
|
|
|
this.$nextTick(() => {
|
|
|
let that = this;
|
|
|
that.myChart = this.$echarts.init(document.getElementById("demo1"));
|
|
|
let option = {
|
|
|
title: {
|
|
|
text: "图谱1",
|
|
|
left: "left",
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
animation: false,
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "inside",
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
{
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
],
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: this.xData1, // 把时间组成的数组接过来，放在x轴上
|
|
|
boundaryGap: false,
|
|
|
showMaxLabel: true,
|
|
|
name: "单位:s", // 这个设置只在末尾添加单位
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
scale: true,
|
|
|
name: "单位:mV", // 你的单位写在这就可以
|
|
|
|
|
|
nameTextStyle: {
|
|
|
// 单位样式
|
|
|
color: "#000", // 字体颜色
|
|
|
fontSize: 10, // 字体大小
|
|
|
padding: [0, 28, 4, 0], // 内填充
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: this.lineData1,
|
|
|
type: "line",
|
|
|
smooth: true,
|
|
|
symbol: "none",
|
|
|
sampling: "lttb",
|
|
|
itemStyle: {
|
|
|
color: "rgb(255, 70, 131)",
|
|
|
},
|
|
|
markPoint: {
|
|
|
data: this.dataPointer1,
|
|
|
symbol: "pin",
|
|
|
symbolSize: 18,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
distance: 0,
|
|
|
formatter: function (params) {
|
|
|
console.log(params);
|
|
|
return params.data.label + ":" + params.name;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
that.myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
that.myChart.resize();
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
getEchart2() {
|
|
|
this.$nextTick(() => {
|
|
|
let that = this;
|
|
|
that.myChart = this.$echarts.init(document.getElementById("demo2"));
|
|
|
let option = {
|
|
|
title: {
|
|
|
text: "图谱2",
|
|
|
left: "left",
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
animation: false,
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "inside",
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
{
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
],
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: this.xData2, // 把时间组成的数组接过来，放在x轴上
|
|
|
boundaryGap: false,
|
|
|
showMaxLabel: true,
|
|
|
name: "单位:s", // 这个设置只在末尾添加单位
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
scale: true,
|
|
|
name: "单位:mV", // 你的单位写在这就可以
|
|
|
|
|
|
nameTextStyle: {
|
|
|
// 单位样式
|
|
|
color: "#000", // 字体颜色
|
|
|
fontSize: 10, // 字体大小
|
|
|
padding: [0, 28, 4, 0], // 内填充
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: this.lineData2,
|
|
|
type: "line",
|
|
|
smooth: true,
|
|
|
symbol: "none",
|
|
|
sampling: "lttb",
|
|
|
itemStyle: {
|
|
|
color: "rgb(255, 70, 131)",
|
|
|
},
|
|
|
markPoint: {
|
|
|
data: this.dataPointer2,
|
|
|
symbol: "pin",
|
|
|
symbolSize: 18,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
distance: 0,
|
|
|
formatter: function (params) {
|
|
|
console.log(params);
|
|
|
return params.data.label + ":" + params.name;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
that.myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
that.myChart.resize();
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
getEchart3() {
|
|
|
this.$nextTick(() => {
|
|
|
let that = this;
|
|
|
that.myChart = this.$echarts.init(document.getElementById("demo3"));
|
|
|
let option = {
|
|
|
title: {
|
|
|
text: "图谱3",
|
|
|
left: "left",
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
animation: false,
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "inside",
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
{
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
],
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: this.xData3, // 把时间组成的数组接过来，放在x轴上
|
|
|
boundaryGap: false,
|
|
|
showMaxLabel: true,
|
|
|
name: "单位:s", // 这个设置只在末尾添加单位
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
scale: true,
|
|
|
show: true, // 前提： y轴肯定是要显示的
|
|
|
name: "单位:mV", // 你的单位写在这就可以
|
|
|
|
|
|
nameTextStyle: {
|
|
|
// 单位样式
|
|
|
color: "#000", // 字体颜色
|
|
|
fontSize: 10, // 字体大小
|
|
|
padding: [0, 28, 4, 0], // 内填充
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: this.lineData3,
|
|
|
type: "line",
|
|
|
smooth: true,
|
|
|
symbol: "none",
|
|
|
sampling: "lttb",
|
|
|
itemStyle: {
|
|
|
color: "rgb(255, 70, 131)",
|
|
|
},
|
|
|
markPoint: {
|
|
|
data: this.dataPointer3,
|
|
|
symbol: "pin",
|
|
|
symbolSize: 18,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
distance: 0,
|
|
|
formatter: function (params) {
|
|
|
console.log(params);
|
|
|
return params.data.label + ":" + params.name;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
that.myChart.setOption(option);
|
|
|
window.addEventListener("resize", () => {
|
|
|
that.myChart.resize();
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.echartsBox {
|
|
|
height: calc(100% - 32px);
|
|
|
padding: 16px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
// justify-content: space-around;
|
|
|
#demo1,
|
|
|
#demo2,
|
|
|
#demo3 {
|
|
|
height: 400px;
|
|
|
width: 80%;
|
|
|
}
|
|
|
.gropName {
|
|
|
.el-checkbox-group {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.el-checkbox {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|