微信小程序echarts學習記錄——曲線圖

需要在微信小程序中使用曲線圖來展示數據，這裏使用echarts插件來畫曲線圖

1、下載echarts組件

首先，下載echarts組件，下載地址https://github.com/ecomfe/echarts-for-weixin

2、引入echarts組件

下載好後，將下載文件中 ec-canvas目錄下的文件拷貝到小程序的目錄中。

然後在需要的頁面引入即可。

3、開始在小程序中使用echarts組件畫曲線圖

1）在頁面開啟使用echarts

在.json頁面的usingComponents裏面引入echarts組件，如下：

2）在js文件中引入echarts

在.js文件中引入echarts組件，如下：

3）前端頁面使用echarts元素

在.wxml文件中，echarts創建了一個 組件，內容如下

其中 ec 是一個ECharts在 index.js 中定義的對象，它使得圖表能夠在頁面加載後被初始化並設置

4）開始編寫曲線圖

在.js文件中編寫方法，如下：

var option = {
  color: ["#999999"],
  legend: {
    data: [‘測量身高‘],
    left: ‘right‘,
    z: 100
  },
  grid: {
    containLabel: 
 
true,
    left: ‘5%‘,
    right: ‘5%‘
  },
  tooltip: {
    show: true,
    trigger: ‘axis‘,
    // formatter: "周數:{b}\n增重:{c}",
    position: function (pos, params, el, elRect, size) {
      var obj = { top: 100 };
      obj[[‘left‘, ‘right‘][+(pos[0] < size.viewSize[0] / 3)]] = 30;
      return
 
 obj;
    },
  },
  xAxis: {
    type: ‘category‘,
    boundaryGap: false,
    data: [],
    show: true,
  },
  yAxis: {
    x: ‘center‘,
    type: ‘value‘,
    name: ‘身高(厘米)‘,
    splitLine: {
      lineStyle: {
        type: ‘dashed‘
      }
    },
    min:45,
    max:135,
    interval: 5,
    // show: false
  },
  series: [{
    name: ‘建議增長上限‘,
    type: ‘line‘,
    smooth: true,
    data: [],
    connectNulls: true
  }, {
    name: ‘測量身高‘,
    type: ‘line‘,
    smooth: true,
    data: [],
    connectNulls: true
  }, {
    name: ‘建議增長下限‘,
    type: ‘line‘,
    smooth: true,
    data: [],
    connectNulls: true
  }],
};

function initChart(canvas, width, height) {
  var windowWidth = 320;
  try {
    var res = wx.getSystemInfoSync();
    windowWidth = res.windowWidth;
  } catch (e) { }
  lineChart = echarts.init(canvas, null, {
    width: windowWidth,
    height: 480
  });
  canvas.setChart(lineChart);
  lineChart.setOption(option);
  return lineChart;
}

data: {
image_height: 480,
    image_width: 0,
    ec: {
      onInit: initChart
    },
}

drawImage: function (data, that) {
    var windowWidth = 320;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) { }
    that.setData({
      image_width: windowWidth
    })
    let gravidaInfo = wxcache.get(sessionKey.gravidaInfo)
    var category = [];
    for (var i = 0; i < 49; i++) category.push(i == 0 ? (i + "月") : i);
    let series = [{
      name: ‘建議增長上限‘,
      data: ‘‘
    }, {
      name: ‘測量身高‘,
      data: data
    }, {
      name: ‘建議增長下限‘,
      data: ‘‘
    }];
    setTimeout(function () {
      lineChart.setOption({
        xAxis: {
          data: category
        },
        series: series
      });
    }, 500)
  },

onShow: function() {
  let that = this
  that.drawImage(Stature, this);
}

5)最終效果

微信小程序echarts學習記錄