前端工作小结32-添加echart折线图

<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-group
          v-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-column
            fixed="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>