#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
