微信小程序echarts学习记录
微信小程序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)最终效果