1.确定知道需要几个 什么类型的图表的情况下
<template>
<div class="home">
<div id="leftTj"></div>
<div id="rightTj"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
list: {
product: [
{
base: { name: "4#喷煤1#雾炮", equ_code: "设备编码" },
signal: [
{
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
status: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1,
0, -1, -1, 0, 1,
],
percent: 78,
},
{
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
status: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1,
0, -1, -1, 0, 1,
],
percent: 78,
},
],
param_1: [
{
name: "颗粒物体",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
{
name: "02(%)",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
],
},
],
governed: [
{
base: { name: "设备名称", equ_code: "设备编码" },
signal: [
{
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
status: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1,
0, -1, -1, 0, 1,
],
percent: 78,
},
{
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
status: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1,
0, -1, -1, 0, 1,
],
percent: 78,
},
],
param_1: [
{
name: "颗粒物体",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
{
name: "02(%)",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
],
},
],
monitor: [
{
base: { name: "设备名称", equ_code: "设备编码" },
param_1: [
{
name: "颗粒物体",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
{
name: "02(%)",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
],
},
],
photo: [""],
start_stop: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1, 0, -1,
-1, 0, 1,
],
number: [1, 4, 16, 32, 7, 10, 5, 15, 5, 5],
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
},
option1: {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
data: ["开启", "关闭", "无信号"],
top: "2%",
itemWidth: 10,
itemHeight: 5,
},
xAxis: {
type: "category",
data: [
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
],
},
yAxis: {
name: "mm/y",
type: "value",
splitLine: {
show: false,
},
},
series: [
{
name: "开启",
data: [],
type: "bar",
barCategoryGap: "0%",
smooth: true,
},
],
},
option2: {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: {
type: "category",
data: [
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
],
},
yAxis: {
name: "mm/y",
type: "value",
splitLine: {
show: false,
},
},
series: {
name: "红",
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true,
},
},
id: [],
};
},
watch: {
list: {
immediate: false,
handler: function () {
this.$nextTick(() => {
this.initOption();
});
},
},
},
mounted() {
this.initOption();
},
methods: {
initOption() {
if (this.myChart1) {
this.myChart1.clear();
}
if (this.myChart2) {
this.myChart2.clear();
}
this.myChart1 = echarts.init(document.getElementById("leftTj"));
this.myChart2 = echarts.init(document.getElementById("rightTj"));
if (this.list) {
this.option1.xAxis.data = this.list.time;
this.option1.yAxis.name = "治理设备-4#喷煤1#雾炮";
this.option2.yAxis.name = "治理设备-4#喷煤1#雾炮";
this.list.start_stop.map((item, index) => {
if (item == 0) {
this.option1.series[0].data.push({
value: 120,
itemStyle: {
color: "#808082",
},
});
} else if (item == 1) {
this.option1.series[0].data.push({
value: 120,
itemStyle: {
color: "#1E1EE3",
},
});
} else if (item == -1) {
this.option1.series[0].data.push({
value: 120,
itemStyle: {
color: "#44E31E",
},
});
}
});
this.myChart1.setOption(this.option1);
this.myChart2.setOption(this.option2);
echarts.connect([this.myChart2, this.myChart1]);
window.addEventListener("resize", this.handleResize);
} else {
this.myChart1.setOption(this.option1);
this.myChart2.setOption(this.option2);
echarts.connect([this.myChart2, this.myChart1]);
window.addEventListener("resize", this.handleResize);
}
},
handleResize() {
this.myChart1.resize();
this.myChart2.resize();
},
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
};
</script>
<style lang="less" scoped>
#leftTj {
width: 100%;
height: 20vh;
border: 1px solid red;
}
#rightTj {
width: 100%;
height: 20vh;
border: 1px solid red;
}
</style>
2.不确定需要几个和什么类型的图表的情况下(动态生成图表)
<template>
<div id="empty">
<div>
<el-button type="primary" @click="onSubmit">查询</el-button>
</div>
<div class="equipment">
<h4><i class="el-icon-s-tools"></i> 生产设备:{{ producttext }}</h4>
<div
style="height: 15vh"
v-for="(item, index) in productid"
:key="index"
:id="item"
></div>
<div v-for="(item, indexs) in productoneid" :key="indexs">
<div class="stop_start">
<span></span>
<span>开启</span>
<span></span>
<span>关闭</span>
<span></span>
<span>无数据</span>
</div>
<div style="height: 15vh" :id="item"></div>
</div>
</div>
<div class="equipment">
<h4><i class="el-icon-s-tools"></i> 治理设备:{{ governedtext }}</h4>
<div
style="height: 15vh"
v-for="(item, indexss) in governedid"
:key="indexss"
:id="item"
></div>
<div v-for="(item, indexs) in governedoneid" :key="indexs">
<div class="stop_start">
<span></span>
<span>开启</span>
<span></span>
<span>关闭</span>
<span></span>
<span>无数据</span>
</div>
<div style="height: 15vh" :id="item"></div>
</div>
</div>
<div class="equipment">
<h4><i class="el-icon-s-tools"></i> 监测设备:{{ monitortext }}</h4>
<div
style="height: 15vh"
v-for="(item, indexssss) in monitorid"
:key="indexssss"
:id="item"
></div>
<div v-for="(item, indexs) in monitoroneid" :key="indexs">
<div class="stop_start">
<span></span>
<span>开启</span>
<span></span>
<span>关闭</span>
<span></span>
<span>无数据</span>
</div>
<div style="height: 15vh" :id="item"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
list: null,
productlist: null,
governedlist: null,
monitorlist: null,
id: [],
productid: [],
productoneid: [],
governedid: [],
governedoneid: [],
monitorid: [],
monitoroneid: [],
producttext: "",
governedtext: "",
monitortext: "",
};
},
watch: {
list: {
immediate: false,
handler: function () {
this.$nextTick(() => {
this.initOption();
});
},
},
},
mounted() {},
methods: {
fanhui() {},
onSubmit() {
this.list = {
product: [
{
base: { name: "4#喷煤1#雾炮", equ_code: "设备编码" },
signal: [
{
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
status: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1,
0, -1, -1, 0, 1,
],
percent: 78,
},
{
time: [
"2022-03-08 01:00:00",
"2022-03-08 02:00:00",
"2022-03-08 03:00:00",
"2022-03-08 04:00:00",
"2022-03-08 05:00:00",
"2022-03-08 06:00:00",
"2022-03-08 07:00:00",
"2022-03-08 08:00:00",
"2022-03-08 09:00:00",
"2022-03-08 10:00:00",
"2022-03-08 11:00:00",
"2022-03-08 12:00:00",
"2022-03-08 13:00:00",
"2022-03-08 14:00:00",
"2022-03-08 15:00:00",
"2022-03-08 16:00:00",
"2022-03-08 17:00:00",
"2022-03-08 18:00:00",
"2022-03-08 19:00:00",
"2022-03-08 20:00:00",
"2022-03-08 21:00:00",
"2022-03-08 22:00:00",
"2022-03-08 23:00:00",
"2022-03-08 24:00:00",
],
status: [
0, -1, -1, 1, -1, 0, 1, 1, 0, -1, 1, -1, 0, 1, -1, -1, 0, -1,
1, 0, -1, -1, 0, 1,
],
percent: 78,
},
],
param_1: [
{
name: "颗粒物体",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
{
name: "02(%)",
time: [
"2022-03-08 01:00:00",
"2022-03-08 02:00:00",
"2022-03-08 03:00:00",
"2022-03-08 04:00:00",
"2022-03-08 05:00:00",
"2022-03-08 06:00:00",
"2022-03-08 07:00:00",
"2022-03-08 08:00:00",
"2022-03-08 09:00:00",
"2022-03-08 10:00:00",
"2022-03-08 11:00:00",
"2022-03-08 12:00:00",
"2022-03-08 13:00:00",
"2022-03-08 14:00:00",
"2022-03-08 15:00:00",
"2022-03-08 16:00:00",
"2022-03-08 17:00:00",
"2022-03-08 18:00:00",
"2022-03-08 19:00:00",
"2022-03-08 20:00:00",
"2022-03-08 21:00:00",
"2022-03-08 22:00:00",
"2022-03-08 23:00:00",
"2022-03-08 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
],
},
],
governed: [
{
base: { name: "4#喷煤1#雾炮", equ_code: "设备编码" },
signal: [
{
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
status: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1,
0, -1, -1, 0, 1,
],
percent: 78,
},
{
time: [
"2022-03-08 01:00:00",
"2022-03-08 02:00:00",
"2022-03-08 03:00:00",
"2022-03-08 04:00:00",
"2022-03-08 05:00:00",
"2022-03-08 06:00:00",
"2022-03-08 07:00:00",
"2022-03-08 08:00:00",
"2022-03-08 09:00:00",
"2022-03-08 10:00:00",
"2022-03-08 11:00:00",
"2022-03-08 12:00:00",
"2022-03-08 13:00:00",
"2022-03-08 14:00:00",
"2022-03-08 15:00:00",
"2022-03-08 16:00:00",
"2022-03-08 17:00:00",
"2022-03-08 18:00:00",
"2022-03-08 19:00:00",
"2022-03-08 20:00:00",
"2022-03-08 21:00:00",
"2022-03-08 22:00:00",
"2022-03-08 23:00:00",
"2022-03-08 24:00:00",
],
status: [
0, -1, -1, 1, -1, 0, 1, 1, 0, -1, 1, -1, 0, 1, -1, -1, 0, -1,
1, 0, -1, -1, 0, 1,
],
percent: 78,
},
],
param_1: [
{
name: "颗粒物体",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
{
name: "02(%)",
time: [
"2022-03-08 01:00:00",
"2022-03-08 02:00:00",
"2022-03-08 03:00:00",
"2022-03-08 04:00:00",
"2022-03-08 05:00:00",
"2022-03-08 06:00:00",
"2022-03-08 07:00:00",
"2022-03-08 08:00:00",
"2022-03-08 09:00:00",
"2022-03-08 10:00:00",
"2022-03-08 11:00:00",
"2022-03-08 12:00:00",
"2022-03-08 13:00:00",
"2022-03-08 14:00:00",
"2022-03-08 15:00:00",
"2022-03-08 16:00:00",
"2022-03-08 17:00:00",
"2022-03-08 18:00:00",
"2022-03-08 19:00:00",
"2022-03-08 20:00:00",
"2022-03-08 21:00:00",
"2022-03-08 22:00:00",
"2022-03-08 23:00:00",
"2022-03-08 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
],
},
],
monitor: [
{
base: { name: "4#喷煤1#雾炮", equ_code: "设备编码" },
signal: [
{
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
status: [
0, 1, -1, 1, 1, 0, -1, 1, 0, -1, 1, 0, 0, 1, -1, -1, 0, 1, 1,
0, -1, -1, 0, 1,
],
percent: 78,
},
{
time: [
"2022-03-08 01:00:00",
"2022-03-08 02:00:00",
"2022-03-08 03:00:00",
"2022-03-08 04:00:00",
"2022-03-08 05:00:00",
"2022-03-08 06:00:00",
"2022-03-08 07:00:00",
"2022-03-08 08:00:00",
"2022-03-08 09:00:00",
"2022-03-08 10:00:00",
"2022-03-08 11:00:00",
"2022-03-08 12:00:00",
"2022-03-08 13:00:00",
"2022-03-08 14:00:00",
"2022-03-08 15:00:00",
"2022-03-08 16:00:00",
"2022-03-08 17:00:00",
"2022-03-08 18:00:00",
"2022-03-08 19:00:00",
"2022-03-08 20:00:00",
"2022-03-08 21:00:00",
"2022-03-08 22:00:00",
"2022-03-08 23:00:00",
"2022-03-08 24:00:00",
],
status: [
0, -1, -1, 1, -1, 0, 1, 1, 0, -1, 1, -1, 0, 1, -1, -1, 0, -1,
1, 0, -1, -1, 0, 1,
],
percent: 78,
},
],
param_1: [
{
name: "颗粒物体",
time: [
"2022-03-07 01:00:00",
"2022-03-07 02:00:00",
"2022-03-07 03:00:00",
"2022-03-07 04:00:00",
"2022-03-07 05:00:00",
"2022-03-07 06:00:00",
"2022-03-07 07:00:00",
"2022-03-07 08:00:00",
"2022-03-07 09:00:00",
"2022-03-07 10:00:00",
"2022-03-07 11:00:00",
"2022-03-07 12:00:00",
"2022-03-07 13:00:00",
"2022-03-07 14:00:00",
"2022-03-07 15:00:00",
"2022-03-07 16:00:00",
"2022-03-07 17:00:00",
"2022-03-07 18:00:00",
"2022-03-07 19:00:00",
"2022-03-07 20:00:00",
"2022-03-07 21:00:00",
"2022-03-07 22:00:00",
"2022-03-07 23:00:00",
"2022-03-07 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
{
name: "02(%)",
time: [
"2022-03-08 01:00:00",
"2022-03-08 02:00:00",
"2022-03-08 03:00:00",
"2022-03-08 04:00:00",
"2022-03-08 05:00:00",
"2022-03-08 06:00:00",
"2022-03-08 07:00:00",
"2022-03-08 08:00:00",
"2022-03-08 09:00:00",
"2022-03-08 10:00:00",
"2022-03-08 11:00:00",
"2022-03-08 12:00:00",
"2022-03-08 13:00:00",
"2022-03-08 14:00:00",
"2022-03-08 15:00:00",
"2022-03-08 16:00:00",
"2022-03-08 17:00:00",
"2022-03-08 18:00:00",
"2022-03-08 19:00:00",
"2022-03-08 20:00:00",
"2022-03-08 21:00:00",
"2022-03-08 22:00:00",
"2022-03-08 23:00:00",
"2022-03-08 24:00:00",
],
value: [
82, 92, 90, 34, 10, 30, 20, 82, 92, 90, 34, 10, 30, 20, 82,
92, 90, 34, 10, 30, 20, 10, 30, 20,
],
},
],
},
],
};
for (var i in this.list) {
if (i == "product") {
this.producttext = this.list.product[0].base.name;
if (
this.list.product[0].signal &&
this.list.product[0].signal.length > 0
) {
this.list.product[0].signal.map((item, index) => {
this.productid.push("product" + index);
});
}
if (
this.list.product[0].param_1 &&
this.list.product[0].param_1.length > 0
) {
this.list.product[0].param_1.map((item, index) => {
this.productoneid.push("productline" + index);
});
}
}
if (i == "governed") {
this.governedtext = this.list.governed[0].base.name;
if (
this.list.governed[0].signal &&
this.list.governed[0].signal.length > 0
) {
this.list.governed[0].signal.map((item, index) => {
this.governedid.push("governed" + index);
});
}
if (
this.list.governed[0].param_1 &&
this.list.governed[0].param_1.length > 0
) {
this.list.governed[0].param_1.map((item, index) => {
this.governedoneid.push("governedline" + index);
});
}
}
if (i == "monitor") {
this.monitortext = this.list.monitor[0].base.name;
if (
this.list.monitor[0].signal &&
this.list.monitor[0].signal.length > 0
) {
this.list.monitor[0].signal.map((item, index) => {
this.monitorid.push("monitor" + index);
});
}
if (
this.list.monitor[0].param_1 &&
this.list.monitor[0].param_1.length > 0
) {
this.list.monitor[0].param_1.map((item, index) => {
this.monitoroneid.push("monitorline" + index);
});
}
}
this.id = this.productid
.concat(this.productoneid)
.concat(this.governedid)
.concat(this.governedoneid)
.concat(this.monitorid)
.concat(this.monitoroneid);
// console.log(this.id, "this.id");
}
},
initOption() {
var vars = {};
var optionones = {};
var myChartones = [];
this.id.map((item, i) => {
var myChart = "myChart" + i; //动态定义变量名
var option = "option" + i;
vars[myChart] = echarts.init(document.getElementById(item));
this.productid.map((e, index) => {
if (item == e) {
optionones[option] = {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: {
type: "category",
data: this.list.product[0].param_1[index].time,
axisLabel: {
// X轴线 标签修改
textStyle: {
color: "#ffffff",
},
},
axisTick: {
// X轴线 刻度线
show: false,
},
},
yAxis: {
name: this.list.product[0].param_1[index].name,
nameTextStyle: {
color: "green",
fontSize: 16,
padding: 10,
},
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: {
name: this.list.product[0].param_1[index].name,
data: this.list.product[0].param_1[index].value,
type: "line",
smooth: true,
},
};
}
});
this.productoneid.map((itemone, indexone) => {
var seriesdata = [];
this.list.product[0].signal[indexone].status.map(
(itemtwelve, indexten) => {
if (itemtwelve == 0) {
seriesdata.push({
value: 200,
itemStyle: {
color: "#21E84F",
},
});
}
if (itemtwelve == 1) {
seriesdata.push({
value: 200,
itemStyle: {
color: "#0000FF",
},
});
}
if (itemtwelve == -1) {
seriesdata.push({
value: 200,
itemStyle: {
color: "#DCDFE6",
},
});
}
}
);
if (item == itemone) {
optionones[option] = {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
data: [],
top: "2%",
itemWidth: 10,
itemHeight: 5,
},
xAxis: {
type: "category",
data: this.list.product[0].signal[indexone].time,
axisLabel: {
// X轴线 标签修改
textStyle: {
color: "#ffffff",
},
},
axisTick: {
// X轴线 刻度线
show: false,
},
},
yAxis: {
name: "",
nameTextStyle: {
color: "green",
fontSize: 16,
padding: 10,
},
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
data: seriesdata,
type: "bar",
barCategoryGap: "0%",
smooth: true,
},
],
};
}
});
this.governedid.map((itemtwo, indextwo) => {
if (item == itemtwo) {
optionones[option] = {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: {
type: "category",
data: this.list.governed[0].param_1[indextwo].time,
axisLabel: {
// X轴线 标签修改
textStyle: {
color: "#ffffff",
},
},
axisTick: {
// X轴线 刻度线
show: false,
},
},
yAxis: {
name: this.list.governed[0].param_1[indextwo].name,
nameTextStyle: {
color: "green",
fontSize: 16,
padding: 10,
},
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: {
name: this.list.governed[0].param_1[indextwo].name,
data: this.list.governed[0].param_1[indextwo].value,
type: "line",
smooth: true,
},
};
}
});
this.governedoneid.map((itemthree, indexthree) => {
var seriesdataone = [];
this.list.product[0].signal[indexthree].status.map(
(itemtwelve, indexten) => {
if (itemtwelve == 0) {
seriesdataone.push({
value: 200,
itemStyle: {
color: "#21E84F",
},
});
}
if (itemtwelve == 1) {
seriesdataone.push({
value: 200,
itemStyle: {
color: "#0000FF",
},
});
}
if (itemtwelve == -1) {
seriesdataone.push({
value: 200,
itemStyle: {
color: "#DCDFE6",
},
});
}
}
);
if (item == itemthree) {
optionones[option] = {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
data: [],
top: "2%",
itemWidth: 10,
itemHeight: 5,
},
xAxis: {
type: "category",
data: this.list.governed[0].signal[indexthree].time,
axisLabel: {
// X轴线 标签修改
textStyle: {
color: "#ffffff",
},
},
axisTick: {
// X轴线 刻度线
show: false,
},
},
yAxis: {
name: "",
nameTextStyle: {
color: "green",
fontSize: 16,
padding: 10,
},
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
data: seriesdataone,
type: "bar",
barCategoryGap: "0%",
smooth: true,
},
],
};
}
});
this.monitorid.map((itemfour, indexfour) => {
if (item == itemfour) {
optionones[option] = {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: {
type: "category",
data: this.list.monitor[0].param_1[indexfour].time,
axisLabel: {
// X轴线 标签修改
textStyle: {
color: "#ffffff",
},
},
axisTick: {
// X轴线 刻度线
show: false,
},
},
yAxis: {
name: this.list.monitor[0].param_1[indexfour].name,
nameTextStyle: {
color: "green",
fontSize: 16,
padding: 10,
},
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: {
name: this.list.monitor[0].param_1[indexfour].name,
data: this.list.monitor[0].param_1[indexfour].value,
type: "line",
smooth: true,
},
};
}
});
this.monitoroneid.map((itemfive, indexfive) => {
var seriesdatatwo = [];
this.list.monitor[0].signal[indexfive].status.map(
(itemtwelve, indexten) => {
if (itemtwelve == 0) {
seriesdatatwo.push({
value: 200,
itemStyle: {
color: "#21E84F",
},
});
}
if (itemtwelve == 1) {
seriesdatatwo.push({
value: 200,
itemStyle: {
color: "#0000FF",
},
});
}
if (itemtwelve == -1) {
seriesdatatwo.push({
value: 200,
itemStyle: {
color: "#DCDFE6",
},
});
}
}
);
if (item == itemfive) {
optionones[option] = {
textStyle: {
color: "#545454",
fontFamily: "Source Han Sans",
fontWeight: "lighter",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
data: [],
top: "2%",
itemWidth: 10,
itemHeight: 5,
},
xAxis: {
type: "category",
data: this.list.monitor[0].signal[indexfive].time,
axisLabel: {
// X轴线 标签修改
textStyle: {
color: "#ffffff",
},
},
axisTick: {
// X轴线 刻度线
show: false,
},
},
yAxis: {
name: "",
nameTextStyle: {
color: "green",
fontSize: 16,
padding: 10,
},
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
data: seriesdatatwo,
type: "bar",
barCategoryGap: "0%",
smooth: true,
},
],
};
}
});
myChartones.push(vars[myChart]);
vars[myChart].setOption(optionones[option]);
echarts.connect(myChartones);
window.addEventListener("resize", this.handleResize(vars[myChart]));
});
},
handleResize(myChart) {
myChart.resize();
},
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
};
</script>
<style lang="less" scoped>
#empty {
width: 100%;
height: 100%;
display: block;
background: #010d32;
.equipment {
width: 90%;
padding: 0;
// border: 1px solid red;
h4 {
width: 90%;
margin: 0;
text-align: start;
color: #07c5c4;
// border: 1px solid red;
}
}
}
.stop_start {
// border: 1px solid red;
width: 15vw;
height: 4vh;
display: flex;
float: right;
justify-content: space-evenly;
align-items: center;
span:nth-of-type(1) {
display: inline-block;
width: 2vw;
height: 2vh;
background: blue;
transform: rotate(0);
border: 0;
}
span:nth-of-type(2) {
display: inline-block;
height: 2vh;
line-height: 2vh;
font-size: 0.8vw;
}
span:nth-of-type(3) {
display: inline-block;
width: 2vw;
height: 2vh;
background: #21e84f;
}
span:nth-of-type(4) {
display: inline-block;
height: 2vh;
line-height: 2vh;
font-size: 0.8vw;
}
span:nth-of-type(5) {
display: inline-block;
width: 2vw;
height: 2vh;
background: #dcdfe6;
}
span:nth-of-type(6) {
display: inline-block;
height: 2vh;
line-height: 2vh;
font-size: 0.8vw;
}
}
</style>
<style scoped>
</style>