工作136:eachrt
生活随笔
收集整理的這篇文章主要介紹了
工作136:eachrt
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<template><div><el-card><div slot="header" class="clearfix"><span>訂單信息</span></div><!--樣式控制全部 已經(jīng)退回 待審核--><el-row><el-radio-group v-model="query.status" size="small"><el-radio-button label="全部" /><el-radio-button label="已退回" /><el-radio-button label="待審核" /><el-radio-button label="待接收" /><el-radio-button label="進(jìn)行中" /><el-radio-button label="待結(jié)算" /><el-radio-button label="已完成" /></el-radio-group><!--樣式控制全部 全部 昨日--><el-radio-groupv-model="query.timeSpan"size="small"style="float: right"><el-radio-button label="全部" /><el-radio-button label="昨日" /><el-radio-button label="近七日" /><el-radio-button label="近三十日" /></el-radio-group></el-row><!--引入custom組件--><custom-table@size-changes="list"@pagination-change="list":data="tableData":columns="columns":pagination="pagination"><template v-slot:action><el-table-columnfixed="right"header-align="center"label="操作"width="100"><template slot-scope="scope"><el-button type="text" @click="handleView(scope.row)">查看詳情</el-button></template></el-table-column></template></custom-table></el-card><el-card><div id="main" :style="{ width: '300px', height: '300px' }"></div><div id="main1" :style="{ width: '300px', height: '300px' }"></div></el-card></div>
</template>
<script>
/*引入eachart*/
import echarts from "echarts";
import CustomTable from "@/component/table/CustomTable";
import { TableListMixin } from "@/component/table/TableMixin";
import {getAction} from "@/api";
export default {name: "Infomation",mixins: [TableListMixin],components: {CustomTable},mounted() {let myChart = echarts.init(document.getElementById("main"));let myChart1 = echarts.init(document.getElementById("main1"));getAction("/home/market_data").then(res=>{console.log(res)this.option=res.data.itemsconsole.log(this.option)for(var i in this.option){this.option1=this.option[i]}})let option = {title: {text: "柱狀圖"},tooltip: {},legend: {data: ["銷(xiāo)量"]},xAxis: {data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]},yAxis: {},series: [{name: "銷(xiāo)量",type: "bar",data: [5, 20, 36, 10, 10, 20]}]};let option1 = {tooltip : {trigger: 'axis'},legend: {data:['郵件營(yíng)銷(xiāo)','聯(lián)盟廣告','視頻廣告','直接訪問(wèn)','搜索引擎']},calculable : true,xAxis : [{type : 'category',boundaryGap : false,axisTick: {show: false},data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',axisTick: {show: false},name: '(人)'}],series : [{name:'郵件營(yíng)銷(xiāo)',type:'line',stack: '總量',data:[120, 132, 101, 134, 90, 230, 210]},{name:'聯(lián)盟廣告',type:'line',stack: '總量',data:[220, 182, 191, 234, 290, 330, 310]},{name:'視頻廣告',type:'line',stack: '總量',data:[150, 232, 201, 154, 190, 330, 410]},{name:'直接訪問(wèn)',type:'line',stack: '總量',data:[320, 332, 301, 334, 390, 330, 320]},{name:'搜索引擎',type:'line',stack: '總量',data:[820, 932, 901, 934, 1290, 1330, 1320]}]};myChart.setOption(option);myChart1.setOption(option1);},data() {return {/*表頭*/columns: [/*任務(wù)名稱id*/{ prop: "id", label: "ID", width: "100", sortable: true },/*訂單名稱 name*/{ prop: "name", label: "訂單名稱", sortable: true },/*創(chuàng)建人*/{ prop: "client", label: "客戶名稱", sortable: true },/*創(chuàng)建時(shí)間*/{ prop: "username", label: "創(chuàng)建人", sortable: true },/*業(yè)務(wù)單元*/{ prop: "created_at", label: "創(chuàng)建時(shí)間", sortable: true },/*投放賬號(hào)*/{ prop: "business_module", label: "業(yè)務(wù)單元", sortable: true },/*發(fā)布時(shí)間*/{ prop: "put_department", label: "投放部門(mén)", sortable: true },/*任務(wù)狀態(tài)*/{ prop: "status_name", label: "訂單狀態(tài)", sortable: true },/*任務(wù)狀態(tài)*/{ prop: "spread_data", label: "傳播數(shù)據(jù)(萬(wàn))", sortable: true }],/*綁定的taskTableData里面的數(shù)據(jù)*/TableData: [],url: {list: "/home/information"}};},methods: {handleView(scope) {this.$router.push({ path: "/list/analysis/" + scope.id });}}
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/table";</style>
?
總結(jié)
以上是生活随笔為你收集整理的工作136:eachrt的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 工作68:子路由跳转
- 下一篇: 德芙网络营销策略ppt_看德芙网络营销策