微信小程序echarts學習記錄

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

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

一、下載echarts組件

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

二、引入echarts組件

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

而後在須要的頁面引入便可。

三、開始在小程序中使用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)最終效果