vue echarts异步获取axios返回的数据-动态绑定数据

<template>
<div id="app" >
<div id="main" style="width:600px;height:300px;"></div>
</div>
</template>

<script>
//调用接口文档
import { info,getPoint,getOrderPoint,getOrderPrize } from "@/api/dashboard";
//如果没有全局引入echarts 需要在当前页面引入
const echarts = require('echarts');
export default {
data(){
return{
charts:'',
//echarts data数据源
opinionData:[]
}
},
created(){
this.getlist()
},
methods:{
drawLine(id) {
this.charts =echarts.init(document.getElementById(id))
this.charts.setOption({
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["1","2","3","4","5"]
},
yAxis: {
type: 'value'
},

series: [{
name: '近七日收益',
type: 'line',
stack: '总量',
data: this.opinionData
}]
})
},
getlist(){
getOrderPoint().then(response=>{
//返回数据的时候将数据绑定到echarts data数据源上 并调用echarts函数
for(let i in response.data.data.weekDashBoardOrderVos){
this.opinionData.push(response.data.data.weekDashBoardOrderVos[i].orderCount)
}
console.log(this.opinionData)
this.drawLine('main')
})
}
}
}
</script>```