在小程序中使用Echart圖表

在小程序中使用Echart圖表

• Echart UI構建（柱狀圖）
• Echart 假數據
• Echart 動態設置數據

柱狀圖UI示例

// Echart config，包括init data 和style及數據類型
    var option = {
      animation: false,//提升頁面加載速度，關閉echart的動畫
      grid: [
        //grid section UI
          ...
      ],
      xAxis: [
        //xAxis section UI
          ...
      ],
      yAxis: [
        //yAxis section UI
          ...
      ],
      series: [
        {
        //左側座標軸UI 
          ...
          data: [100, 100, 100, 100, 100],
        },
        {
        //左側柱狀圖 UI 及數據
          ...
          data: [66, 54, 87, 78, 87],
        },
        {
        //右側座標軸UI
          ...
          data: [100, 100, 100, 100, 100],
        },
        {
          //右側柱狀圖 UI 及數據
          ...
          data: [84, 87, 86, 76, 76],
        },
      ]
    }
    // 初始化Echart圖表UI
    function initChart(canvas, width, height) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      chart.setOption(option)
      return chart
    }

以上就是利用echart圖表插件在小程序中生成一個咱們須要的柱狀圖用以展現咱們須要表達給用戶的數據表。

固然，在實際的開發中，全部的數據都是經過獲取數據庫中的數據，而後根據數據生成，而不是寫死在series[]中，那麼如何將ajax或者其餘方式獲取到的數據傳入咱們的UI中呢？

Echart的文檔告訴咱們：

數據的動態更新

ECharts 由數據驅動，數據的改變驅動圖表展示的改變，所以動態數據的實現也變得異常簡單。
全部數據的更新都經過 setOption實現，你只須要定時獲取數據，setOption 填入數據，而不用考慮數據到底產生了那些變化，ECharts 會找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化。

也就是上面示例代碼中的這個方法

chart.setOption(option)

ok直接看代碼：

var hostTeamInfo = []//獲取的數據
option.series[1].data = hostTeamInfo//根據前文，設置左側的數據

根據小程序的指導文檔，這部分代碼須要在page()生命週期中完成，至因而在onLoad仍是onReady中，須要各位根據實際狀況來決定

效果圖：