微信小程序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)最终效果