最近在用Echarts绘制一些图表,但是在使用的过程中有这样一个问题:我们要展示的数据都是从后端获取的,所以展示的数据当然也要是从后端获取的。但是我们看到官网的实例data都是固定的,本来觉得挺简单的,就是将后端获取到的数据赋值给全局变量temp,然后data:this.temp
代码:
//调用接口
_getOneWeektrans(){
getOneWeektrans().then((res)=>{
let data=res.data;
for(var i=0;i<data.length;i++){
this.date[i]=data[i].time; //date是横坐标的数据
this.count[i]=data[i].count; //count是纵坐标的数据
}
})
this.drawLine(); //绘制曲线图
},
以横坐标为例:
xAxis: {
type: 'category',
data:this.date, //横坐标数据
axisTick:{ //坐标轴刻度设置
show:true
},
axisLabel:{ //设置x轴文字样式
color:'#888',
fontSize: 14 ,
},
axisLine:{
show:true,
lineStyle:{
color:'#888'
}
}
},
但是结果是这样:(纵坐标目前是静态数据)
横坐标的数据并没有展示出来,后来上网查了很久,关于展示后端数据
于是我就把绘制图像的函数放在了调用接口里面,数据就展示出来了(横纵坐标都是动态数据)
(就是把 this.drawLine();的位置改了一下)
//获取近一周内的交易量
_getOneWeektrans(){
getOneWeektrans().then((res)=>{
let data=res.data;
for(var i=0;i<data.length;i++){
this.date[i]=data[i].time;
this.count[i]=data[i].count;
}
this.drawLine();
})
},