微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022

您所在的位置：网站首页 › 微信小程序开发物联网怎么做 › 微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022

微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022

2024-07-13 01:45| 来源: 网络整理| 查看: 265

获取ECharts

Apache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。

1、从 GitHub 获取 2、从 npm 获取 3、从 CDN 获取 4、在线定制

安装方式从 npm 获取 npm install echarts --save

详见在项目中引入 Apache ECharts。

从 CDN 获取

推荐从 jsDelivr 引用echarts。

从 GitHub 获取

apache/echarts 项目的 release页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

在线定制

如果只想引入部分模块以减少包体积，可以使用ECharts 在线定制功能。

博主采用从 GitHub 获取ECharts。附ECharts官方配置手册。数据查询地址：OneNet查询数据流详情。微信小程序官方配置文档。

ECharts实现代码 index.js //引入echarts文件 import * as echarts from '../../utils/ec-canvas/echarts'; function line_set(chart, xdata, ydata) { var option = { title: { text: '温度随时间变化图', left: 'center' }, color: ["#37A2DA", "#67E0E3", "#9FE6B8"], grid: { containLabel: true }, tooltip: { show: true, trigger: 'axis' }, xAxis: { name:'日期', axisLabel: { interval:0, rotate:70 } , type: 'category', boundaryGap: false, data: xdata }, yAxis: { name:'温度/℃', x: 'center', type: 'value', splitNumber:5, min: 0, max: 40, splitLine: { lineStyle: { type: 'dashed' } } }, series: [{ name: '温度', type: 'line', smooth: true, data: ydata }] }; chart.setOption(option); } Page({ /** * 页面的初始数据 */ data: { ec: { lazyLoad: true }, timer:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = this; this.getOption(); this.setData({ //每隔10s刷新一次 timer: setInterval(function () { _this.getOption(); }, 10000) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.oneComponent = this.selectComponent('#mychart-dom-bar'); }, onUnload: function () { clearInterval(this.data.timer) }, init_chart: function (xdata, ydata) { //初始化第一个图表 this.oneComponent.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); line_set(chart, xdata, ydata) this.chart = chart; return chart; }); }, getOption: function () { var _this = this; wx.request({ url: 'https://api.heclouds.com/devices/device_id/datastreams/datastream_id&limit=10', //请求数据接口地址；device_id：需要替换为设备ID；datastream_id：需要替换为数据流ID method: 'GET', header: { "Content-Type": "application/x-www-form-urlencoded", "api密匙": 'xxxxx' }, data:{ }, success: (res)=> { console.log(res); _this.setData({ //将接口返回的数据data赋值给data data:res.data }) var i var Temperature=[]; var date=[]; for (i = 0; i

【本文地址】

微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022

微信小程序之使用echarts图表展示OneNet温度数据（附小程序源码）2022

今日新闻

推荐新闻