小程序使用echarts刚启动项目时显示 ,刷新显示页面不显示了,为什么 ?

小程序 文章 2022-03-04 18:20 2619 0 全屏看文

AI助手支持GPT4.0

小程序使用echarts刚启动项目时显示 ,刷新显示页面不显示了,为什么 ?When the applet uses echarts to start the project, it is displayed, and the refresh display page does not display, why?

小程序使用echarts刚启动项目时显示 ,刷新显示页面不显示了,为什么 ?

代码如下:

在 onLoad 中调用 getData 函数 (请后台请求数据 获取 thisYear 和lastYear 的值 ) 【thisYear 和lastYear 是图表Y轴的数据值

在开发工具中,刚打开这个项目时, 图表能正常加载出来; 可是 一点了刷新后,或从其他页面切换回来后,就不会显示了。

这是为什么。。。

前端不熟悉,望高手们 指教下。。。

// pages/index/index.jsimport * as echarts from '../../ec-canvas/echarts';let chart=nulllet 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()          },})

代码如下: 在 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还没渲染完 就给了数据了

再见,电脑崽:

你这明显是图表初始化执行时机早于数据请求了。

翔荣:,

-EOF-

AI助手支持GPT4.0


国内超级便宜服务器

摸鱼人热门新闻聚合

钻级赞助商 我要加入

开发者在线工具

第三方支付技术请加QQ群

相关文章
同一个人微信公众号,两个不同的微信号关注该公众号后获取的openid竟然一样??微信开放平台有Bug
蓝色生死恋医学刷题小程序
线上小程序 用户授权手机弹框卡死,无法关闭?
tabBar里面的icon的颜色如何设置或者改变?
小程序怎么判断是否重新进入小程序,或者有重新进入小程序一定会执行的方法?
随便看看
企业微信通讯录账号被管理员误/恶意删除,怎么办? 8495
问题? 8118
如何快速搭建抽奖助手小程序(无需代码知识) 5275
许涛 大哥在吗, 要解冻小程序的时候提示信息主体不一致, 能帮忙看下吗? 6547
小程序搜一搜全称搜索不显示 麻烦解决一下!谢谢 5837
我的小程序广告收款主体是个体工商户,每个月邮寄两次发票很是麻烦,我年底的时候打包邮寄一次可以么? 5498
如何解决渲染层网络错误Failed to load media? 16750
小程序找号找回 释放昵称? 2765
我的小程序广告主收入5301,实际进账4406,是怎么回事呀? 2635
删除部分微信用户个人数据的通知,怎么删除? 5808