问题描述
新手求教,Vue中用Echarts做折线图,数据是后台Ajax传过来的,可是数据根本不显示,请问这是怎么回事?
问题出现的环境背景及自己尝试过哪些方法
数据是后台Ajax传过来的,后台接口用Django写的,通过props传给子组件,子组价中也接受得到数据,可是传到Echarts的data中数据就失效了?
相关代码
export default {
props: {
time: {
type: Array
},
stock: {
type: Array
}
},
data: function () {
return {
myChart: '',
option: {
title: {
text: '库存变化表'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.time
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 件'
},
axisPointer: {
snap: true
}
},
series: [
{
name: '库存',
type: 'line',
color: 'green',
smooth: true,
data: this.stock
}
]
}
}
},
created () {
},
mounted () {
this.drawLine()
},
methods: {
drawLine: function () {
this.myChart = this.$echarts.init(document.getElementById('chart'))
this.myChart.setOption(this.option)
}
}
}
你期待的结果是什么?实际看到的错误信息又是什么?
没有任何报错信息,正常结果是这样的:
页面刷新后: