獲取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中配置路徑，即可實作，

若需要原始碼，請聯系博主