232 lines
4.4 KiB
Vue
232 lines
4.4 KiB
Vue
<template>
|
|
<border13>
|
|
<div class="container">
|
|
<div class="echartbox" ref="humiture"></div>
|
|
</div>
|
|
</border13>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch, onUnmounted,computed } from "vue";
|
|
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
|
|
import border13 from '@/components/border/Border13.vue'
|
|
const { proxy } = getCurrentInstance() as any;
|
|
const store = useSocketStore();
|
|
let index = 0;
|
|
let humiture = ref();
|
|
let chart = null
|
|
// const props = defineProps<{
|
|
// top: any;
|
|
// bottom: any;
|
|
// }>();
|
|
const borderColor = ["#E43961","#E43961"]
|
|
function init() {
|
|
|
|
if (!chart) {
|
|
chart = proxy.$echarts.init(humiture.value, 'dark');
|
|
}
|
|
let option = {
|
|
title: {
|
|
text: store.humiture.name,
|
|
show: true,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 18,
|
|
},
|
|
top: '2%'
|
|
},
|
|
grid: {
|
|
// 让图表占满容器
|
|
top: "0px",
|
|
left: "0px",
|
|
right: "0px",
|
|
bottom: "0px",
|
|
},
|
|
series: [
|
|
{
|
|
type: "gauge",
|
|
center: ["50%", "90%"],
|
|
startAngle: 190,
|
|
endAngle: -10,
|
|
radius: "50%",
|
|
min: -30,
|
|
max: 50,
|
|
splitNumber: 10,
|
|
progress: {
|
|
show: false,
|
|
width: 5
|
|
},
|
|
pointer: {
|
|
itemStyle: {
|
|
color: 'inherit'
|
|
}
|
|
},
|
|
//刻度轴宽
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 10,
|
|
color: [
|
|
[0.575, '#1089E7'],
|
|
[0.725, '#7CFFB2'],
|
|
[1, '#FF6E76']
|
|
]
|
|
}
|
|
},
|
|
//刻度线
|
|
axisTick: {
|
|
show: false,
|
|
distance: -5,
|
|
splitNumber: 5,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#999'
|
|
}
|
|
},
|
|
//刻度线
|
|
splitLine: {
|
|
distance: 5,
|
|
length: 3,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: '#999'
|
|
}
|
|
},
|
|
//表刻度值
|
|
axisLabel: {
|
|
distance: 15,
|
|
color: '#999',
|
|
fontSize: 10
|
|
},
|
|
anchor: {
|
|
show: false
|
|
},
|
|
title: {
|
|
show: false
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
// width: '10%',
|
|
// lineHeight: 5,
|
|
// borderRadius: 8,
|
|
offsetCenter: [0, '25%'],
|
|
fontSize: 15,
|
|
// fontWeight: 'bolder',
|
|
formatter: '{value} °C',
|
|
color: 'inherit'
|
|
},
|
|
data: [
|
|
{
|
|
value: store.humiture.temp
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "gauge",
|
|
center: ["50%", "55%"],
|
|
startAngle: 200,
|
|
endAngle: -20,
|
|
min: 0,
|
|
max: 100,
|
|
progress: {
|
|
show: false,
|
|
width: 5
|
|
},
|
|
pointer: {
|
|
itemStyle: {
|
|
color: 'inherit'
|
|
}
|
|
},
|
|
//刻度轴宽
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 10,
|
|
color: [
|
|
[0.4, '#FF6E76'],
|
|
[0.7, '#7CFFB2'],
|
|
[1, '#1089E7']
|
|
]
|
|
}
|
|
},
|
|
//刻度线
|
|
axisTick: {
|
|
distance: 0,
|
|
splitNumber: 5,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#999'
|
|
}
|
|
},
|
|
//刻度线
|
|
splitLine: {
|
|
distance: 5,
|
|
length: 3,
|
|
lineStyle: {
|
|
width: 3,
|
|
color: '#999'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
distance: 15,
|
|
color: '#999',
|
|
fontSize: 12
|
|
},
|
|
anchor: {
|
|
show: false
|
|
},
|
|
title: {
|
|
show: false
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: [0, '15%'],
|
|
fontSize: 20,
|
|
formatter: '{value} %RH',
|
|
color: 'inherit'
|
|
},
|
|
data: [
|
|
{
|
|
value: store.humiture.humidity
|
|
}
|
|
]
|
|
},
|
|
],
|
|
};
|
|
|
|
chart.setOption(option);
|
|
}
|
|
watch(
|
|
() => store.humiture,
|
|
(newData) => {
|
|
init()
|
|
},
|
|
{ deep: true }
|
|
);
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
onUnmounted(() => {
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.errList {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.echartbox {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
</style>
|
|
|