277 lines
7.2 KiB
Vue
277 lines
7.2 KiB
Vue
<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>
|