199 lines
6.6 KiB
Vue
199 lines
6.6 KiB
Vue
<template>
|
||
<div class="content-big" ref="humiture"></div>
|
||
</template>
|
||
|
||
<script setup lang='ts'>
|
||
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
|
||
import { useI18n } from 'vue-i18n'
|
||
let { t } = useI18n();
|
||
const { proxy } = getCurrentInstance() as any;
|
||
const props = defineProps<{
|
||
title: any;
|
||
data: any;
|
||
bottom: any;
|
||
top: any;
|
||
}>();
|
||
let humiture = ref();
|
||
let chart = null
|
||
watch(() => props, (val) => {
|
||
init()
|
||
}, { deep: true })
|
||
|
||
function init() {
|
||
if (!chart) {
|
||
chart = proxy.$echarts.init(humiture.value, "dark");
|
||
}
|
||
let option = {
|
||
title: {
|
||
text: props.title,
|
||
top: '2%'
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
|
||
},
|
||
legend: {
|
||
// bottom: "3%",
|
||
top: '6%'
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
color: ["#4992FF", "#7CFFB2", "#FF6E76"],
|
||
xAxis: {
|
||
type: "category",
|
||
data: props.data.list,
|
||
axisLabel: {
|
||
interval: 0
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
formatter: "{value} (°C/%RH)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: `${t('messages.TemperatureRange')}(°C)(${t('messages.fanwei')}：${props.bottom.temp}°C - ${props.top.temp}°C)`,
|
||
type: "bar",
|
||
data: props.data.temp,
|
||
barWidth: '30%',
|
||
itemStyle: {
|
||
color: function (params) {
|
||
var index_color = params.value;
|
||
if (
|
||
index_color <= props.bottom.temp ||
|
||
index_color >= props.top.temp
|
||
) {
|
||
return "#FF6E76";
|
||
} else {
|
||
return "#4992FF";
|
||
}
|
||
},
|
||
},
|
||
label: {
|
||
formatter: "{c} °C",
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "rgb(255,255,255,0.9)",
|
||
},
|
||
},
|
||
markLine: {
|
||
// 设置最大值和最小值
|
||
silent: true, //基线显示 隐藏
|
||
symbol: "none", // 不显示箭头和圆点
|
||
data: [
|
||
{
|
||
name: t('messages.TemperatureRange'),
|
||
yAxis: props.bottom.temp,
|
||
label: {
|
||
formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${props.bottom.temp} °C`,
|
||
position: "middle",
|
||
},
|
||
lineStyle: {
|
||
color: "yellow", // 这儿设置安全基线颜色
|
||
},
|
||
},
|
||
{
|
||
name: t('messages.TemperatureRange'),
|
||
yAxis: props.top.temp,
|
||
label: {
|
||
formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_up')}：${props.top.temp} °C`,
|
||
position: "middle",
|
||
},
|
||
lineStyle: {
|
||
color: "yellow", // 这儿设置安全基线颜色
|
||
},
|
||
},
|
||
],
|
||
},
|
||
},
|
||
{
|
||
name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${props.bottom.humidity}%RH - ${props.top.humidity}%RH)`,
|
||
type: "bar",
|
||
data: props.data.humidity,
|
||
barWidth: '30%',
|
||
itemStyle: {
|
||
color: function (params) {
|
||
var index_color = params.value;
|
||
|
||
if (
|
||
index_color <= props.bottom.humidity ||
|
||
index_color >= props.top.humidity
|
||
) {
|
||
return "#FF6E76";
|
||
} else {
|
||
return "#7CFFB2";
|
||
}
|
||
},
|
||
},
|
||
label: {
|
||
formatter: "{c} %RH",
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "rgb(255,255,255,0.9)",
|
||
},
|
||
},
|
||
markLine: {
|
||
// 设置最大值和最小值
|
||
silent: true, //基线显示 隐藏
|
||
symbol: "none", // 不显示箭头和圆点
|
||
data: [
|
||
{
|
||
name: "湿度",
|
||
yAxis: props.bottom.humidity,
|
||
label: {
|
||
formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：` + props.bottom.humidity + "%RH",
|
||
position: "middle",
|
||
},
|
||
lineStyle: {
|
||
color: "red", // 这儿设置安全基线颜色
|
||
},
|
||
},
|
||
{
|
||
name: "湿度",
|
||
yAxis: props.top.humidity,
|
||
label: {
|
||
formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：` + props.top.humidity + "%RH",
|
||
position: "middle",
|
||
},
|
||
lineStyle: {
|
||
color: "red", // 这儿设置安全基线颜色
|
||
},
|
||
},
|
||
],
|
||
},
|
||
},
|
||
{
|
||
name: t('messages.TemperatureHumidityexceeded'),
|
||
type: "bar",
|
||
color: '#FF6E76'
|
||
}
|
||
],
|
||
};
|
||
chart.setOption(option);
|
||
}
|
||
|
||
onMounted(() => {
|
||
// init()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content-big {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|