echars +Vue +serves动态处理数据

<template>
<div class="myChart" ref="myChart"></div>
</template>
import * as echarts from 'echarts'

export default {
	mounted () {
	    this.drawLine();
	  }
}
 methods: {
	drawLine() {
	      let myCharts = echarts.init(this.$refs.myChart)
	      // myCharts.setOption(this.option);
	      let dateArray = []
	      let trafficArray = []
	      let leftMoneyArray = []
	
	      this.listQuery.pageSize = this.listQuery.limit;
	      this.listLoading = true
	      let data = Object.assign({}, this.listQuery)
	      if (this.listQuery.date !== null){
	        data.date = this.listQuery.date.join(",")
	      }
	      getPageList(data).then((res) => {
	        this.list = res.data.records;
	        this.total = res.data.total;
	        this.list.forEach((record)=>{
	          console.log("1212wqweeq12", record)
	          dateArray.push(record.date)
	          trafficArray.push(record.traffic/1000000)
	          leftMoneyArray.push(record.leftMoney)
	        })
	        console.log("121212",dateArray)
	        console.log("121212",trafficArray)
	        console.log("121212",leftMoneyArray)
	        let option;
	        option = {
	          title: {
	            subtext: "单位（M）",
	            text: '流量使用记录'
	          },
	          tooltip: {
	            trigger: 'axis'
	          },
	          legend: {
	            data: ['使用流量', '余额']
	          },
	          grid: {
	            left: '3%',
	            right: '4%',
	            bottom: '3%',
	            containLabel: true
	          },
	          toolbox: {
	            feature: {
	              saveAsImage: {}
	            }
	          },
	          xAxis: {
	            type: 'category',
	            boundaryGap: false,
	            data: dateArray
	          },
	          yAxis: {
	            type: 'value'
	          },
	          series: [
	            {
	              name: '使用流量',
	              type: 'line',
	              stack: 'Total',
	              data: trafficArray
	            },
	            {
	              name: '余额',
	              type: 'line',
	              stack: 'Total',
	              data: leftMoneyArray
	            }]
	        }
	        option && myCharts.setOption(option);
	        // Just to simulate the time of the request
	        setTimeout(() => {
	          this.listLoading = false;
	        }, 1000);
	      });
	    }
	   }