微信小程序之使用echarts图表展示OneNet温度数据

Posted 2021-12-30 ✎浅笑醉红楼

获取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-key": 'yourAPIKey'
      ,
      data:
    
      ,
      success:  (res)=> 
        console.log(res);
        _this.setData(      
          //将接口返回的数据data赋值给data
          data:res.data  
        )
        var i
        var Temperature=[];
        var date=[];
        for (i = 0; i <res.data.data.count; i++) 
            Temperature[i]=res.data.data.datastreams[0].datapoints[i].value;
            date[i]=res.data.data.datastreams[0].datapoints[i].at;
         
        _this.init_chart(date,Temperature)           
      ,   
  )

)

index.json

  "usingComponents": 
    "ec-canvas": "../../utils/ec-canvas/ec-canvas"
  

index.wxml

<!--index.wxml-->
<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec=" ec "></ec-canvas>
</view>

index.wxss

/**index.wxss**/
ec-canvas 
  width: 750rpx;
  height: 1000rpx;

在微信小程序page文件夹中创建index文件夹，将上述4个文件写在index文件夹中，最后在app.json中配置路径，即可实现。

若需要源码，请联系博主