You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.3 KiB
62 lines
1.3 KiB
<template>
|
|
<div id="complex-container"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { nextTick } from 'vue';
|
|
import { generateChartOption } from '@/utils/complexChart';
|
|
|
|
let myChart = null;
|
|
let data = [];
|
|
let defaultSelectedLegend = {
|
|
'室内温度(℃)': true,
|
|
'室外温度(℃)': true,
|
|
'土壤温度(℃)': true,
|
|
'室内湿度(RH%)': true,
|
|
'室外湿度(RH%)': true,
|
|
'土壤湿度(RH%)': true,
|
|
'风速(m/s)': true,
|
|
'CO2(%)': true,
|
|
'光照(klux)': true,
|
|
};
|
|
|
|
async function getData() {
|
|
try {
|
|
const { data: rawData } = await useFetch('/api/datas');
|
|
const { code, msg, data } = rawData.value;
|
|
if (code === 200) {
|
|
await nextTick();
|
|
initChart(data);
|
|
} else {
|
|
throw new Error(msg);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
// 初始化图表
|
|
function initChart(data) {
|
|
const chartDom = document.getElementById('complex-container');
|
|
myChart = echarts.init(chartDom);
|
|
render(data, defaultSelectedLegend);
|
|
|
|
myChart.on('legendselectchanged', event => {
|
|
defaultSelectedLegend = event.selected;
|
|
render(data, event.selected);
|
|
});
|
|
}
|
|
|
|
function render(data, selected) {
|
|
const option = generateChartOption(data, selected);
|
|
option && myChart.setOption(option);
|
|
}
|
|
|
|
getData();
|
|
</script>
|
|
|
|
<style scoped>
|
|
#complex-container {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|