dev_zt
parent
860576c1c5
commit
9ed8b251cb
|
|
@ -21,8 +21,7 @@ export default {
|
|||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv", '蒸发量');
|
||||
getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
||||
getChartsZfl("echartDiv", '热岛消减率');
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
|
|
@ -30,19 +29,20 @@ export default {
|
|||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
title: {
|
||||
text,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
legend: {},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
|
|
@ -68,67 +68,32 @@ export default {
|
|||
"22",
|
||||
"23",
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率A',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率B',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
}
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
data: [100, 200, 300, 200, 100, 300, 400, 200, 150, 400, 550, 340,100, 200, 300, 200, 100, 300, 400, 200, 150, 600, 550, 340],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
data: [200, 150, 520, 550, 100, 200, 300, 200, 100, 300, 400, 340,300, 200, 100, 300, 400, 340,300, 200, 100, 300, 400, 340],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
data: [100, 200, 150, 550, 550, 200, 300, 200, 100, 300, 400, 340,100, 200, 150, 300, 550, 200, 100, 200, 150, 400, 550, 200],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
data: [400, 200, 150, 500, 100, 200, 300, 200, 100, 300, 550, 340,400, 200, 150, 300, 100, 200,400, 200, 150, 600, 100, 200],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||
]
|
||||
data: [200, 100, 100, 200, 300, 400, 400, 200, 150, 400, 550, 340, 400, 200, 150, 100, 550, 400, 200, 150, 600, 550,190,200],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,37 +22,41 @@ export default {
|
|||
|
||||
});
|
||||
onMounted(async () => {
|
||||
getChartsZfl("echartDiv", '蒸发量');
|
||||
getChartsZf2("echartDivQ", '蒸发带走的潜热')
|
||||
getChartsZf1("echartDiv", '调蓄池液位');
|
||||
getChartsZf2("echartDivQ", '溢流量')
|
||||
});
|
||||
const getChartsZfl = (id, text) => {
|
||||
const getChartsZf1 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
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: ["系统A", "系统B", "系统C", "系统D", "系统E"],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
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",
|
||||
|
|
@ -79,158 +83,88 @@ export default {
|
|||
"21",
|
||||
"22",
|
||||
"23",
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
name: "系统A",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
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: [
|
||||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||
210, 120, 132, 101, 134, 90, 230, 210, 230, 210, 120,
|
||||
],
|
||||
},
|
||||
{
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
name: "系统B",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
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, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330,
|
||||
310, 220, 182, 191, 234, 290, 330, 310, 340, 210, 250,
|
||||
],
|
||||
},
|
||||
{
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
name: "系统C",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
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: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 120, 230, 250,
|
||||
],
|
||||
},
|
||||
{
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
name: "系统D",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
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: [
|
||||
320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330,
|
||||
320, 320, 332, 301, 334, 390, 330, 320, 240, 210, 220,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 191, 0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(224, 62, 76)'
|
||||
}
|
||||
])
|
||||
position: "top",
|
||||
},
|
||||
areaStyle: {},
|
||||
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: [
|
||||
301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 301, 334, 390,
|
||||
330, 320, 320, 332, 301, 334, 390, 120, 128, 345, 320,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
|
|
@ -447,7 +381,7 @@ export default {
|
|||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
getChartsZfl,
|
||||
getChartsZf1,
|
||||
getChartsZf2,
|
||||
getEchart
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="analyse-container">
|
||||
<div id="echartDiv1" class="echartDiv50"></div>
|
||||
<div id="echartDiv" class="echartDiv100"></div>
|
||||
<div id="echartDiv2" class="echartDiv50"></div>
|
||||
<div id="echartDivQ" class="echartDiv100"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -14,137 +16,144 @@ 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 () => {
|
||||
getChartsZf1("echartDiv", '蒸发量');
|
||||
getChartsZf2("echartDivQ", '蒸发带走的潜热')
|
||||
getChartsPie("echartDiv1", "蒸发量");
|
||||
getChartsZf1("echartDiv", "当天蒸发量");
|
||||
getChartsBar("echartDiv2", '蒸发带走的潜热')
|
||||
getChartsZf1("echartDivQ", "当天蒸发带走的潜热");
|
||||
});
|
||||
const getChartsZf1 = (id, text) => {
|
||||
const getChartsPie = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
title: {
|
||||
text
|
||||
text: text
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||
{ value: 1048, name: '系统A' },
|
||||
{ value: 735, name: '系统B' },
|
||||
{ value: 580, name: '系统C' },
|
||||
{ value: 484, name: '系统D' },
|
||||
{ value: 300, name: '系统E' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf2 = (id, text) => {
|
||||
const getChartsBar = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text,
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
data: [100, 200, 300, 200, 100, 300, 400, 200, 150, 600, 550, 340],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
data: [200, 150, 600, 550, 100, 200, 300, 200, 100, 300, 400, 340],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
data: [100, 200, 150, 600, 550, 200, 300, 200, 100, 300, 400, 340],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
data: [400, 200, 150, 600, 100, 200, 300, 200, 100, 300, 550, 340],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
data: [200, 100, 100, 200, 300, 400, 400, 200, 150, 600, 550, 340],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
const getChartsZf1 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
title: {
|
||||
text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||
data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"00",
|
||||
"01",
|
||||
|
|
@ -171,72 +180,232 @@ export default {
|
|||
"22",
|
||||
"23",
|
||||
],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率A',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
type: "value",
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '热岛消减率B',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '系统A',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
name: "系统A",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||
210, 120, 132, 101, 134, 90, 230, 210, 230, 210, 120,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统B',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
name: "系统B",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330,
|
||||
310, 220, 182, 191, 234, 290, 330, 310, 340, 210, 250,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统C',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
name: "系统C",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 150, 232, 201, 154, 190, 330, 410, 120, 230, 250,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统D',
|
||||
type: 'line',
|
||||
stack: 'one',
|
||||
name: "系统D",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330,
|
||||
320, 320, 332, 301, 334, 390, 330, 320, 240, 210, 220,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '系统E',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||
]
|
||||
}
|
||||
]
|
||||
301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 301, 334, 390,
|
||||
330, 320, 320, 332, 301, 334, 390, 120, 128, 345, 320,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op)
|
||||
}
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getChartsZf2 = (id, text) => {
|
||||
var dom = document.getElementById(id);
|
||||
var op = {
|
||||
title: {
|
||||
text,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["系统A", "系统B", "系统C", "系统D", "系统E"],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"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",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
210, 120, 132, 101, 134, 90, 230, 210, 230, 210, 120, 120, 132,
|
||||
101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
|
||||
],
|
||||
color: "#9b361e"
|
||||
},
|
||||
{
|
||||
name: "系统B",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
182, 191, 234, 290, 330, 220, 182, 191, 234, 290, 330, 310, 220,
|
||||
310, 220, 182, 191, 234, 290, 330, 310, 340, 210, 250,
|
||||
],
|
||||
color: "#a7dcf5"
|
||||
},
|
||||
{
|
||||
name: "系统C",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,
|
||||
410, 120, 230, 250, 410, 150, 232, 201, 154, 190, 330,
|
||||
],
|
||||
color: "#80c0a8"
|
||||
},
|
||||
{
|
||||
name: "系统D",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
320, 332, 301, 334, 320, 320, 332, 301, 334, 390, 330, 320, 240,
|
||||
210, 220, 390, 330, 320, 320, 332, 301, 334, 390, 330,
|
||||
],
|
||||
color: "#8d38ac"
|
||||
},
|
||||
{
|
||||
name: "系统E",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
data: [
|
||||
330, 320, 320, 332, 301, 334, 390, 120, 128, 345, 320, 301, 334,
|
||||
390, 330, 320, 320, 332, 301, 334, 390, 301, 334, 390,
|
||||
],
|
||||
color: "#8dc149"
|
||||
},
|
||||
],
|
||||
};
|
||||
getEchart(dom, op);
|
||||
};
|
||||
const getEchart = (dom, op) => {
|
||||
if (dom) {
|
||||
var myChart = echarts.init(dom);
|
||||
|
|
@ -249,7 +418,9 @@ export default {
|
|||
...toRefs(state),
|
||||
getChartsZf1,
|
||||
getChartsZf2,
|
||||
getEchart
|
||||
getEchart,
|
||||
getChartsBar,
|
||||
getChartsPie
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
@ -260,15 +431,22 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.echartDiv100 {
|
||||
width: 100%;
|
||||
width: 65%;
|
||||
height: 49%;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
.echartDiv50 {
|
||||
width: 34%;
|
||||
height: 49%;
|
||||
margin: 0 auto;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
dw: '%'
|
||||
}]
|
||||
}, {
|
||||
name: '调蓄系统&逆流监测系统',
|
||||
name: '调蓄系统&溢流监测系统',
|
||||
url: 'chuxu',
|
||||
parms: [{
|
||||
name: '溢流量',
|
||||
|
|
|
|||
Loading…
Reference in New Issue