可以與後臺資料互動

一、正常流程（抄Echart官方的）

1、index.json 配置如下：

{
   "usingComponents": {
        "ec-canvas": "../../ec-canvas/ec-canvas"
   }
}

2、index.wxml 中，建立了一個 元件，內容如下：


<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec='{{ec}}'></ec-canvas>

3、其中 ec 是一個我們在 index.js 中定義的物件，它使得圖表能夠在頁面載入後被初始化並設定。index.js 的結構如下：

import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});
 

這對於所有 ECharts 圖表都是通用的，使用者只需要修改上面 option 的內容，即可改變圖表。option 的使用方法參見 ECharts 配置項文件。對於不熟悉 ECharts 的使用者，可以參見 5 分鐘上手 ECharts 教程。

完整的例子請參見 ecomfe/echarts-for-weixin 專案。

2、通過後臺數據進行渲染

1、初始化

import * as echarts from '../../ec-canvas/echarts';
// 初始化圖表
var charto = null;
var weightCanvasone = null;
function initCharto(canvas, width, height) {
  charto = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(charto);
  weightCanvasone = canvas;
  return charto;
}

Page({
    data:{
        eco: {
            onInit : initCharto
        },
    }
    onLoad:{
        //由於我的載入順序原因，出了這個判斷。可以自行修
    }
})
 

2、獲取資料，渲染

wx.request({
      url: '後臺URL',
      method: 'POST',
      data: {
        interId: '30006',
        version: 1,
        authKey: wx.getStorageSync('authKey'),
        method: 'w-chart',
      },
      success: function (res) {
        console.info('====== w-chart ======')
        console.info(res)
        if (res.data.status == '00') {
          that.setData({
            lastWeight: res.data.lastWeight,
            wChart: res.data.chart
          })
            //資料處理
            var x = [];
            var y = [];
            for (let i = 0; i < that.data.wChart.length; i++) {
            x[i] = that.data.wChart[i][0];
            y[i] = that.data.wChart[i][1];
            }
            var optionone = { 
                //資料在這裡渲染
            };
            that.data.chart1 = optionone;
            that.drawCharto = () => {
                    charto.setOption(that.data.chart1);
                    weightCanvasone.setChart(charto);
             }
        }
      }
})

三、總結

1、希望大家先用官方配置一遍再嘗試使用後臺資料渲染，
2、「 option 」圖表配置需要後臺資料，所以需要將其獨立出來處理。

對你有幫助的話，記得點贊收藏，你的支援是對我最大的鼓勵~！