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.
80 lines
1.6 KiB
80 lines
1.6 KiB
<script lang="ts" setup>
|
|
import { useSealStore } from '@/stores/sealStore'
|
|
import * as echarts from 'echarts'
|
|
import { onUnmounted, ref, watchEffect } from 'vue'
|
|
|
|
const sealStore = useSealStore()
|
|
const chartRef = ref<HTMLElement | null>(null)
|
|
const realTimePressure = ref(sealStore.sealInfo.pressure)
|
|
let myChart: echarts.ECharts | null = null
|
|
|
|
watchEffect(() => {
|
|
realTimePressure.value = sealStore.sealInfo.pressure
|
|
const pressure = sealStore.sealInfo?.pressure || 0
|
|
if (!myChart && chartRef.value) {
|
|
initChart() // 首次初始化图表
|
|
}
|
|
if (myChart) {
|
|
myChart.setOption({
|
|
series: [{
|
|
data: [{ value: pressure }],
|
|
}],
|
|
})
|
|
}
|
|
})
|
|
const initChart = () => {
|
|
if (!chartRef.value) {
|
|
return
|
|
}
|
|
myChart = echarts.init(chartRef.value)
|
|
const option = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%',
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Pressure',
|
|
type: 'gauge',
|
|
max: 6,
|
|
progress: {
|
|
show: true,
|
|
width: 5,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 5,
|
|
},
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
formatter: '{value}Kp',
|
|
},
|
|
data: [
|
|
{
|
|
value: realTimePressure.value,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
myChart.setOption(option)
|
|
}
|
|
// 组件卸载时释放资源
|
|
onUnmounted(() => {
|
|
if (myChart) {
|
|
myChart.dispose() // 销毁图表实例
|
|
myChart = null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="chartRef" style="width: 40vw; height: 30vw" />
|
|
</template>
|
|
|
|
<style>
|
|
canvas{
|
|
width: 60vw !important;
|
|
height: 70vh !important;
|
|
}
|
|
</style>
|