当前位置：公众IT > 技术文章 > 小程序使用echarts刚启动项目时显示，刷新显示页面不显示了，为什么？

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

新闻来源：互联网资料整理发布时间：2023/4/5 13:09:53 共计：4603 浏览

前言：

2小时前小编发现微信小程序用户：【過眼雲煙】提出了一个关于“小程序使用echarts刚启动项目时显示，刷新显示页面不显示了，为什么？”的问题,在问题中开发者過眼雲煙对该问题做了如下阐述：

问题类型：

其他开发相关的问题:

问题描述：

代码如下：

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

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

这是为什么。。。

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

// pages/index/index.js
import * 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()
    },

})?