使用折线图进行数据处理,如果使用静态数据没有问题,使用后台获得的数据就无法替换原来的静态数据,下面的代码后台请求的数据是列表类型数据,但是数据无法使用,请教什么问题。
getData() {
let that = this
var AlarmMsg=[4,4,5]
var devicenum = '1222032091'
var data1_x=[]
var data1_y=[]
var data2_x=[]
var data2_y=[]
wx.request({
url: 'http://127.0.0.1:8000/wxdevicenum/'+devicenum,
success:function(res){
console.log(res);
// that.setData({
data1_x=res.data.datax;
data1_y=res.data.datat;
data2_x=res.data.datax;
data2_y=res.data.datah;
// });
console.log(data1_x);
}
})
console.log(data2_y)
barec1.setOption({
tooltip: {
trigger: 'axis'
},
renderAsImage: true, //支持渲染为图片模式
color: ["#41A4FF", "#37C461"], //图例图标颜色 曲线数据点颜色
legend: {
show: true,
itemGap: 25, //每个图例间的间隔
top: 20,
// bottom: 15,
x: 30, //水平安放位置,离容器左侧的距离 'left'
z: 100,
textStyle: {
color: '#A9A9A9' //'#383838'
},
},
grid: { //网格
top: 30,
left:25,
bottom: 5,
containLabel: true, //grid 区域是否包含坐标轴的刻度标签
},
xAxis: { //横坐标
type: 'category',
// name: '(天)', //横坐标名称
nameTextStyle: { //在name值存在下,设置name的样式
color: 'black',
fontStyle: 'normal',
fontWeight: 'bold',
},
nameLocation: 'start', //'end',
boundaryGap: false,
data: data1_x, //this.data.data1_x,
axisTick: {
show: false, //刻度线隐藏
},
axisLabel: {
textStyle: {
fontSize: 9,
color: '#f0f5f5'
}
}
},
yAxis: { //纵坐标
type: 'value',
position: 'left',
left: 20,
scale:true, //Y轴坐标值自适应
nameLocation: 'end', //'start'
textStyle:{
fontSize:9,
color:'#f0f5f6'
},
axisTick: {
show: false, //刻度线隐藏
inside : false, // 控制小标记是否在grid里
},
// splitNumber: 6, //坐标轴的分割段数
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: { //Y轴网格线
type: 'solid', //type: 'dashed'虚线, solid实线
width: 1,
color: '#ADD8E6',
}
},
axisLabel: { //y轴刻度
textStyle: {
fontSize: 9,
color: '#f0f5f6'
}
},
},
series: [{
type: 'line',
data: data1_y, //this.data.data1_y,
smooth: true,
symbol: 'roundRect',
itemStyle: {
normal: {
lineStyle: {
color: 'white',
width:1
}
}
}
}],
})
barec2.setOption({
tooltip: {
trigger: 'axis'
},
renderAsImage: true, //支持渲染为图片模式
color: ["#37C461"], //图例图标颜色
legend: {
show: true,
itemGap: 25, //每个图例间的间隔
top: 20,
x: 20, //水平安放位置,离容器左侧的距离 'left'
z: 100,
textStyle: {
color: '#37C461'
},
},
grid: { //网格
left: 25,
bottom: 5,
top: 30,
containLabel: true, //grid 区域是否包含坐标轴的刻度标签
},
xAxis: { //横坐标
type: 'category',
// name: '(小时)', //横坐标名称
nameTextStyle: { //在name值存在下,设置name的样式
color: '#FFBE46',
fontStyle: 'normal',
fontWeight: 'bold',
},
nameGap: 3,
nameLocation: 'end',//显示位置
boundaryGap: false,
data: data2_x, //this.data.data2_x,
axisTick: {
show: false, //刻度线隐藏
},
axisLabel: {
textStyle: {
fontSize: 9,
color: '#F5F5F5'
}
},
},
yAxis: { //纵坐标
type: 'value',
position: 'left',
left: 10,
scale:true,
axisTick: {
show: false, //刻度线隐藏
},
show: true,
lineStyle: {
type: 'solid'
}
},
axisLabel: {
textStyle: {
fontSize: 9,
color: '#F5F5F5'
}
},
},
series: [{
type: 'line',
data: data2_y, //this.data.data2_y,
smooth: true,
symbol: 'roundRect',
itemStyle: {
normal: {
lineStyle: {
color: 'white',
width:1
}
}
},
}],
})
data: {
ec1: {
onInit: function (canvas, width, height) {
barec1 = echarts.init(canvas, null, {
width: width,
height: height,
// devicePixelRatio: dpr
});
canvas.setChart(barec1);
return barec1;
}
},
ec2: {
// onInit:initChartHumi
onInit: function (canvas, width, height) {
barec2 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec2);
return barec2;
}
},
异步。