171 lines
4.0 KiB
Vue
171 lines
4.0 KiB
Vue
<template>
|
|
<div class="analyse-container">
|
|
<div id="echartDiv" class="echartDiv100"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import myApi from "@/api/myApi.js";
|
|
import BarEchart from "./BarEchart.vue";
|
|
import Process from "./Process.vue";
|
|
import Date from "@/components/Date.vue";
|
|
export default {
|
|
name: "Analyse",
|
|
components: {
|
|
|
|
},
|
|
setup() {
|
|
const state = reactive({
|
|
|
|
});
|
|
onMounted(async () => {
|
|
getChartsZfl("echartDiv", '蒸发量');
|
|
getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
|
});
|
|
const getChartsZfl = (id, text) => {
|
|
var dom = document.getElementById(id);
|
|
var op = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [
|
|
"00",
|
|
"01",
|
|
"02",
|
|
"03",
|
|
"04",
|
|
"05",
|
|
"06",
|
|
"07",
|
|
"08",
|
|
"09",
|
|
"10",
|
|
"11",
|
|
"12",
|
|
"13",
|
|
"14",
|
|
"15",
|
|
"16",
|
|
"17",
|
|
"18",
|
|
"19",
|
|
"20",
|
|
"21",
|
|
"22",
|
|
"23",
|
|
],
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '热岛消减率A',
|
|
min: 0,
|
|
max: 250,
|
|
interval: 50,
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '热岛消减率B',
|
|
min: 0,
|
|
max: 25,
|
|
interval: 5,
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '系统A',
|
|
type: 'line',
|
|
stack: 'one',
|
|
data: [
|
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
|
]
|
|
},
|
|
{
|
|
name: '系统B',
|
|
type: 'line',
|
|
stack: 'one',
|
|
data: [
|
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
|
]
|
|
},
|
|
{
|
|
name: '系统C',
|
|
type: 'line',
|
|
stack: 'one',
|
|
data: [
|
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
|
]
|
|
},
|
|
{
|
|
name: '系统D',
|
|
type: 'line',
|
|
stack: 'one',
|
|
data: [
|
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
|
]
|
|
},
|
|
{
|
|
name: '系统E',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: [
|
|
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
|
]
|
|
}
|
|
]
|
|
};
|
|
getEchart(dom, op)
|
|
}
|
|
const getEchart = (dom, op) => {
|
|
if (dom) {
|
|
var myChart = echarts.init(dom);
|
|
var option = op;
|
|
|
|
option && myChart.setOption(option);
|
|
}
|
|
};
|
|
return {
|
|
...toRefs(state),
|
|
getChartsZfl,
|
|
getEchart
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.analyse-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
|
|
.echartDiv100 {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
// border: 1px solid red;
|
|
}
|
|
}
|
|
</style>
|