<template><div><el-card><div slot="header" class="clearfix"><span>订单信息</span></div><!--样式控制全部 已经退回 待审核--><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="进行中" /><el-radio-button label="待结算" /><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"><!--调用查看的函数--><!--                          <router-link :to="{}">--><!--                          </router-link>--><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";
export default {name: "Infomation",mixins: [TableListMixin],components: {CustomTable},mounted() {let myChart = echarts.init(document.getElementById("main"));let myChart1 = echarts.init(document.getElementById("main1"));let option = {title: {text: "柱状图"},tooltip: {},legend: {data: ["销量"]},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20]}]};let option1 = {tooltip : {trigger: 'axis'},legend: {data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']},calculable : true,xAxis : [{type : 'category',boundaryGap : false,axisTick: {show: false},data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',axisTick: {show: false},name: '（人）'}],series : [{name:'邮件营销',type:'line',stack: '总量',data:[120, 132, 101, 134, 90, 230, 210]},{name:'联盟广告',type:'line',stack: '总量',data:[220, 182, 191, 234, 290, 330, 310]},{name:'视频广告',type:'line',stack: '总量',data:[150, 232, 201, 154, 190, 330, 410]},{name:'直接访问',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: [/*任务名称id*/{ prop: "id", label: "ID", width: "100", sortable: true },/*订单名称 name*/{ prop: "name", label: "订单名称", sortable: true },/*创建人*/{ prop: "client", label: "客户名称", sortable: true },/*创建时间*/{ prop: "username", label: "创建人", sortable: true },/*业务单元*/{ prop: "created_at", label: "创建时间", sortable: true },/*投放账号*/{ prop: "business_module", label: "业务单元", sortable: true },/*发布时间*/{ prop: "put_department", label: "投放部门", sortable: true },/*任务状态*/{ prop: "status_name", label: "订单状态", sortable: true },/*任务状态*/{ prop: "spread_data", label: "传播数据(万)", sortable: true }],/*绑定的taskTableData里面的数据*/TableData: [],url: {list: "/home/information"}};},methods: {handleView(scope) {this.$router.push({ path: "/list/analysis/" + scope.id });}}
};
</script>

运行结果