wangqiujuan0808
/
hsgy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

dev_zt
wangqiujuan0808 2023-11-02 19:19:17 +08:00
parent e2c0c45d7e
commit f5dbd0c622
21 changed files with 1123 additions and 577 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -94,7 +94,6 @@ export default {
.main {
height: 100vh;
overflow: auto;
padding: 10px;
}
::v-deep .el-card__body {
height: 100%;

BIN
src/assets/index-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

BIN
src/assets/index-bg1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

4
src/components/Bindex.vue
View File

@ -7,12 +7,12 @@
<div class="one-card">
<div class="one-card-content">
<div>
<p>生物滞留区域面积</p>
<p>区域面积</p>
<font class="value">75</font>
<font>㎡</font>
</div>
<div>
<p>滞留系统液位</p>
<p>液位</p>
<font class="value">323</font>
<font>mm</font>
</div>

3
src/components/Cindex.vue
View File

@ -90,7 +90,8 @@
width: 100%;
height: 100%;
box-shadow: 0 0 8px #99ACB0 inset;
display: flex;
align-items: center;
h2 {
padding: 10px;
text-align: center;

5
src/components/Gindex.vue
View File

@ -42,7 +42,7 @@
<font>℃</font>
</div>
<div>
<p>热岛减率</p>
<p>热岛消减率</p>
<font class="value">21</font>
<font>%</font>
</div>
@ -90,7 +90,8 @@
width: 100%;
height: 100%;
box-shadow: 0 0 8px #99ACB0 inset;
display: flex;
align-items: center;
h2 {
padding: 10px;
text-align: center;

24
src/components/LineEchart.vue
View File

@ -35,8 +35,8 @@ export default {
if (store.state.selectTab === 'pure') {
if (store.state.selectDate === 1) {
data = {
legend: ["月余氯查询"],
color: ["#62d3ff"],
legend: {},
color: props.echartData.color,
xData: [
"1",
"2",
@ -77,8 +77,8 @@ export default {
};
} else if (store.state.selectDate === 2) {
data = {
legend: ["年余氯查询"],
color: ["#62d3ff"],
legend: {},
color: props.echartData.color,
xData: [
"1",
"2",
@ -100,8 +100,8 @@ export default {
};
} else if (store.state.selectDate === 0) {
var data = {
legend: ["日余氯查询"],
color: ["#62d3ff"],
legend: {},
color: props.echartData.color,
xData: [
"00",
"01",
@ -138,8 +138,8 @@ export default {
} else {
if (store.state.selectDate === 1) {
data = {
legend: ["月余氯查询"],
color: ["#62d3ff"],
legend: {},
color: props.echartData.color,
xData: [
"1",
"2",
@ -179,8 +179,8 @@ export default {
};
} else if (store.state.selectDate === 2) {
data = {
legend: ["年余氯查询"],
color: ["#62d3ff"],
legend: {},
color: props.echartData.color,
xData: [
"1",
"2",
@ -202,8 +202,8 @@ export default {
};
} else if (store.state.selectDate === 0) {
var data = {
legend: ["日余氯查询"],
color: ["#62d3ff"],
legend: {},
color: props.echartData.color,
xData: [
"00",
"01",

28
src/components/Quality.vue
View File

@ -22,7 +22,7 @@
:class="'div' + index"
class="process-content"
>
<div>{{ item.title }}</div>
<!-- <div>{{ item.title }}</div> -->
<div v-for="(it, i) of item.data" :key="i">
<Process :itemData="it"></Process>
</div>
@ -63,61 +63,65 @@ export default {
{
id: "echart0",
title: "余氯查询",
color: ['#6fdbce']
},
{
id: "echart1",
title: "浊度查询",
color: ['#b7e707']
},
{
id: "echart2",
title: "氨氮查询",
color: ['#f58383']
},
{
id: "echart3",
title: "COD查询",
color: ['#00ffff']
},
],
dataList: [
{
title: "余氯:",
title: "余氯",
data: [
{
id: "0",
color: "#6fdbce",
label: "COD1",
label: "余氯: ",
value: "20",
},
],
},
{
title: "浊度:",
title: "浊度",
data: [
{
id: "1",
color: "#00baff",
label: "COD2",
color: "#b7e707",
label: "浊度:",
value: "80",
}
],
},
{
title: "氨氮:",
title: "氨氮",
data: [
{
id: "3",
color: "#308286",
label: "氨氮",
color: "#f58383",
label: "氨氮: ",
value: "80",
},
],
},
{
title: "COD:",
title: "COD",
data: [
{
id: "4",
color: "#00baff",
label: "COD",
color: "#00ffff",
label: "COD: ",
value: "80",
}
],

127
src/components/Zhibiao1.vue
View File

@ -1,9 +1,18 @@
<template>
<div class="analyse-container">
<div id="echartDiv1" class="echartDiv100"></div>
<div id="echartDiv3" class="echartDiv100"></div>
<div id="echartDiv2" class="echartDiv100"></div>
<div id="echartDiv4" class="echartDiv100"></div>
<div>
<div id="echartDiv1" class="echartDiv100"></div>
<div id="echartDiv3" class="echartDiv100"></div>
<div id="echartDiv2" class="echartDiv100"></div>
<div id="echartDiv4" class="echartDiv100"></div>
</div>
<div>
<div id="echartDiv5" class="echartDiv100"></div>
<div id="echartDiv6" class="echartDiv100"></div>
<div id="echartDiv7" class="echartDiv100"></div>
<div id="echartDiv8" class="echartDiv100"></div>
</div>
</div>
</template>
@ -20,10 +29,14 @@ export default {
setup() {
const state = reactive({});
onMounted(async () => {
getChartsZfl("echartDiv1", "蒸腾量");
getChartsZf2("echartDiv2", "SS");
getChartsZf3("echartDiv3", "氨氮");
getChartsZf4("echartDiv4", "热岛减率");
getChartsZfl("echartDiv1", "径流系数");
getChartsZf2("echartDiv2", "蒸腾量");
getChartsZf3("echartDiv3", "COD");
getChartsZf4("echartDiv4", "氨氮");
getChartsZf2("echartDiv5", "SS");
getChartsZf2("echartDiv6", "屋面温度 无绿化");
getChartsZf2("echartDiv7", "屋面温度 有绿化");
getChartsZf3("echartDiv8", "热岛消减率");
});
const getChartsZfl = (id, text) => {
var dom = document.getElementById(id);
@ -105,8 +118,8 @@ export default {
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,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -125,8 +138,8 @@ export default {
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,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -144,9 +157,9 @@ export default {
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,
data:[
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -165,8 +178,8 @@ export default {
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,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -189,8 +202,8 @@ export default {
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,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
@ -263,8 +276,8 @@ export default {
focus: "series",
},
data: [
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -275,8 +288,8 @@ export default {
focus: "series",
},
data: [
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -287,8 +300,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -299,8 +312,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -310,9 +323,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
data:[
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
@ -384,8 +397,8 @@ export default {
focus: "series",
},
data: [
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -396,8 +409,8 @@ export default {
focus: "series",
},
data: [
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -407,9 +420,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
data:[
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -420,8 +433,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -432,8 +445,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
@ -505,8 +518,8 @@ export default {
focus: "series",
},
data: [
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -517,8 +530,8 @@ export default {
focus: "series",
},
data: [
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -529,8 +542,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -541,8 +554,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -553,8 +566,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
@ -586,14 +599,22 @@ export default {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
// flex-direction: column;
justify-content: space-between;
padding: 10px;
align-items: center;
>div {
width: 49%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.echartDiv100 {
width: 100%;
height: 20%;
margin: 0 auto;
border: 1px solid #ddd;
}
}
</style>

220
src/components/Zhibiao2.vue
View File

@ -1,9 +1,15 @@
<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>
<div id="echartDiv1" class="echartDiv100"></div>
<div id="echartDiv2" class="echartDiv100"></div>
<div id="echartDiv3" class="echartDiv100"></div>
</div>
<div>
<div id="echartDiv4" class="echartDiv100"></div>
<div id="echartDiv5" class="echartDiv100"></div>
<div id="echartDiv6" class="echartDiv100"></div>
</div>
</div>
</template>
@ -24,16 +30,18 @@ export default {
});
onMounted(async () => {
getChartsZfl("echartDiv1", '渗透量');
getChartsZf2("echartDiv2", 'COD');
getChartsZf3("echartDiv3", '氨氮');
getChartsZf4("echartDiv4", 'SS');
getChartsZfl("echartDiv1", '区域面积');
getChartsZf2("echartDiv2", '液位');
getChartsZf3("echartDiv3", '渗透量');
getChartsZf4("echartDiv4", 'COD');
getChartsZf3("echartDiv5", '氨氮');
getChartsZf2("echartDiv6", 'SS');
});
const getChartsZfl = (id, text) => {
var dom = document.getElementById(id);
console.log(dom);
var op = {
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
color: ["#80FFA5"],
title: {
text: text,
},
@ -47,7 +55,7 @@ export default {
},
},
legend: {
data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
data: ["区域面积"],
},
grid: {
left: "3%",
@ -94,7 +102,7 @@ export default {
],
series: [
{
name: "系统A",
name: "区域面积",
type: "line",
stack: "Total",
smooth: true,
@ -108,95 +116,11 @@ export default {
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,
data: [
75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75,
75, 75, 75, 75, 75, 75, 75, 75, 75, 75, 75,
],
},
{
name: "系统B",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
areaStyle: {
color: "#00DDFF"
},
showSymbol: false,
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: {
color: "#37A2FF"
},
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,
},
areaStyle: {
color: "#FF0087"
},
showSymbol: false,
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: {
color: "#FFBF00"
},
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);
@ -266,9 +190,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -278,9 +202,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -290,9 +214,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -303,8 +227,8 @@ export default {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -314,9 +238,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
@ -403,9 +327,9 @@ export default {
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,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -424,9 +348,9 @@ export default {
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,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -445,9 +369,9 @@ export default {
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,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -471,8 +395,8 @@ export default {
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,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -491,9 +415,9 @@ export default {
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,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
@ -567,8 +491,8 @@ export default {
focus: "series",
},
data: [
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -579,9 +503,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230, 210,
132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -592,9 +516,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -605,9 +529,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
@ -618,9 +542,9 @@ export default {
emphasis: {
focus: "series",
},
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201,
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
@ -652,14 +576,24 @@ export default {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
align-items: center;
>div {
width: 49%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.echartDiv100 {
width: 100%;
height: 20%;
height: 33%;
margin: 0 auto;
border: 1px solid #ddd;
display: flex;
align-items: center;
}
}
</style>

608
src/components/Zhibiao3.vue
View File

@ -1,8 +1,22 @@
<template>
<div class="analyse-container">
<div id="echartDiv1" class="echartDiv100"></div>
<div id="echartDiv2" class="echartDiv100"></div>
<div id="echartDiv3" class="echartDiv100"></div>
<div>
<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>
<div>
<div id="echartDiv6" class="echartDiv100"></div>
<div id="echartDiv7" class="echartDiv100"></div>
<div id="echartDiv8" class="echartDiv100"></div>
<div id="echartDiv9" class="echartDiv100"></div>
<div id="echartDiv10" class="echartDiv100"></div>
</div>
</div>
</template>
@ -15,47 +29,50 @@ import Process from "./Process.vue";
import Date from "@/components/Date.vue";
export default {
name: "Analyse",
components: {
},
components: {},
setup() {
const state = reactive({
});
const state = reactive({});
onMounted(async () => {
getChartsZfl("echartDiv1", '渗透量');
getChartsZfl("echartDiv2", '透水铺砖表面温度');
getChartsZfl("echartDiv3", '热岛消减率');
});
const getChartsZfl = (id, text) => {
getChartsZfl("echartDiv1", "透水铺装面积", 500, '#076d46');
getChartsZfl("echartDiv2", "入渗系统面积", 437, "#80FFA5");
getChartsZf3("echartDiv3", "透水系数");
getChartsZf4("echartDiv4", "入渗系数");
getChartsZf3("echartDiv5", "透水层厚度");
getChartsZf4("echartDiv6", "渗透量");
getChartsZf2("echartDiv7", "透水铺砖储水量");
getChartsZf2("echartDiv8", "透水铺砖表面温度");
getChartsZf3("echartDiv9", "热岛消减率");
getChartsZf2("echartDiv10", "孔隙率");
});
const getChartsZfl = (id, text, num, color) => {
var dom = document.getElementById(id);
console.log(dom);
var op = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
color: ["#80FFA5"],
title: {
text: text
text: text,
},
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
label: {
backgroundColor: '#6a7985'
}
}
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
data: ["区域面积"],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: 'category',
type: "category",
boundaryGap: false,
data: [
"00",
@ -82,163 +99,408 @@ export default {
"21",
"22",
"23",
]
}
],
},
],
yAxis: [
{
type: 'value'
}
type: "value",
},
],
series: [
{
name: '系统A',
type: 'line',
stack: 'Total',
name: "区域面积",
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'
width: 0,
},
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)'
}
])
color: color
},
showSymbol: false,
emphasis: {
focus: 'series'
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]
data: [
num, num, num, num, num, num, num, num, num, num, num, num, num,
num, num, num, num, num, num, num, num, num, num, num,
],
}
]
],
};
getEchart(dom, op)
}
getEchart(dom, op);
};
const getChartsZf2 = (id, text) => {
var dom = document.getElementById(id);
console.log(dom);
var op = {
title: {
text: text,
},
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {},
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",
],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "系统A",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统B",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统C",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统D",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统E",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data:[
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*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: [
"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: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统B",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统C",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data:[
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统D",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统E",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
};
getEchart(dom, op);
};
const getChartsZf4 = (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: [
"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: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统B",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统C",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统D",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统E",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
};
getEchart(dom, op);
};
const getEchart = (dom, op) => {
if (dom) {
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
// 手动移除该属性
dom.removeAttribute('_echarts_instance_')
dom.removeAttribute("_echarts_instance_");
var myChart = echarts.init(dom);
var option = op;
@ -248,7 +510,7 @@ export default {
return {
...toRefs(state),
getChartsZfl,
getEchart
getEchart,
};
},
};
@ -259,14 +521,22 @@ export default {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
// flex-direction: column;
justify-content: space-between;
padding: 10px;
align-items: center;
>div {
width: 49%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.echartDiv100 {
width: 100%;
height: 30%;
height: 20%;
margin: 0 auto;
border: 1px solid #ddd;
}
}
</style>

588
src/components/Zhibiao4.vue
View File

@ -1,10 +1,17 @@
<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>
<div id="echartDiv1" class="echartDiv100"></div>
<div id="echartDiv3" class="echartDiv100"></div>
<div id="echartDiv2" class="echartDiv100"></div>
<div id="echartDiv4" class="echartDiv100"></div>
</div>
<div>
<div id="echartDiv5" class="echartDiv100"></div>
<div id="echartDiv6" class="echartDiv100"></div>
<div id="echartDiv7" class="echartDiv100"></div>
<div id="echartDiv8" class="echartDiv100"></div>
</div>
</div>
</template>
@ -25,41 +32,44 @@ export default {
});
onMounted(async () => {
getChartsZfl("echartDiv1", '蒸腾量');
getChartsZfl("echartDiv2", 'COD');
getChartsZfl("echartDiv3", '氨氮');
getChartsZfl("echartDiv4", 'SS');
getChartsZfl("echartDiv5", '屋面温度');
getChartsZfl("echartDiv1", "地块面积", 730, "#80FFA5");
getChartsZf2("echartDiv2", '地块调蓄容积');
getChartsZf3("echartDiv3", '调蓄池液位');
getChartsZf4("echartDiv4", '溢流量');
getChartsZf2("echartDiv5", 'COD');
getChartsZf3("echartDiv6", '氨氮');
getChartsZf4("echartDiv7", 'SS');
getChartsZf2("echartDiv8", '地块剩余调蓄容积');
});
const getChartsZfl = (id, text) => {
const getChartsZfl = (id, text, num, color) => {
var dom = document.getElementById(id);
console.log(dom);
var op = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
color: ["#80FFA5"],
title: {
text: text
text: text,
},
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross',
type: "cross",
label: {
backgroundColor: '#6a7985'
}
}
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
data: ["区域面积"],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: 'category',
type: "category",
boundaryGap: false,
data: [
"00",
@ -86,158 +96,403 @@ export default {
"21",
"22",
"23",
]
}
],
},
],
yAxis: [
{
type: 'value'
}
type: "value",
},
],
series: [
{
name: '系统A',
type: 'line',
stack: 'Total',
name: "区域面积",
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'
width: 0,
},
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)'
}
])
color: color
},
showSymbol: false,
emphasis: {
focus: 'series'
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]
data: [
num, num, num, num, num, num, num, num, num, num, num, num, num,
num, num, num, num, num, num, num, num, num, num, num,
],
}
]
],
};
getEchart(dom, op)
}
getEchart(dom, op);
};
const getChartsZf2 = (id, text) => {
var dom = document.getElementById(id);
console.log(dom);
var op = {
title: {
text: text,
},
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {},
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",
],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "系统A",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统B",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统C",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统D",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统E",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data:[
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*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: [
"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: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统B",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统C",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data:[
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统D",
type: "bar",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统E",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
};
getEchart(dom, op);
};
const getChartsZf4 = (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: [
"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: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统B",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统C",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统D",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
{
name: "系统E",
type: "line",
stack: "Ad",
emphasis: {
focus: "series",
},
data: [
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100), parseInt(Math.random()*100),
],
},
],
};
getEchart(dom, op);
};
const getEchart = (dom, op) => {
if (dom) {
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
@ -263,14 +518,21 @@ export default {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
// flex-direction: column;
justify-content: space-between;
padding: 10px;
>div {
width: 49%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.echartDiv100 {
width: 100%;
height: 20%;
margin: 0 auto;
border: 1px solid #ddd;
}
}
</style>

1
src/css/index.scss
View File

@ -73,6 +73,7 @@ s {
}
.font26 {
font-size: 26px;
color: #02f7c2;
}
.btns {
text-align: center;

2
src/views/Biology.vue
View File

@ -73,7 +73,7 @@ export default {
}
.content {
width: 96%;
height:100%;
height: 99%;
// border: 1px solid red;
}

4
src/views/Chuxu.vue
View File

@ -62,7 +62,7 @@ export default {
}
.cl-hy {
width: 100%;
height:100%;
height: 99%;
display: flex;
justify-content: space-between;
// border: 1px solid red;
@ -73,7 +73,7 @@ export default {
}
.content {
width: 96%;
height:100%;
height: 99%;
// border: 1px solid red;
}

4
src/views/Green.vue
View File

@ -62,7 +62,7 @@ export default {
}
.cl-hy {
width: 100%;
height:100%;
height: 99%;
display: flex;
justify-content: space-between;
// border: 1px solid red;
@ -73,7 +73,7 @@ export default {
}
.content {
width: 96%;
height:100%;
height: 99%;
// border: 1px solid red;
}

71
src/views/Home.vue
View File

@ -7,7 +7,15 @@
<ul class="menus">
<li class="one-card" v-for="(item, i) in menus" :key="i" @click="go(item)">
<div class="one-card-left" :class="'menu' + i" >{{ item.name }}</div>
<div class="one-card-right" :class="'color' + i"></div>
<div class="one-card-right" :class="'color' + i">
<div class="parm">
<p>{{ item.parms && item.parms[0].name }}</p>
<font><span class="font28">{{ item.parms && item.parms[0].value }}</span></font>
<font>
{{ item.parms && item.parms[0].dw }}
</font>
</div>
</div>
</li>
</ul>
</div>
@ -25,22 +33,52 @@ export default {
const state = reactive({
menus: [{
name: '处理&回用系统',
url: 'page'
url: 'page',
parms: [{
name: '节水量',
value: '4.00',
dw: 'm³'
}]
}, {
name: '屋顶绿化系统',
url: 'green'
url: 'green',
parms: [{
name: '热岛消减率',
value: '21',
dw: '%'
}]
}, {
name: '生物滞留&净化系统',
url: 'biology'
url: 'biology',
parms: [{
name: '液位',
value: '323',
dw: 'mm'
}]
}, {
name: '透水铺装&入渗系统',
url: 'shentou'
url: 'shentou',
parms: [{
name: '热岛消减率',
value: '19.6',
dw: '%'
}]
}, {
name: '调蓄系统&逆流监测系统',
url: 'chuxu'
url: 'chuxu',
parms: [{
name: '溢流量',
value: '1.25',
dw: 'L/s'
}]
}, {
name: '气象监测系统',
url: 'weather'
url: 'weather',
parms: [{
name: '天气',
value: '晴',
dw: ''
}]
}]
})
@ -62,8 +100,8 @@ export default {
.home {
width: 100%;
height: 100%;
// background: url(../assets/bg2.png) left top no-repeat;
// background-size: 100% 100%;
background: url(../assets/index-bg1.jpg) left top no-repeat;
background-size: 100% 100%;
// border: 1px solid rgb(180, 20, 180);
display: flex;
justify-content: space-between;
@ -131,6 +169,7 @@ export default {
justify-content: space-between;
box-shadow: 0 0 8px #99ACB0 inset;
cursor: pointer;
color: #fff;
.one-card-left {
width: 80%;
padding: 10px;
@ -181,6 +220,20 @@ export default {
}
.one-card-right {
width: 20%;
color: #043b8d;
.parm {
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
align-items: center;
justify-content: space-around;
.font28 {
font-size: 28px;
color: #0866f3;
font-size: 800;
}
}
}
}

2
src/views/Level.vue
View File

@ -73,7 +73,7 @@ export default {
}
.content {
width: 96%;
height:100%;
height: 99%;
// border: 1px solid red;
}

2
src/views/Shentou.vue
View File

@ -73,7 +73,7 @@ export default {
}
.content {
width: 96%;
height:100%;
height: 99%;
// border: 1px solid red;
}

2
src/views/Weather.vue
View File

@ -73,7 +73,7 @@ export default {
}
.content {
width: 96%;
height:100%;
height: 99%;
// border: 1px solid red;
}

2
src/views/page.vue
View File

@ -73,7 +73,7 @@ export default {
}
.content {
width: 96%;
height:100%;
height: 99%;
// border: 1px solid red;
}