代码如下:
在 onLoad 中调用 getData 函数 (请后台请求数据 获取 thisYear 和lastYear 的值 ) 【thisYear 和lastYear 是图表Y轴的数据值】
在开发工具中,刚打开这个项目时, 图表能正常加载出来; 可是 一点了刷新后,或从其他页面切换回来后,就不会显示了。
这是为什么。。。
前端不熟悉,望高手们 指教下。。。
// pages/index/index.jsimport * as echarts from '../../ec-canvas/echarts';let chart=null; let thisYear = null;let lastYear = null;// 图表数据 function getData(){ wx.request({ url: 'http://127.0.0.1:5000/index', method:"GET", success:function(res){ console.log(res.data) thisYear = res.data.thisYearData lastYear = res.data.lastYearData } })}// 图表配置参数 函数function getOption(){ return { title: { text: '年度销售', textStyle:{ color:'#987436', fontStyle:'italic', fontSize: 15 } }, tooltip: { trigger: 'axis' }, legend: { data: ['LastYear', 'ThisYear'] }, xAxis: [ { type: 'category', axisLabel: { interval:0, rotate:40, }, axisTick: { alignWithLabel: true }, data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'LastYear', type: 'bar', data: lastYear }, { name: 'ThisYear', type: 'bar', data: thisYear } ] }}function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); var option = getOption() // getOption() 图表配置函数 chart.setOption(option); return chart; }Page({ /** * 页面的初始数据 */ data: { ec:{ onInit: initChart } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { getData() },})
就是你的echarts还没渲染完 就给了数据了