日期+列表+折线图

#1、分析：

       1.1日期：
             日：选项为日的时候，右边日期选择YYYY-MM-DD,折线图显示当天的24小时
             周：选择为周的时候，右边日期选择YYYY-MM-DD,折线图显示当前日期往前6天
             月：选择为月的时候，右边日期选择月份，折线图显示选择月份的30天的数据
             折线图：最开始默认显示所有的平台信息，搜索框选择公司查询后，折线图显示该公司的数据。或者点击列表里面的详情按钮，折线图也可以显示该公司的数据。

 

#2、代码分析，使用iview的框架

<template>

<div class="content-box clearfix">

<Row>

<Col

span="18"

style="border: 1px solid #d9e1ef;height:800px;padding-right:10px;padding-left:10px;padding-top:30px;"

>

<chart :option="option" style="height:600px;width:100%" ref="mychart"></chart>

</Col>

<Col

span="6"

style="border-right:1px solid #d9e1ef;border-top:1px solid #d9e1ef;border-bottom:1px solid #d9e1ef;padding:15px;height:800px;"

>

<Form ref="formInline" :label-width="80">

<FormItem label="统计周期" style="margin:0px;">

<Select v-model="form.type" @on-change="changeDateType" style="max-width: 99px;">

<Option value="day">日</Option>

<Option value="week">周</Option>

<Option value="month">月</Option>

</Select>

<DatePicker

:type="dateType"

v-model="form.date"

placeholder="请选择日期"

style="width:auto;"

@o