代码如下:
在 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()
},
})
请问楼主这个问题后来解决了吗
就是你的echarts还没渲染完 就给了数据了
你这明显是图表初始化执行时机早于数据请求了。