echarts
parent
6cc29c6428
commit
11f3a8db3c
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZf2("echartDiv", '热岛消减率');
|
||||
// getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
|
||||
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
title: {
|
||||
text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率A',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率B',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv" class="echartDiv100"></div>
|
||||
<div id="echartDivQ" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv", '蒸发量');
|
||||
getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv", '蒸发量');
|
||||
getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率A',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率B',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,474 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv" class="echartDiv100"></div>
|
||||
<div id="echartDivQ" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv", '蒸发量');
|
||||
getChartsZf2("echartDivQ", '蒸发带走的潜热')
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getChartsZf2,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv" class="echartDiv100"></div>
|
||||
<div id="echartDivQ" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZf1("echartDiv", '蒸发量');
|
||||
getChartsZf2("echartDivQ", '蒸发带走的潜热')
|
||||
});
|
||||
const getChartsZf1 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
title: {
|
||||
text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率A',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率B',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZf1,
|
||||
getChartsZf2,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<template>
|
||||
<div class="history-container">
|
||||
<div class="flex top">
|
||||
<div class="flex width200">
|
||||
<span> 系统选择：</span>
|
||||
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in fxOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||
</el-table> -->
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目</th>
|
||||
<th colspan="17">降雨量(mm/s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>序号</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.label }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>时间</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.time }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数值</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "History",
|
||||
components: {
|
||||
BarEchart,
|
||||
Process,
|
||||
Date,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
title: "降水量-柱状图",
|
||||
legend: ["降水量"],
|
||||
color: ["#6fdbce"],
|
||||
},
|
||||
],
|
||||
fxOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "降水量",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "系统A",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "系统B",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "系统C",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "系统D",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "系统E",
|
||||
},
|
||||
],
|
||||
value1: "降水量",
|
||||
tableHeader: [
|
||||
{
|
||||
label: 1,
|
||||
time: "00:00",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
time: "01:00",
|
||||
value: 56,
|
||||
},
|
||||
{
|
||||
label: 3,
|
||||
time: "02:00",
|
||||
value: 45,
|
||||
},
|
||||
{
|
||||
label: 4,
|
||||
time: "03:00",
|
||||
value: 66,
|
||||
},
|
||||
{
|
||||
label: 5,
|
||||
time: "04:00",
|
||||
value: 86,
|
||||
},
|
||||
{
|
||||
label: 6,
|
||||
time: "05:00",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
label: 7,
|
||||
time: "06:00",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
label: 8,
|
||||
time: "07:00",
|
||||
value: 55,
|
||||
},
|
||||
{
|
||||
label: 9,
|
||||
time: "08:00",
|
||||
value: 76,
|
||||
},
|
||||
{
|
||||
label: 10,
|
||||
time: "09:00",
|
||||
value: 65,
|
||||
},
|
||||
{
|
||||
label: 11,
|
||||
time: "10:00",
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
label: 12,
|
||||
time: "11:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 13,
|
||||
time: "12:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 14,
|
||||
time: "13:00",
|
||||
value: 89,
|
||||
},
|
||||
{
|
||||
label: 15,
|
||||
time: "14:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 16,
|
||||
time: "15:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 17,
|
||||
time: "16:00",
|
||||
value: 45,
|
||||
},
|
||||
],
|
||||
});
|
||||
onMounted(async () => {});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
// border: 1px solid red;s
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: calc(100% - 520px);
|
||||
// border: 1px solid red;
|
||||
}
|
||||
.date {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 50%;
|
||||
}
|
||||
.width200 {
|
||||
width: 200px;
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
height: 50px;
|
||||
}
|
||||
th:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
tr {
|
||||
td:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<template>
|
||||
<div class="history-container">
|
||||
<div class="flex top">
|
||||
<div class="flex width200">
|
||||
<span> 系统选择：</span>
|
||||
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in fxOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||
</el-table> -->
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目</th>
|
||||
<th colspan="17">降雨量(mm/s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>序号</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.label }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>时间</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.time }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数值</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "History",
|
||||
components: {
|
||||
BarEchart,
|
||||
Process,
|
||||
Date,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
title: "降水量-柱状图",
|
||||
legend: ["降水量"],
|
||||
color: ["#6fdbce"],
|
||||
},
|
||||
],
|
||||
fxOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "降水量",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "系统A",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "系统B",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "系统C",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "系统D",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "系统E",
|
||||
},
|
||||
],
|
||||
value1: "降水量",
|
||||
tableHeader: [
|
||||
{
|
||||
label: 1,
|
||||
time: "00:00",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
time: "01:00",
|
||||
value: 56,
|
||||
},
|
||||
{
|
||||
label: 3,
|
||||
time: "02:00",
|
||||
value: 45,
|
||||
},
|
||||
{
|
||||
label: 4,
|
||||
time: "03:00",
|
||||
value: 66,
|
||||
},
|
||||
{
|
||||
label: 5,
|
||||
time: "04:00",
|
||||
value: 86,
|
||||
},
|
||||
{
|
||||
label: 6,
|
||||
time: "05:00",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
label: 7,
|
||||
time: "06:00",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
label: 8,
|
||||
time: "07:00",
|
||||
value: 55,
|
||||
},
|
||||
{
|
||||
label: 9,
|
||||
time: "08:00",
|
||||
value: 76,
|
||||
},
|
||||
{
|
||||
label: 10,
|
||||
time: "09:00",
|
||||
value: 65,
|
||||
},
|
||||
{
|
||||
label: 11,
|
||||
time: "10:00",
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
label: 12,
|
||||
time: "11:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 13,
|
||||
time: "12:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 14,
|
||||
time: "13:00",
|
||||
value: 89,
|
||||
},
|
||||
{
|
||||
label: 15,
|
||||
time: "14:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 16,
|
||||
time: "15:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 17,
|
||||
time: "16:00",
|
||||
value: 45,
|
||||
},
|
||||
],
|
||||
});
|
||||
onMounted(async () => {});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
// border: 1px solid red;s
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: calc(100% - 520px);
|
||||
// border: 1px solid red;
|
||||
}
|
||||
.date {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 50%;
|
||||
}
|
||||
.width200 {
|
||||
width: 200px;
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
height: 50px;
|
||||
}
|
||||
th:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
tr {
|
||||
td:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<template>
|
||||
<div class="history-container">
|
||||
<div class="flex top">
|
||||
<div class="flex width200">
|
||||
<span> 系统选择：</span>
|
||||
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in fxOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||
</el-table> -->
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目</th>
|
||||
<th colspan="17">降雨量(mm/s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>序号</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.label }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>时间</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.time }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数值</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "History",
|
||||
components: {
|
||||
BarEchart,
|
||||
Process,
|
||||
Date,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
title: "降水量-柱状图",
|
||||
legend: ["降水量"],
|
||||
color: ["#6fdbce"],
|
||||
},
|
||||
],
|
||||
fxOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "降水量",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "系统A",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "系统B",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "系统C",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "系统D",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "系统E",
|
||||
},
|
||||
],
|
||||
value1: "降水量",
|
||||
tableHeader: [
|
||||
{
|
||||
label: 1,
|
||||
time: "00:00",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
time: "01:00",
|
||||
value: 56,
|
||||
},
|
||||
{
|
||||
label: 3,
|
||||
time: "02:00",
|
||||
value: 45,
|
||||
},
|
||||
{
|
||||
label: 4,
|
||||
time: "03:00",
|
||||
value: 66,
|
||||
},
|
||||
{
|
||||
label: 5,
|
||||
time: "04:00",
|
||||
value: 86,
|
||||
},
|
||||
{
|
||||
label: 6,
|
||||
time: "05:00",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
label: 7,
|
||||
time: "06:00",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
label: 8,
|
||||
time: "07:00",
|
||||
value: 55,
|
||||
},
|
||||
{
|
||||
label: 9,
|
||||
time: "08:00",
|
||||
value: 76,
|
||||
},
|
||||
{
|
||||
label: 10,
|
||||
time: "09:00",
|
||||
value: 65,
|
||||
},
|
||||
{
|
||||
label: 11,
|
||||
time: "10:00",
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
label: 12,
|
||||
time: "11:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 13,
|
||||
time: "12:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 14,
|
||||
time: "13:00",
|
||||
value: 89,
|
||||
},
|
||||
{
|
||||
label: 15,
|
||||
time: "14:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 16,
|
||||
time: "15:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 17,
|
||||
time: "16:00",
|
||||
value: 45,
|
||||
},
|
||||
],
|
||||
});
|
||||
onMounted(async () => {});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
// border: 1px solid red;s
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: calc(100% - 520px);
|
||||
// border: 1px solid red;
|
||||
}
|
||||
.date {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 50%;
|
||||
}
|
||||
.width200 {
|
||||
width: 200px;
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
height: 50px;
|
||||
}
|
||||
th:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
tr {
|
||||
td:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<template>
|
||||
<div class="history-container">
|
||||
<div class="flex top">
|
||||
<div class="flex width200">
|
||||
<span> 系统选择：</span>
|
||||
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in fxOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||
</el-table> -->
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目</th>
|
||||
<th colspan="17">降雨量(mm/s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>序号</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.label }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>时间</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.time }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数值</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "History",
|
||||
components: {
|
||||
BarEchart,
|
||||
Process,
|
||||
Date,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
title: "降水量-柱状图",
|
||||
legend: ["降水量"],
|
||||
color: ["#6fdbce"],
|
||||
},
|
||||
],
|
||||
fxOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "降水量",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "系统A",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "系统B",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "系统C",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "系统D",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "系统E",
|
||||
},
|
||||
],
|
||||
value1: "降水量",
|
||||
tableHeader: [
|
||||
{
|
||||
label: 1,
|
||||
time: "00:00",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
time: "01:00",
|
||||
value: 56,
|
||||
},
|
||||
{
|
||||
label: 3,
|
||||
time: "02:00",
|
||||
value: 45,
|
||||
},
|
||||
{
|
||||
label: 4,
|
||||
time: "03:00",
|
||||
value: 66,
|
||||
},
|
||||
{
|
||||
label: 5,
|
||||
time: "04:00",
|
||||
value: 86,
|
||||
},
|
||||
{
|
||||
label: 6,
|
||||
time: "05:00",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
label: 7,
|
||||
time: "06:00",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
label: 8,
|
||||
time: "07:00",
|
||||
value: 55,
|
||||
},
|
||||
{
|
||||
label: 9,
|
||||
time: "08:00",
|
||||
value: 76,
|
||||
},
|
||||
{
|
||||
label: 10,
|
||||
time: "09:00",
|
||||
value: 65,
|
||||
},
|
||||
{
|
||||
label: 11,
|
||||
time: "10:00",
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
label: 12,
|
||||
time: "11:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 13,
|
||||
time: "12:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 14,
|
||||
time: "13:00",
|
||||
value: 89,
|
||||
},
|
||||
{
|
||||
label: 15,
|
||||
time: "14:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 16,
|
||||
time: "15:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 17,
|
||||
time: "16:00",
|
||||
value: 45,
|
||||
},
|
||||
],
|
||||
});
|
||||
onMounted(async () => {});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
// border: 1px solid red;s
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: calc(100% - 520px);
|
||||
// border: 1px solid red;
|
||||
}
|
||||
.date {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 50%;
|
||||
}
|
||||
.width200 {
|
||||
width: 200px;
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
height: 50px;
|
||||
}
|
||||
th:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
tr {
|
||||
td:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<template>
|
||||
<div class="history-container">
|
||||
<div class="flex top">
|
||||
<div class="flex width200">
|
||||
<span> 系统选择：</span>
|
||||
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in fxOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||
</el-table> -->
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目</th>
|
||||
<th colspan="17">降雨量(mm/s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>序号</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.label }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>时间</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.time }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数值</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "History",
|
||||
components: {
|
||||
BarEchart,
|
||||
Process,
|
||||
Date,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
listData: [
|
||||
{
|
||||
id: "echart0",
|
||||
title: "降水量-柱状图",
|
||||
legend: ["降水量"],
|
||||
color: ["#6fdbce"],
|
||||
},
|
||||
],
|
||||
fxOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "降水量",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "系统A",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "系统B",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "系统C",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "系统D",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "系统E",
|
||||
},
|
||||
],
|
||||
value1: "降水量",
|
||||
tableHeader: [
|
||||
{
|
||||
label: 1,
|
||||
time: "00:00",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
time: "01:00",
|
||||
value: 56,
|
||||
},
|
||||
{
|
||||
label: 3,
|
||||
time: "02:00",
|
||||
value: 45,
|
||||
},
|
||||
{
|
||||
label: 4,
|
||||
time: "03:00",
|
||||
value: 66,
|
||||
},
|
||||
{
|
||||
label: 5,
|
||||
time: "04:00",
|
||||
value: 86,
|
||||
},
|
||||
{
|
||||
label: 6,
|
||||
time: "05:00",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
label: 7,
|
||||
time: "06:00",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
label: 8,
|
||||
time: "07:00",
|
||||
value: 55,
|
||||
},
|
||||
{
|
||||
label: 9,
|
||||
time: "08:00",
|
||||
value: 76,
|
||||
},
|
||||
{
|
||||
label: 10,
|
||||
time: "09:00",
|
||||
value: 65,
|
||||
},
|
||||
{
|
||||
label: 11,
|
||||
time: "10:00",
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
label: 12,
|
||||
time: "11:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 13,
|
||||
time: "12:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 14,
|
||||
time: "13:00",
|
||||
value: 89,
|
||||
},
|
||||
{
|
||||
label: 15,
|
||||
time: "14:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 16,
|
||||
time: "15:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 17,
|
||||
time: "16:00",
|
||||
value: 45,
|
||||
},
|
||||
],
|
||||
});
|
||||
onMounted(async () => {});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
// border: 1px solid red;s
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: calc(100% - 520px);
|
||||
// border: 1px solid red;
|
||||
}
|
||||
.date {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 50%;
|
||||
}
|
||||
.width200 {
|
||||
width: 200px;
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
height: 50px;
|
||||
}
|
||||
th:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
tr {
|
||||
td:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,606 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv1" class="echartDiv100"></div>
|
||||
<div id="echartDiv2" class="echartDiv100"></div>
|
||||
<div id="echartDiv3" class="echartDiv100"></div>
|
||||
<div id="echartDiv4" class="echartDiv100"></div>
|
||||
<div id="echartDiv5" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv1", '蒸腾量');
|
||||
getChartsZf2("echartDiv2", 'COD');
|
||||
getChartsZf3("echartDiv3", '氨氮');
|
||||
getChartsZf4("echartDiv4", 'SS');
|
||||
getChartsZf5("echartDiv5", '屋面温度');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Rainfall', 'Evaporation']
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ['line', 'bar'] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// prettier-ignore
|
||||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Rainfall',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Evaporation',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
||||
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '30%']
|
||||
},
|
||||
visualMap: {
|
||||
type: 'piecewise',
|
||||
show: false,
|
||||
dimension: 0,
|
||||
seriesIndex: 0,
|
||||
pieces: [
|
||||
{
|
||||
gt: 1,
|
||||
lt: 3,
|
||||
color: 'rgba(0, 0, 180, 0.4)'
|
||||
},
|
||||
{
|
||||
gt: 5,
|
||||
lt: 7,
|
||||
color: 'rgba(0, 0, 180, 0.4)'
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#5470C6',
|
||||
width: 5
|
||||
},
|
||||
markLine: {
|
||||
symbol: ['none', 'none'],
|
||||
label: { show: false },
|
||||
data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
|
||||
},
|
||||
areaStyle: {},
|
||||
data: [
|
||||
['2019-10-10', 200],
|
||||
['2019-10-11', 560],
|
||||
['2019-10-12', 750],
|
||||
['2019-10-13', 580],
|
||||
['2019-10-14', 250],
|
||||
['2019-10-15', 300],
|
||||
['2019-10-16', 450],
|
||||
['2019-10-17', 300],
|
||||
['2019-10-18', 100]
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf3 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
title: {
|
||||
text: text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'bar',
|
||||
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
markLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
},
|
||||
data: [[{ type: 'min' }, { type: 'max' }]]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Baidu',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [620, 732, 701, 734, 1090, 1130, 1120]
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 290, 230, 220]
|
||||
},
|
||||
{
|
||||
name: 'Bing',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [60, 72, 71, 74, 190, 130, 110]
|
||||
},
|
||||
{
|
||||
name: 'Others',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [62, 82, 91, 84, 109, 110, 120]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf4 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf5 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
// prettier-ignore
|
||||
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
|
||||
// prettier-ignore
|
||||
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
||||
let yMax = 500;
|
||||
let dataShadow = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
dataShadow.push(yMax);
|
||||
}
|
||||
var op = {
|
||||
title: {
|
||||
text
|
||||
},
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
color: '#fff'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
z: 10
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||
// 手动移除该属性
|
||||
dom.removeAttribute('_echarts_instance_')
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv1" class="echartDiv100"></div>
|
||||
<div id="echartDiv2" class="echartDiv100"></div>
|
||||
<div id="echartDiv3" class="echartDiv100"></div>
|
||||
<div id="echartDiv4" class="echartDiv100"></div>
|
||||
<div id="echartDiv5" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv1", '蒸腾量');
|
||||
getChartsZfl("echartDiv2", 'COD');
|
||||
getChartsZfl("echartDiv3", '氨氮');
|
||||
getChartsZfl("echartDiv4", 'SS');
|
||||
getChartsZfl("echartDiv5", '屋面温度');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||
// 手动移除该属性
|
||||
dom.removeAttribute('_echarts_instance_')
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv1" class="echartDiv100"></div>
|
||||
<div id="echartDiv2" class="echartDiv100"></div>
|
||||
<div id="echartDiv3" class="echartDiv100"></div>
|
||||
<div id="echartDiv4" class="echartDiv100"></div>
|
||||
<div id="echartDiv5" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv1", '蒸腾量');
|
||||
getChartsZfl("echartDiv2", 'COD');
|
||||
getChartsZfl("echartDiv3", '氨氮');
|
||||
getChartsZfl("echartDiv4", 'SS');
|
||||
getChartsZfl("echartDiv5", '屋面温度');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||
// 手动移除该属性
|
||||
dom.removeAttribute('_echarts_instance_')
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv1" class="echartDiv100"></div>
|
||||
<div id="echartDiv2" class="echartDiv100"></div>
|
||||
<div id="echartDiv3" class="echartDiv100"></div>
|
||||
<div id="echartDiv4" class="echartDiv100"></div>
|
||||
<div id="echartDiv5" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv1", '蒸腾量');
|
||||
getChartsZfl("echartDiv2", 'COD');
|
||||
getChartsZfl("echartDiv3", '氨氮');
|
||||
getChartsZfl("echartDiv4", 'SS');
|
||||
getChartsZfl("echartDiv5", '屋面温度');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||
// 手动移除该属性
|
||||
dom.removeAttribute('_echarts_instance_')
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv1" class="echartDiv100"></div>
|
||||
<div id="echartDiv2" class="echartDiv100"></div>
|
||||
<div id="echartDiv3" class="echartDiv100"></div>
|
||||
<div id="echartDiv4" class="echartDiv100"></div>
|
||||
<div id="echartDiv5" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
name: "Analyse",
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv1", '蒸腾量');
|
||||
getChartsZfl("echartDiv2", 'COD');
|
||||
getChartsZfl("echartDiv3", '氨氮');
|
||||
getChartsZfl("echartDiv4", 'SS');
|
||||
getChartsZfl("echartDiv5", '屋面温度');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
console.log(dom);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(55, 162, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(116, 21, 219)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 0, 135)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(135, 0, 157)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||
// 手动移除该属性
|
||||
dom.removeAttribute('_echarts_instance_')
|
||||
var myChart = echarts.init(dom);
|
||||
var option = op;
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getEchart
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analyse-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
<script>
|
||||
import Menus from "@/components/Menus.vue";
|
||||
import Bindex from "@/components/Bindex.vue";
|
||||
import Zhibiao from "@/components/Zhibiao.vue";
|
||||
import Analyse from "@/components/Analyse.vue";
|
||||
import Zhibiao from "@/components/Zhibiao2.vue";
|
||||
import Analyse from "@/components/Ganalyse2.vue";
|
||||
import History from "@/components/History.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
import Menus from "@/components/Menus.vue";
|
||||
import Cindex from "@/components/Cindex.vue";
|
||||
import Zhibiao from "@/components/Zhibiao.vue";
|
||||
import Ganalyse from "@/components/Ganalyse.vue";
|
||||
import Ganalyse from "@/components/Ganalyse4.vue";
|
||||
import History from "@/components/History.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
<script>
|
||||
import Menus from "@/components/Menus.vue";
|
||||
import Gindex from "@/components/Gindex.vue";
|
||||
import Zhibiao from "@/components/Zhibiao.vue";
|
||||
import Ganalyse from "@/components/Ganalyse.vue";
|
||||
import Zhibiao from "@/components/Zhibiao1.vue";
|
||||
import Ganalyse from "@/components/Ganalyse1.vue";
|
||||
import History from "@/components/History.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
import Menus from "@/components/Menus.vue";
|
||||
import Sindex from "@/components/Sindex.vue";
|
||||
import Zhibiao from "@/components/Zhibiao.vue";
|
||||
import Analyse from "@/components/Analyse.vue";
|
||||
import Analyse from "@/components/Ganalyse3.vue";
|
||||
import History from "@/components/History.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
import Menus from "@/components/Menus.vue";
|
||||
import Windex from "@/components/Windex.vue";
|
||||
import Report from "@/components/Report.vue";
|
||||
import Analyse from "@/components/Analyse.vue";
|
||||
import Analyse from "@/components/Ganalyse5.vue";
|
||||
import History from "@/components/History.vue";
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
export default {
|
||||
|
|
|
|||
Loading…
Reference in New Issue