直接在相同的折线图里面更新成单个的产品的数据信息

#1、功能需求分析

◆上班人数：该平台当天有多少人上班（一个人只统计一次，即无论一个人一天上班下班几次都只统计一次）
◆初始状态：折线图展示各时段上班人数
1，折线面积图
2，筛选条件：统计周期（日、周、月）、日期、平台名称
日：统计该日期的上班人数
周：统计该日期向前推7天的上班人数
月：统计该日期月份的上班人数（若日期筛选框可变为月份选择更佳）
3，列表展示字段：平台名称、上班人数、各时段点上班人数情况（可视化）
可视化：展示该平台上班变化情况

未做任何处理的时候，显示平台全部的上班人数。当点击列表里面的可视化按钮之后，更新左边的折线图数据信息，显示相对应的公司的上班人数统计分析。

#2、代码实现：

首先是搜索条件的处理，右边下拉框随着统计周期选项改变，日=》选择天，周=》当前日期往前推6天，月=》选择月份

<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>

####在data（） {return{

form: {

type: 'day',

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

companyId: '0'

},

}}

metheds{

####日期的处理

//转换日期类型，统计周期日周月的@on-change事件

changeDateType: function (value) {

if (value == 'month') {

this.dateType = 'month'

} else {

this.dateType = 'date'

}

this.changeXData()

},

//统计周期右边日期选择框@on-change事件，为日选项或者月选项

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)

},

}

//列表

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

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

params.companyId = this.form.companyId

}

//列表接口

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

this.tableData = res.returnParm.result

})

 

},

效果，当统计周期为日期的时候，横坐标变为当前日期的前6天，以此类推，统计周期为月份时，折线图横坐标显示为一个月的日期。

 

#3、接下来是对平台公司的处理。平台公司作为搜索条件，被选中搜索的时候，折线图更新数据。

所以：给平台公司设置一个@on-change="changeLegend"事件，然后：

changeLegend(id) {

if (id) {

this.companys.forEach(item => {

if (item.companyId == id) {

this.legend = [item.companyName]

}

})

}

},

（data（）{return{legend: ['所有平台'],}}

在折线图的代码设置里面要更换名称

legend: {

y: 'bottom',

data: this.legend

},

）

#4、接下来时实现列表里面可视化按钮功能。点击可视化按钮，折线图更换为这一平台公司的数据

######折线图

getChartData(item) {

var params = {}

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

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

params.type = this.form.type

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

params.companyId = this.form.companyId

}else{

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

}

if (item) {

params.companyId = item.companyId

this.legend = [item.companyName]

}

//折线图接口（url=>折线图接口）

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

this.yData = res.returnParm

this.setEchartsOption()

})

},

#5、折线图

#####实现代码：<chart :option="option" style="height:600px;width:100%" ref="mychart"></chart>

data（）{

return（option: {}, xData: [], yData: [], legend: ['所有平台'],

）}

methods: {

renderChartsOption() {

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: '平均值' }]}}]};},}

#6、

#7、

#8、

#9、