建立网站的步骤 实湖南岚鸿_小程序开发制作需要多少钱_seo企业顾问_网站在线推广

• 我的是mqtt实时发送数据的1s一次

client.on('message', (topic, message) => {// console.log(message);let messageStr = '';if (message instanceof ArrayBuffer) {messageStr = String.fromCharCode.apply(null, new Uint8Array(message));} else {messageStr = message.toString();}try {const data = JSON.parse(messageStr); // 解析消息为 JSONconst data1 = JSON.parse(data); // 更新 heartRateheartRate.value = data1.heartBpm; // 更新 heartRatecallHeartRate.value = data1.breathBpm; // 更新呼吸率state.value = data1.state; // 更新呼吸率setTimeout(() => {updateChart1c2(data1.breathBpm); // 更新呼吸率}, 0); // 延迟为 0，确保顺序执行} catch (e) {console.error('解析消息失败:', e);}});

<view class="" style="width: 606rpx; height: 322rpx;"><qiun-data-charts ref="chartRef" type="line" :opts="opts" :chartData="chartData" />
</view>

• updateChart1c2 是我的方法 用于更新图表数据

// 更新图表数据const updateChart1c2 = (newData) => {console.log('呼吸参数', newData);// const now = new Date().toLocaleTimeString(); // 获取当前时间const now = new Date();const hours = String(now.getHours()).padStart(2, '0');const minutes = String(now.getMinutes()).padStart(2, '0');const seconds = String(now.getSeconds()).padStart(2, '0');const formattedTime = `${hours}:${minutes}:${seconds}`;// console.log(formattedTime, 'now');chartData.value.categories.push(formattedTime);chartData.value.series[0].data.push(newData);if (chartData.value.categories.length > maxPoints.value) {chartData.value.categories.shift(); // 删除最早的时间标签chartData.value.series[0].data.shift(); // 删除最早的心率数据}// 动态计算yMin和yMaxconst data = chartData.value.series[0].data;const minData = Math.min(...data);const maxData = Math.max(...data);// 计算yMin和yMax，动态调整Y轴范围const yMin = Math.round(Math.max(minData - 5, 0)); // 最小值浮动5个单位const yMax = Math.round(Math.min(maxData + 5, 30)); // 最大值浮动5个单位，并不超过30// 更新yAxis的最小值和最大值opts.yAxis.min = yMin;opts.yAxis.max = yMax;};

得定义chartData 和 opts(图表配置) 还有chartRef(用来引用图表实例)

const maxPoints = ref(5);//图表最多几个参数
//呼吸const chartRef = ref(null); // 用来引用图表实例const opts = ({color: ["#fcb13c"], // 每一条的颜色// padding: [15, 10, 0, 15],enableScroll: false,animation: false, // 关闭动画update: true, // 关键：是否开启连续更新数据的方法,开启之后就不会抖动了duration: 0, // 关闭动画过度legend: {//图例相关配置show: false,},dataLabel: false,// dataPointShape: false, //是否显示数据点的图形标识xAxis: {disableGrid: true,// disabled: true, // 不绘制X轴 默认false},yAxis: {gridType: "dash",dashLength: 2,min: 0, // 初始的Y轴最小值max: 30, // 初始的Y轴最大值},extra: {line: {type: "curve",width: 2,activeType: "hollow",linearType: "custom"},tooltip: { //提示窗showArrow: false, //是否显示箭头borderRadius: 4, //圆角大小bgOpacity: 0.6, //背景色透明度}},})const chartData = ref({categories: [], // 时间标签series: [{name: '呼吸率',smooth: true, // 设置为平滑曲线data: []}],extra: {line: {type: "curve",width: 2,activeType: "hollow",linearType: "custom"},},});

解决图表每次加载问题和一闪闪问题在opts里面加上

animation: false, // 关闭动画
update: true, // 关键：是否开启连续更新数据的方法,开启之后就不会抖动了
duration: 0, // 关闭动画过度

实时更新数据是在mqtt里面每次执行updateChart1c2 ,通过里面的这段代码将参数添加进去

chartData.value.categories.push(formattedTime);chartData.value.series[0].data.push(newData);if (chartData.value.categories.length > maxPoints.value) {chartData.value.categories.shift(); // 删除最早的时间标签chartData.value.series[0].data.shift(); // 删除最早的心率数据}