日期+列表+折线图

#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;"

@on-change="changeXData"

></DatePicker>

</FormItem>

<FormItem label="平台名称">

<Select v-model="form.companyId" value @on-change="changeLegend">

<Option value="0">全部</Option>

<Option

v-for="item in companys"

:value="item.companyId"

:key="item.companyId"

>{{ item.companyName }}</Option>

</Select>

</FormItem>

<FormItem>

<Row>

<Col span="12" style="padding-right:5px;">

<Button type="primary" style="width:100%" @click="queryData">查 询</Button>

</Col>

<Col span="12" style="padding-left:5px;">

<Button type="error" style="width:100%" @click="resetParams">清 空</Button>

</Col>

</Row>

</FormItem>

</Form>

<Table :columns="columns" :data="tableData"></Table>

//提前写好的翻页

<b-pagination

:total-rows="totalRows"

:per-page="form.pageSize"

v-model="form.pageNumber"

style="margin-top:10px;"

@input="getListData"

next-text="下一页"

prev-text="上一页"

first-text="首页"

last-text="末页"

/>

</Col>

</Row>

</div>

</template>

<script>

//引用写好的日期处理的文件

import { getDateByType } from '@/common/utils'

//引入连接接口的处理文件

import api from '@/axios/api.js'

import gd from '@/axios/globalData.js'

export default {

data() {

return {

option: {},

dateType: 'date',

companys: [],

form: {

pageNumber: 1,

pageSize: 10,

type: 'day',

date: moment(new Date()).format('YYYY-MM-DD'),

companyId: '0'

},

//分页

totalRows: 0 ,

//折线图的横、纵坐标

xData: [],

yData: [],

//折线图下面的按钮选项

legend: ['所有平台'],

columns: [

{

title: '平台名称',

key: 'companyName'

},

{

title: '平均载客率',

key: 'avgDriveRateStr'

},

{

title: '详情',

key: 'action',

width: 80,

align: 'center',

render: (h, params) => {

return h('div', [

h('Button', {

props: {

type: 'primary',

size: 'small'

},

style: {

marginRight: '5px'

},

on: {

click: () => {

this.getChartData(params.row)

}

}

}, '可视化')

]);

}

}

],

tableData: []

}

},

methods: {

changeLegend(id) {

if (id) {

this.companys.forEach(item => {

if (item.companyId == id) {

this.legend = [item.companyName]

}

})

}

},

changeDateType: function (value) {

if (value == 'month') {

this.dateType = 'month'

} else {

this.dateType = 'date'

}

this.changeXData()

},

changeXData: function () {

var format = this.form.type == 'month' ? 'YYYY-MM' : 'YYYY-MM-DD'

var date = moment(this.form.date).format(format)

this.xData = getDateByType(date, this.form.type)

},

setEchartsOption() {

this.option = {

title: {

left: 'center',

text: '平台实载率统计分析'

},

tooltip: {

trigger: 'axis'

},

legend: {

y: 'bottom',

data: this.legend

},

grid: {

left: '3%',

right: '4%',

containLabel: true

},

xAxis: {

type: 'category',

boundaryGap: false,

axisLabel: {

interval: 0,

rotate: 30

},

data: this.xData

},

yAxis: {

type: 'value'

},

series: [

{

name: this.legend[0],

type: 'line',

stack: '总量',

data: this.yData,

markLine: {

data: [

{ type: 'average', name: '平均值' }

]

}

}

]

};

},

//获取所有平台公司

getCompanys() {

api.axios_http(URL, { type: 1 }).then(res => {

this.companys = res.returnParm

})

},

getListData() {

var format = this.form.type == 'month' ? 'YYYY-MM' : 'YYYY-MM-DD'

var params = {}

params.date = moment(this.form.date).format(format)

params.type = this.form.type

params.pageNumber = this.form.pageNumber

params.pageSize = this.form.pageSize

if (this.form.companyId != '0') {

params.companyId = this.form.companyId

}

this.copyParams = JSON.parse(JSON.stringify(params))

this.copyXDate = JSON.parse(JSON.stringify(this.xData))

api.axios_http(URL params).then(res => {

this.tableData = res.returnParm.result

this.totalRows = res.returnParm.totalCount

})

 

},

getChartData(item) {

var params = JSON.parse(JSON.stringify(this.copyParams))

if (item) {

params.companyId = item.companyId

this.legend = [item.companyName]

}else{

if(this.form.companyId == '0'){

this.legend = ['所有平台']

}

}

api.axios_http(URL, params).then(res => {

this.yData = res.returnParm

this.xData = this.copyXDate

this.setEchartsOption()

})

},

queryData() {

this.getListData()

this.getChartData()

},

resetParams() {

this.dateType = 'date'

this.form = {

pageNumber: 1,

pageSize: 10,

type: 'day',

date: moment(new Date()).format('YYYY-MM-DD'),

companyId: '0'

}

this.legend = ['所有平台']

this.changeXData()

this.queryData()

}

},

mounted() {

this.getCompanys()

//初始化x轴数据

this.changeXData()

this.getListData()

this.getChartData()

}

}

</script>

 

#3