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

小程序 文章 2022-03-04 18:20 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-