dev_zt
parent
e268654151
commit
26d29fcdc5
File diff suppressed because it is too large
Load Diff
|
|
@ -4,7 +4,6 @@
|
||||||
<div id="echartDiv2" class="echartDiv100"></div>
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
<div id="echartDiv3" class="echartDiv100"></div>
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
<div id="echartDiv4" class="echartDiv100"></div>
|
<div id="echartDiv4" class="echartDiv100"></div>
|
||||||
<div id="echartDiv5" class="echartDiv100"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -25,41 +24,40 @@ export default {
|
||||||
|
|
||||||
});
|
});
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
getChartsZfl("echartDiv1", '蒸腾量');
|
getChartsZfl("echartDiv1", '渗透量');
|
||||||
getChartsZfl("echartDiv2", 'COD');
|
getChartsZf2("echartDiv2", 'COD');
|
||||||
getChartsZfl("echartDiv3", '氨氮');
|
getChartsZf3("echartDiv3", '氨氮');
|
||||||
getChartsZfl("echartDiv4", 'SS');
|
getChartsZf4("echartDiv4", 'SS');
|
||||||
getChartsZfl("echartDiv5", '屋面温度');
|
|
||||||
});
|
});
|
||||||
const getChartsZfl = (id, text) => {
|
const getChartsZfl = (id, text) => {
|
||||||
var dom = document.getElementById(id);
|
var dom = document.getElementById(id);
|
||||||
console.log(dom);
|
console.log(dom);
|
||||||
var op = {
|
var op = {
|
||||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
|
||||||
title: {
|
title: {
|
||||||
text: text
|
text: text,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: "axis",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross',
|
type: "cross",
|
||||||
label: {
|
label: {
|
||||||
backgroundColor: '#6a7985'
|
backgroundColor: "#6a7985",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: "3%",
|
||||||
right: '4%',
|
right: "4%",
|
||||||
bottom: '3%',
|
bottom: "3%",
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: "category",
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: [
|
data: [
|
||||||
"00",
|
"00",
|
||||||
|
|
@ -86,158 +84,549 @@ export default {
|
||||||
"21",
|
"21",
|
||||||
"22",
|
"22",
|
||||||
"23",
|
"23",
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value'
|
type: "value",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '系统A',
|
name: "系统A",
|
||||||
type: 'line',
|
type: "line",
|
||||||
stack: 'Total',
|
stack: "Total",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
width: 0,
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: "#80FFA5"
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
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,
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
opacity: 0.8,
|
color: "#37A2FF"
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(128, 255, 165)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(1, 191, 236)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
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: [
|
||||||
|
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: '系统B',
|
name: "系统D",
|
||||||
type: 'line',
|
type: "line",
|
||||||
stack: 'Total',
|
stack: "Total",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
width: 0,
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: "#FF0087"
|
||||||
},
|
},
|
||||||
showSymbol: false,
|
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: {
|
emphasis: {
|
||||||
focus: 'series'
|
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: [
|
||||||
|
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: '系统C',
|
name: "系统E",
|
||||||
type: 'line',
|
type: "line",
|
||||||
stack: 'Total',
|
stack: "Total",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 0
|
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,
|
showSymbol: false,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'top'
|
position: "top",
|
||||||
},
|
},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
opacity: 0.8,
|
color: "#FFBF00"
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(255, 191, 0)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(224, 62, 76)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
},
|
||||||
emphasis: {
|
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: [
|
||||||
}
|
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)
|
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: [
|
||||||
|
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||||
|
210, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统B",
|
||||||
|
type: "bar",
|
||||||
|
stack: "Ad",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统C",
|
||||||
|
type: "bar",
|
||||||
|
stack: "Ad",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统D",
|
||||||
|
type: "bar",
|
||||||
|
stack: "Ad",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统E",
|
||||||
|
type: "bar",
|
||||||
|
stack: "Ad",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
getEchart(dom, op);
|
||||||
|
};
|
||||||
|
const getChartsZf3 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FFBF00", "#FF0087"],
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.5,
|
||||||
|
color: "#80FFA5"
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.5,
|
||||||
|
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: {
|
||||||
|
opacity: 0.5,
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.5,
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统E",
|
||||||
|
type: "line",
|
||||||
|
stack: "Total",
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.5,
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
getEchart(dom, op);
|
||||||
|
};
|
||||||
|
const getChartsZf4 = (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",
|
||||||
|
barWidth: "8",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统B",
|
||||||
|
type: "bar",
|
||||||
|
// stack: "Ad",
|
||||||
|
barWidth: "8",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统C",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: "8",
|
||||||
|
// stack: "Ad",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统D",
|
||||||
|
type: "bar",
|
||||||
|
// stack: "Ad",
|
||||||
|
barWidth: "8",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统E",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: "8",
|
||||||
|
// stack: "Ad",
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
getEchart(dom, op);
|
||||||
|
};
|
||||||
const getEchart = (dom, op) => {
|
const getEchart = (dom, op) => {
|
||||||
if (dom) {
|
if (dom) {
|
||||||
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,6 @@
|
||||||
<div id="echartDiv1" class="echartDiv100"></div>
|
<div id="echartDiv1" class="echartDiv100"></div>
|
||||||
<div id="echartDiv2" class="echartDiv100"></div>
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
<div id="echartDiv3" class="echartDiv100"></div>
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
<div id="echartDiv4" class="echartDiv100"></div>
|
|
||||||
<div id="echartDiv5" class="echartDiv100"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -25,11 +23,9 @@ export default {
|
||||||
|
|
||||||
});
|
});
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
getChartsZfl("echartDiv1", '蒸腾量');
|
getChartsZfl("echartDiv1", '渗透量');
|
||||||
getChartsZfl("echartDiv2", 'COD');
|
getChartsZfl("echartDiv2", '透水铺砖表面温度');
|
||||||
getChartsZfl("echartDiv3", '氨氮');
|
getChartsZfl("echartDiv3", '热岛消减率');
|
||||||
getChartsZfl("echartDiv4", 'SS');
|
|
||||||
getChartsZfl("echartDiv5", '屋面温度');
|
|
||||||
});
|
});
|
||||||
const getChartsZfl = (id, text) => {
|
const getChartsZfl = (id, text) => {
|
||||||
var dom = document.getElementById(id);
|
var dom = document.getElementById(id);
|
||||||
|
|
@ -269,7 +265,7 @@ export default {
|
||||||
|
|
||||||
.echartDiv100 {
|
.echartDiv100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 20%;
|
height: 30%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue