<template> <div> <div class="controls"> <button @click="switchMode('instant')" :class="{ active: currentMode === 'instant' }" >瞬时谱</button> <button @click="switchMode('max')" :class="{ active: currentMode === 'max' }" >最大保持</button> <button @click="switchMode('avg')" :class="{ active: currentMode === 'avg' }" >平均谱</button> </div> <div ref="chartRef" class="spectrum-chart"></div> </div> </template> <script setup> import { ref, onMounted, onBeforeUnmount, computed } from 'vue'; import * as echarts from 'echarts'; // 数据存储 const currentMode = ref('instant'); const instantData = ref([]); const maxHoldData = ref([]); const avgData = ref([]); const historyData = ref([]); // 图表相关 const chartRef = ref(null); let chartInstance = null; let dataTimer = null; const generateSpectrumData = () => { return Array.from({ length: 1001 }, (_, i) => Math.sin(i / 20) * Math.random() ); }; // 计算平均值 const calculateAverage = (history) => { return history[0].map((_, i) => history.reduce((sum, arr) => sum + arr[i], 0) / history.length ); }; // 数据更新逻辑 const updateData = () => { const newData = generateSpectrumData(); // 更新瞬时数据 instantData.value = newData; // 更新最大保持数据 if (!maxHoldData.value.length) { maxHoldData.value = [...newData]; } else { maxHoldData.value = maxHoldData.value.map((v, i) => Math.max(v, newData[i]) ); } // 更新平均数据 historyData.value = [...historyData.value, newData].slice(-10); // 保留最近10次 avgData.value = calculateAverage(historyData.value); // 更新图表 updateChart(); }; // 图表更新 const updateChart = () => { const currentData = { instant: instantData.value, max: maxHoldData.value, avg: avgData.value, }[currentMode.value]; chartInstance.setOption({ series: [{ data: currentData }] }); }; // 模式切换 const switchMode = (mode) => { currentMode.value = mode; updateChart(); }; // 初始化图表 const initChart = () => { chartInstance = echarts.init(chartRef.value); // 初始化数据 updateData(); const baseOption = { title: { text: '频谱分析图', left: 'center' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'value', name: 'Frequency (Hz)', min: 0, max: 1000 }, yAxis: { type: 'value', name: 'Amplitude', min: 0, max: 1 }, dataZoom: [ { type: 'slider', xAxisIndex: 0 }, { type: 'inside', xAxisIndex: 0 } ], series: [{ type: 'line', smooth: true, areaStyle: {} }] }; chartInstance.setOption(baseOption); window.addEventListener('resize', handleResize); }; // 自动更新 onMounted(() => { initChart(); dataTimer = setInterval(updateData, 2000); // 2秒更新一次数据 }); // 清理 onBeforeUnmount(() => { clearInterval(dataTimer); window.removeEventListener('resize', handleResize); chartInstance?.dispose(); }); const handleResize = () => { chartInstance?.resize(); }; </script> <style> .controls { margin: 20px; text-align: center; } .controls button { margin: 0 10px; padding: 8px 16px; cursor: pointer; } .controls button.active { background: #409eff; color: white; } .spectrum-chart { width: 100%; height: 600px; } </style>为什么图表上没有数，放大缩小的轴里有数据