第 11 篇小程序进阶——ECharts 图表 历史查询 告警推送上篇做了一个能看能控的基础版。这篇加上三个进阶功能温度曲线ECharts、历史数据查询HTTP API InfluxDB、阈值告警推送。1. 集成 ECharts 温度曲线微信小程序用echarts-for-weixin组件。这是 ECharts 官方适配的小程序版。安装# 项目根目录npminstallec-canvas# 然后开发者工具 → 工具 → 构建 npm页面中引入pages/history/history.json{usingComponents:{ec-canvas:../../ec-canvas/ec-canvas},navigationBarTitleText:温度历史}pages/history/history.wxmlviewclasscontainerviewclasschart-boxec-canvasidtempChartcanvas-idtempChartec{{ec}}/ec-canvas/viewviewclasstime-tabsbuttonsizeminibindtaploadHistorydata-range1h近1小时/buttonbuttonsizeminibindtaploadHistorydata-range6h近6小时/buttonbuttonsizeminibindtaploadHistorydata-range24h近24小时/button/view/viewpages/history/history.jsimport*asechartsfrom../../ec-canvas/echarts;Page({data:{ec:{// 懒加载canvas 渲染完成后才初始化 EChartslazyLoad:true,},tempData:[],humiData:[],},onLoad(){// 获取 ec-canvas 组件实例this.ecComponentthis.selectComponent(#tempChart);this.initChart();this.loadHistory(1h);},initChart(){this.ecComponent.init((canvas,width,height,dpr){constchartecharts.init(canvas,null,{width:width,height:height,devicePixelRatio:dpr,});chart.setOption(this.getChartOption());this.chartchart;returnchart;});},getChartOption(){return{color:[#ff6b6b,#48dbfb],legend:{data:[温度,湿度],bottom:0},grid:{top:20,bottom:40,left:50,right:20},xAxis:{type:time,axisLabel:{fontSize:10}},yAxis:[{type:value,name:°C,min:0,max:50},{type:value,name:%,min:0,max:100},],tooltip:{trigger:axis},series:[{name:温度,type:line,smooth:true,data:[],yAxisIndex:0,},{name:湿度,type:line,smooth:true,data:[],yAxisIndex:1,},],};},asyncloadHistory(range){wx.showLoading({title:加载中...});try{constresawaitwx.request({url:https://api.your-server.com/history?range${range},method:GET,});consttempDatares.data.temp.map(d[newDate(d.time),d.value]);consthumiDatares.data.humi.map(d[newDate(d.time),d.value]);this.chart.setOption({series:[{data:tempData},{data:humiData},],});}catch(err){wx.showToast({title:加载失败,icon:error});}finally{wx.hideLoading();}},});2. 后端 API——从 InfluxDB 查历史数据小程序不能直接连数据库需要一个中间 API 服务。最简单的方案用 Node.js/Express 写一个轻量 API跑在服务器上。// api-server.js (Node.js Express)constexpressrequire(express);const{InfluxDB}require(influxdata/influxdb-client);constappexpress();constinfluxnewInfluxDB({url:http://localhost:8086,token:my-super-secret-token,});app.get(/history,async(req,res){constrangereq.query.range||1h;// 1h / 6h / 24hconstqueryApiinflux.getQueryApi(iot-org);constqueryfrom(bucket: sensor-data) | range(start: -${range}) | filter(fn: (r) r._measurement mqtt_consumer) | filter(fn: (r) r._field temp or r._field humi) | aggregateWindow(every:${range1h?30s:5m}, fn: mean);consttemp[],humi[];forawait(const{values,row}ofqueryApi.iterateRows(query)){constpoint{time:row[2],value:row[5]};if(row[4]temp)temp.push(point);elsehumi.push(point);}res.json({temp,humi});});app.listen(3000,()console.log(API Server on :3000));3. 阈值告警推送方案 A小程序内告警// 在 MQTT message 回调中this.client.on(message,(topic,payload){constdataJSON.parse(payload.toString());if(data.temp40){wx.showModal({title:⚠️ 高温警告,content:当前温度${data.temp}°C超过阈值 40°C,showCancel:false,});// 播放提示音小程序支持wx.vibrateLong();}this.setData({temperature:data.temp.toFixed(1),humidity:data.humi.toFixed(1),});});方案 B微信服务通知需要订阅消息流程 1. 用户点击订阅告警按钮 → 调用 wx.requestSubscribeMessage 2. 用户同意 → 拿到一次推送权限 3. 后端检测到温度超标 → 调用微信 API 推送模板消息// 小程序端订阅wx.requestSubscribeMessage({tmplIds:[模板ID_高温告警],success(res){if(res[模板ID_高温告警]accept){// 保存用户 openid → 后端用于推送}},});4. 增加刷新与重连机制IoT 小程序最大的痛点是不知道数据为什么不更新了。增强健壮性Page({data:{connected:false,lastUpdate:},onLoad(){this.connectMQTT();// 每 30 秒检查一次 MQTT 心跳this.heartbeatTimersetInterval((){if(!this.data.connected){console.log(重连中...);this.connectMQTT();}},30000);},// 记录最后更新时间updateLastTime(){constnownewDate();this.setData({lastUpdate:${now.getHours()}:${now.getMinutes()}:${now.getSeconds()},});},// 手动刷新refreshData(){this.client.publish(device/refresh/cmd,1);},onUnload(){clearInterval(this.heartbeatTimer);if(this.client)this.client.end();},});5. 调试技巧问题排查方法MQTT 连不上检查wss://域名是否已配置到白名单数据不更新打开开发者工具 → Console → 看有没有message日志ECharts 白屏检查ec-canvas组件路径是否正确API 请求失败检查服务器域名白名单request合法域名真机不显示预览时勾选不校验合法域名仅开发有效真机必须配置下一篇完整项目——智能 WiFi 插座从硬件到小程序全链路
第 11 篇小程序进阶——ECharts 图表 历史查询 告警推送上篇做了一个能看能控的基础版。这篇加上三个进阶功能温度曲线ECharts、历史数据查询HTTP API InfluxDB、阈值告警推送。1. 集成 ECharts 温度曲线微信小程序用echarts-for-weixin组件。这是 ECharts 官方适配的小程序版。安装# 项目根目录npminstallec-canvas# 然后开发者工具 → 工具 → 构建 npm页面中引入pages/history/history.json{usingComponents:{ec-canvas:../../ec-canvas/ec-canvas},navigationBarTitleText:温度历史}pages/history/history.wxmlviewclasscontainerviewclasschart-boxec-canvasidtempChartcanvas-idtempChartec{{ec}}/ec-canvas/viewviewclasstime-tabsbuttonsizeminibindtaploadHistorydata-range1h近1小时/buttonbuttonsizeminibindtaploadHistorydata-range6h近6小时/buttonbuttonsizeminibindtaploadHistorydata-range24h近24小时/button/view/viewpages/history/history.jsimport*asechartsfrom../../ec-canvas/echarts;Page({data:{ec:{// 懒加载canvas 渲染完成后才初始化 EChartslazyLoad:true,},tempData:[],humiData:[],},onLoad(){// 获取 ec-canvas 组件实例this.ecComponentthis.selectComponent(#tempChart);this.initChart();this.loadHistory(1h);},initChart(){this.ecComponent.init((canvas,width,height,dpr){constchartecharts.init(canvas,null,{width:width,height:height,devicePixelRatio:dpr,});chart.setOption(this.getChartOption());this.chartchart;returnchart;});},getChartOption(){return{color:[#ff6b6b,#48dbfb],legend:{data:[温度,湿度],bottom:0},grid:{top:20,bottom:40,left:50,right:20},xAxis:{type:time,axisLabel:{fontSize:10}},yAxis:[{type:value,name:°C,min:0,max:50},{type:value,name:%,min:0,max:100},],tooltip:{trigger:axis},series:[{name:温度,type:line,smooth:true,data:[],yAxisIndex:0,},{name:湿度,type:line,smooth:true,data:[],yAxisIndex:1,},],};},asyncloadHistory(range){wx.showLoading({title:加载中...});try{constresawaitwx.request({url:https://api.your-server.com/history?range${range},method:GET,});consttempDatares.data.temp.map(d[newDate(d.time),d.value]);consthumiDatares.data.humi.map(d[newDate(d.time),d.value]);this.chart.setOption({series:[{data:tempData},{data:humiData},],});}catch(err){wx.showToast({title:加载失败,icon:error});}finally{wx.hideLoading();}},});2. 后端 API——从 InfluxDB 查历史数据小程序不能直接连数据库需要一个中间 API 服务。最简单的方案用 Node.js/Express 写一个轻量 API跑在服务器上。// api-server.js (Node.js Express)constexpressrequire(express);const{InfluxDB}require(influxdata/influxdb-client);constappexpress();constinfluxnewInfluxDB({url:http://localhost:8086,token:my-super-secret-token,});app.get(/history,async(req,res){constrangereq.query.range||1h;// 1h / 6h / 24hconstqueryApiinflux.getQueryApi(iot-org);constqueryfrom(bucket: sensor-data) | range(start: -${range}) | filter(fn: (r) r._measurement mqtt_consumer) | filter(fn: (r) r._field temp or r._field humi) | aggregateWindow(every:${range1h?30s:5m}, fn: mean);consttemp[],humi[];forawait(const{values,row}ofqueryApi.iterateRows(query)){constpoint{time:row[2],value:row[5]};if(row[4]temp)temp.push(point);elsehumi.push(point);}res.json({temp,humi});});app.listen(3000,()console.log(API Server on :3000));3. 阈值告警推送方案 A小程序内告警// 在 MQTT message 回调中this.client.on(message,(topic,payload){constdataJSON.parse(payload.toString());if(data.temp40){wx.showModal({title:⚠️ 高温警告,content:当前温度${data.temp}°C超过阈值 40°C,showCancel:false,});// 播放提示音小程序支持wx.vibrateLong();}this.setData({temperature:data.temp.toFixed(1),humidity:data.humi.toFixed(1),});});方案 B微信服务通知需要订阅消息流程 1. 用户点击订阅告警按钮 → 调用 wx.requestSubscribeMessage 2. 用户同意 → 拿到一次推送权限 3. 后端检测到温度超标 → 调用微信 API 推送模板消息// 小程序端订阅wx.requestSubscribeMessage({tmplIds:[模板ID_高温告警],success(res){if(res[模板ID_高温告警]accept){// 保存用户 openid → 后端用于推送}},});4. 增加刷新与重连机制IoT 小程序最大的痛点是不知道数据为什么不更新了。增强健壮性Page({data:{connected:false,lastUpdate:},onLoad(){this.connectMQTT();// 每 30 秒检查一次 MQTT 心跳this.heartbeatTimersetInterval((){if(!this.data.connected){console.log(重连中...);this.connectMQTT();}},30000);},// 记录最后更新时间updateLastTime(){constnownewDate();this.setData({lastUpdate:${now.getHours()}:${now.getMinutes()}:${now.getSeconds()},});},// 手动刷新refreshData(){this.client.publish(device/refresh/cmd,1);},onUnload(){clearInterval(this.heartbeatTimer);if(this.client)this.client.end();},});5. 调试技巧问题排查方法MQTT 连不上检查wss://域名是否已配置到白名单数据不更新打开开发者工具 → Console → 看有没有message日志ECharts 白屏检查ec-canvas组件路径是否正确API 请求失败检查服务器域名白名单request合法域名真机不显示预览时勾选不校验合法域名仅开发有效真机必须配置下一篇完整项目——智能 WiFi 插座从硬件到小程序全链路
)
