<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-pickerv-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>

總結

以上是生活随笔為你收集整理的工作163:eachrt修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。