小程序开发中遇到的问题(6-2)-echarts异步加载数据
2018-07-11 09:57:39
echarts官网的的小程序的例子只举例了同步的数据,异步的数据,不知道该怎么弄了。 而且后台取回来的数据还需要处理才能渲染到图表上, 该什么设置呢。最近做了这个项目,也实现了功能
上一篇已经实现了了引入echarts, 但是我们做小程序不可能是静态数据, 渲染图表的数据,一般都是我们从后台领取后,才能进行处理和渲染。 显然,官网的例子,已经不能实现。那怎么实现
第一步 wxml 中添加代码
<view class="chart-box"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> </view>
第二部,设置css。 这里需要设置chart-box和ec-canvas的高度, 否则渲染出来的图表是空白。既不报错,也不现实
.chart-box, ec-canvas{ width: 100%; height: 500px; }
第三部,就应该写js了
import Api from '../../../utils/config/api.js'; import * as echarts from '../../../ec-canvas/echarts'; const app = getApp(); Page({ data: { items:{}, ecBar: { lazyLoad: true // 延迟加载 }, ecScatter: { lazyLoad: true }, }, onLoad: function () { var that = this; wx.showLoading(); that.choseidata(); //请求数据 //联运图 that.barComponent = that.selectComponent('#mychart-dom-multi-bar'); //ltv 图 that.scaComponnet = that.selectComponent('#mychart-dom-multi-scatter'); }, init_bar: function (obj) { //联运图表 this.barComponent.init((canvas, width, height) => { // 初始化图表 const barChart = echarts.init(canvas, null, { width: 375, height: height }); var option = this.chartinfo(obj); // chartinfo 是我处理后台请求数据后处理数据的函数 barChart.setOption(option); return barChart; }); }, init_app: function (obj) { //app图表 //app 图 var that = this; that.ecComponent = that.selectComponent('#mychart-dom-bar'); that.ecComponent.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); var option = that.chartinfo(obj); chart.setOption(option); return chart; }); }, choseidata: function (val) { var that = this; let _param = { //请求参数 game_id: "", enddate: "" } Api.data_daily(_param).then(res => { //请求数据,这里是被自己封装过 wx.request if (rest.data.flag) { let _data = rest.data.data; that.init_bar(_data); } }); }, chartinfo: function (chartobj) { var lineColor = ['#ffc751', '#9692ff', '#419cf7', '#f4a264', '#26b99a', '#4162ff', '#ff6e72']; var legenddata = chartobj.legend, //标识 datetime1 = chartobj.project, //横坐标 charttitle = chartobj.text, //标题 subtxt = chartobj.subtext, //副标题 datalianyun = chartobj.data, //数据 newchartdata = []; for (var key in datalianyun) { //修改json对象的属性名称 var lxchartdata = {}; lxchartdata.name = datalianyun[key]['title']; lxchartdata.type = 'line'; lxchartdata.smooth = true; lxchartdata.data = datalianyun[key]['xData'].split(","); lxchartdata.itemStyle = { //设置颜色 normal: { color: lineColor[key] } }; if (key == '1' || key == '3') { //kpi完成情况 lxchartdata.yAxisIndex = 1; } newchartdata.push(lxchartdata) } var option = this.drawchart(charttitle, subtxt, legenddata, datetime1, newchartdata); return option; }, drawchart: function (title, subtxt, legenddata, time1, datass) { //联运图option var option = { title: { text: title, subtext: subtxt, top: 15, subtextStyle: { textAlign: 'center' }, x: 'center', textStyle: { textAlign: 'center', fontSize: 16 } }, tooltip: { trigger: 'axis', formatter: '{b} <br />{a0}: {c0}<br />{a1}: {c1}%<br />{a2}: {c2}<br />{a3}: {c3}%<br />{a4}: {c4}' }, toolbox: { feature: { saveAsImage: {} } }, legend: { data: legenddata, //字段名字标识符 top: 60, bottom: 10, }, grid: { top: 130, left: 10, right: 10, bottom: 20, containLabel: true }, xAxis: [{ type: 'category', data: time1, //x洲 axisPointer: { type: 'shadow' } }], yAxis: [{ type: 'value', name: '', min: 0, plitNumber: 5, splitLine: { show: true, // 改变轴线颜色 lineStyle: { // 使用深浅的间隔色 color: ['#f2f2f2'] } }, axisLabel: { formatter: '{value}' } }, { type: 'value', // interval: 20, plitNumber: 5, splitLine: { show: true, // 改变轴线颜色 lineStyle: { // 使用深浅的间隔色 color: ['#f2f2f2'] } }, axisLabel: { formatter: '{value}%' } }], series: datass //所有数据,json数组 }; return option; }, });
echarts在小程序中提示[sm]:72 Uncaught (in promise) TypeError: Cannot read property 'init' of null
这个提示,表示echart 没有获取到dom, 所以 一定要在that.selectComponent之前。
如果实在要实现选择性的加载, 可以用lazyload 进行处理