就是微信小程式中使用echarts-for-weixin

1.wx.request

首先講講wx.request的使用：

wx.request({
  url: 'test.php', //僅為示例，並非真實的介面地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 預設值
  },
  success (res) {
    console.log(res.data)
  }
})

2.微信小程式使用echarts-for-weixin非同步更新資料

後端程式碼：

router.all('/echarts',function (req,res) {

    // 連線到mysql
    var connection = mysql.createConnection({      //建立mysql例項
        host:'127.0.0.1',
        port:'3306',
        user:'root',
        password:'',
        database:'test'
    });
    connection.connect();
    var sql = 'SELECT * FROM tvalues1';

    // 轉換格式
    var i;
    jsonData = {}
    xdays = []
    yvalues = []

    connection.query(sql, function (err,result) {
        if(err){
            console.log('[SELECT ERROR]:',err.message);
        }
        //str1 = JSON.stringify(result);
        //str = JSON.parse(str1);
        //資料庫查詢的資料儲存在result中，但瀏覽器並不能直接讀取result中的結果，因此需要用JSON進行解析
        //console.log(result);   //資料庫查詢結果返回到result中
       // console.log(str);
        //console.log(str1);
        /* str資料(json格式)：
        *[{"id":1,"tdsvalue":"31"},{"id":2,"tdsvalue":"42"},{"id":3,"tdsvalue":"23"},
        * {"id":4,"":"44"},{"id":5,"tdsvalue":"55"},{"id":6,"tdsvalue":"36"}]
        * result/str1資料是 [ { id: 1, tdsvalue: '37' },{ id: 2, tdsvalue: '19' },{ id: 3, tdsvalue: '18' },
        * { id:4,tdsvalue: '17' }, { id: 5, tdsvalue: '17' }, { id: 6, tdsvalue: '15' },
        * { id: 7, tdsvalue: '16' },{ id: 8, tdsvalue: '17' },{ id: 9, tdsvalue: '18' } ]
        * */
        console.log(result);
        // 想要轉換的格式:{ xdays: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],yvalues: [ '37', '19', '18', '17', '17', '15', '16', '17', '18' ] }
 
        for(i=0;i<result.length;i++){

            xdays.push(result[i].id);
            yvalues.push(result[i].tdsvalue);

        }

       // console.log('1x'+xdays);
        //console.log('1y'+yvalues);

        jsonData['xdays']=xdays;
        jsonData['yvalues'] = yvalues;

        res.send(jsonData);
        
       // console.log(jsonData);
      //  console.log(jsonData.xdays);
       // console.log(typeof(jsonData.xdays));
       // console.log(jsonData.yvalues);
      //  console.log(typeof(jsonData.yvalues));
       // console.log(typeof(jsonData));
    });
    connection.end();
});
 

後端是用Nodejs的Express框架，主要是連線資料庫，取出資料，然後資料格式轉換，其中很多註釋是為了弄清楚資料格式。

index.js

import * as echarts from '../../ec-canvas/echarts'; //引入echarts.js
var dataList = [];

var app1 = {
  xday: [],
  yvalue: []
};

Page({
	/**
   * 頁面的初始資料
   */
  data: {
    ec: {
      lazyLoad: true // 延遲載入
    },
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

    this.echartsComponnet = this.selectComponent('#mychart-dom-line');
    this.getData(); //獲取資料
  },
  getData: function () {
  	/**
  	 * 此處的操作：
  	 * 獲取資料json
  	 */
    wx.request({
      url: 'http://localhost:3000/users/echarts', //僅為示例，並非真實的介面地址
      method: 'get',
      data:{},
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      success: (res) => {

		// 返回的res.data為{ xdays: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],yvalues: [ '37', '19', '18', '17', '17', '15', '16', '17', '18' ] }
        console.log(res.data);

        console.log("資料傳輸成功");

        app1.xday = res.data.xdays;
        app1.yvalue = res.data.yvalues;

        console.log(app1.xday);
        console.log(app1.yvalue);

        this.init_echarts();//初始化圖表
      }
    });
  },
  //初始化圖表
  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化圖表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption());
      // 注意這裡一定要返回 chart 例項，否則會影響事件處理等
      return Chart;
    });
  },
  getOption: function () {

    // 指定圖表的配置項和資料
    var option = {
      xAxis: {
        data: app1.xday
      },
      yAxis: {

      },
      series: [{
        data: app1.yvalue,
        type: 'line'
      }]
    }
    return option;
  },

})
 

index.json

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

index.wxml

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

index.wxss

/**index.wxss**/
ec-canvas {
  width: 100%;
  height: 100%;
}

上面檔案的目錄結構是在小程式的pages/lines下面，主要程式碼時在index.js中。

結果圖：