Vue 中使用echart循环遍历动态使用x，y坐标轴

<template>
<el-container class="page-wrap">
    <el-header class="page-nav" height="30px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>报表统计</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main class="page-main">
       <el-row :gutter="20" type="flex" justify="center">
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">             
              <div style="padding: 14px;">
                <span>今日访问量pv</span>
                <div class="bottom clearfix">
                  <div class="time" style="font-size: 20px;text-align:center">{{ todayPvCount }}</div>
                  <!--<el-button type="text" style="float:right" class="button">操作按钮</el-button>-->
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">             
              <div style="padding: 14px;">
                <span>今日访问量uv</span>
                <div class="bottom clearfix">
                   <div class="time" style="font-size: 20px;text-align:center">{{ todayUvCount }}</div>
                  <!--<el-button type="text" class="button">操作按钮</el-button>-->
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">             
              <div style="padding: 14px;">
                <span>近7天访问量峰值</span>
                <div class="bottom clearfix">
                   <div class="time" style="font-size: 20px;text-align:center">时间：{{laterTime}} 数量：{{ laterCount }}</div>
                  <!---<el-button type="text" class="button">操作按钮</el-button>-->
                </div>
              </div>
            </el-card>
          </el-col>
       </el-row>
       <!--<el-row :gutter="20" >
         <el-card class="box-card" style="float: left; border-width:2px" shadow="always" v-for = "w in datas.length" :key="w">
            <div slot="header" class="clearfix">
                <span>{{ datas[w-1].id }} </span>
                <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
            </div>
        </el-card>
     </el-row>-->
      <el-row :gutter="30">
        <el-card class="box-card" style="float: left"  shadow="always">
          <div id="chartDay" :style="{width: '300px', height: '300px'}"></div>
        </el-card>      
      </el-row>
    </el-main>
  </el-container>
</template>
<script>

import DxInput from "../../../Common/ui/unit/dx-input";
import http from '../../../../assets/js/http'

export default {
    components : {
        DxInput,
    },
    data (){
        return {
          datas: [
              {"id" : "one"},
              {"id" : "two"}
          ],
          todayPvCount:0,
          todayUvCount:0,
          laterTime:'',
          laterCount:0,
          countMonth:[],
          currentDate: new Date()
        }
    },
    methods: {
        test(){
          let date = new Date();
          let dates = moment(date).format('YYYY-MM-DD HH:mm:ss');
          console.log(dates);
        },
       
        getDayCount(){
          let data = {}
           data = {
             params: {
                 inputTime: "2019-03-13",
                 flag: "pv"
             }
           },
           this.apiGet('/jboot/elastic/queryCountForDay',data).then((res) =>{
              if(res.state === "ok"){                
                 this.drawDayLine(res.data)
              }else{
                 _g.toastMsg('warning', "请求失败")
              }
           })
        },
       
        drawDayLine(data){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chartDay'));
            // 绘制图表
            let datas = data;
            let xdata=[];
            var ydata=[];
            for(var i = 0;i<datas.length;i++){
                      xdata.push(moment(datas[i].inputTime ).format('MM-DD'));
                      ydata.push(datas[i].count);
            };        
            myChart.setOption({
                title: { text: '每日数据量统计' },
                tooltip: {},
                xAxis: {              
                  data:xdata
                },
                yAxis: {},
                series: [{
                    name: '访问量',
                    type: 'bar',
                    data: ydata
                }]
            });
       }
       

    },
    created(){
      
         this.test();
       
    },
    mounted(){
          this.getDayCount();
          
    },
     mixins: [http]
}
</script>
<style scoped>

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  .time {
    font-size: 13px;
    color: #FF0000;
   
  }
</style>