前端工作小结53-echart修改

<template>
    <div>
      <el-card>
        <el-card>
          <time-selects @GetTime="GetTime"></time-selects>
          <!--第一步 页面-->
          <div id="main" :style="{ width: '1000px', height: '300px' }"></div>
          <div id="main1" :style="{ width: '1000px', height: '300px' }"></div>
        </el-card>
      </el-card>
   <!--     <el-card>
            <div slot="header" class="clearfix">
                <span>订单信息</span>
            </div>
            <el-form ref="form" :model="form" size="medium">
                <el-form-item label="任务名称" :label-width="formLabelWidth">
                    <el-input v-model="form.order.name" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" size="medium">
                <el-form-item label="客户名称" :label-width="formLabelWidth">
                    <el-input v-model="form.order.client" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" size="medium">
                <el-form-item label="订单编号" :label-width="formLabelWidth">
                    <el-input v-model="form.order.order_number" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" size="medium">
                <el-form-item label="业务单元" :label-width="formLabelWidth">
                    <el-input v-model="form.order.business_module" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" size="medium">
                <el-form-item label="订单金额" :label-width="formLabelWidth">
                    <el-input v-model="form.order.money" autocomplete="off"/>
                </el-form-item>
            </el-form>
        </el-card>-->
     <!-- <el-card>
        <div id="main" :style="{ width: '1000px', height: '300px' }"></div>
        <div id="main1" :style="{ width: '1000px', height: '300px' }"></div>
      </el-card>
        <el-card>
            <div v-for="item in form.departmentList" :key="item.department.id">
                <span>{{item.department.name}}</span>
                <div v-for="row in item.accounts">
                    <el-form ref="form" :model="row" size="medium">
                        <span><img :src="row.account.pavg" alt="">{{row.account.name}}</span>
                        <el-form-item label="任务名称" label-width="140px">
                            <el-input v-model="row.name" autocomplete="off" disabled/>
                        </el-form-item>
                        <div class="block">
                            <el-form-item label="发布日期" :label-width="formLabelWidth">
                                <el-date-picker
                                        v-model="row.start_time"
                                        type="date"
                                        disabled
                                >
                                </el-date-picker>
                            </el-form-item>
                        </div>
                        <el-form-item label="传播量" :label-width="formLabelWidth">
                            <el-input v-model="form.order.name" autocomplete="off" disabled/>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-card>-->
    </div>
</template>
<script>
/*第二步引入eachart 引入时间组件*/
import TimeSelects from "@/views/Detaildata/DetailApp/components/TimeSelects";
import echarts from "echarts";
import {getAction} from "@/api";
    export default {
      components: {
        TimeSelects
      },
        props: {
            id: {
                type: String,
            }
        },
        data() {
            return {
                value1: '',
                form: {},
                formLabelWidth: "140px",
                url: {
                    view: "/home/detail"
                },
              StartTime:'',
              EndTime:'',
              ArrUsername:[1,2,3],
              DepartMents:[],
              option:[],
            }
        },
        created() {
          this.detail(this.id);
          /* this.detail(this.id);*/
        },
      mounted() {
        this.GetEchart();
      },
      methods:{
        detail(id) {
          getAction(this.url.view + '/' + id).then(res => {
            this.form = res.data;
          })
        },
        GetEchart(){
          console.log(1)
          let myChart = echarts.init(document.getElementById("main"));
          let option = {
            xAxis: {
              type: 'category',
              data: this.DepartMents
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [120, 200],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              }
            }]
          };
          myChart.setOption(option);
          console.log(option)
        },
        GetTime(val){
          /*数据转换为时间戳*/
          console.log(2)
          this.StartTime=val[0].getTime()
          this.EndTime=val[1].getTime()
          getAction("/home/detail/"+this.id,{start:this.StartTime,stop:this.EndTime})
          .then(res=>{
            console.log(res)
            let ArrUsername=[]
            let DepartMent=[]
            res.data.account_amount.map((value,index)=>{
              ArrUsername.push(value.name)
             /* console.log(ArrUsername)*/
            })
            res.data.detpartment_amount.map((value,index)=>{
              DepartMent.push(value.name)
              /*console.log(DepartMent)*/
              this.DepartMents=DepartMent
             /* this.DepartMents=["2","2"]*/
             /* console.log(this.DepartMents)*/
            })
           /* console.log(this.DepartMents)*/
          this.GetEchart()
          })
        }
      },
    }
</script>
<style lang="scss"></style>