echarts去实现一个完完全全的动态更新早上8点到晚上6点每分钟的各区间的人数变化趋势图

image.png

这图是写demo测试的

技术使用：lodash、echarts、es6、axios等

1、xAxis横坐标的处理方式(静态写死的情况)

xAxis使用category模式，通过数组的形式获取每天早上8点的时间戳和每天下午6点的时间戳，然后通过这两个端点之间的区域，进行循环遍历，每分钟去叠加也就是每分钟去累加1*60*1000，这样获取到的时间戳再转换为格林威治时间，这样解决了X轴的问题。

        let startTime = new Date(new Date().setHours(0, 0, 0, 0) + 8 * 60 * 60 * 1000).getTime();
        let endTime = new Date(new Date().setHours(0, 0, 0, 0) + 18 * 60 * 60 * 1000).getTime();
        let times = [];
        for (var start = startTime; start <= endTime; start += 1 * 60 * 1000) {
            times.push(new Date(start).toTimeString().substr(0, 8));
        }

2、legend下的data也动态的从后台获取

这个是代表的echarts图表中的对象体，针对这个对象动态变化而绘制的图表。
这个也可以去后台中去进行获取，需要使用到lodash中的_.map()方法

this.chartsOption.customStageByTime.legend.data = _.map(customStageByTime.data,'areaName');

customStageByTime.data这个即是从后台动态返回的对象数组，其中的areaName则是名称。

3、xAxis横坐标的处理方式(后台获取数据动态处理的情况)

this.chartsOption.customStageByTime.xAxis[0].data =
 Array.prototype.slice(Array.from(new Set(_.map(customStageByTime.data,'recordTime')))).map(el = {
  return el.trim().split(" ")[1]
})

这行代码是先通过_.map()方法将时间点拿过来，但是获取到的可能是有重复的值，则进行Set()去重，Array.from是转成的伪数组，伪数组再变为真数组进行map遍历，然后就能拿到对应的X时间坐标轴了。

4、动态的创建series对象数组

personNum这个字段即为当前时间点某个区域对应返回的人数
首先先用_.groupBy()进行属性分组，再用_.map()转为数组外再套一层数组的数据形式，然后对这个进行循环遍历，index对应的索引的数组其实就是每个属性的数组，然后对这个数组进行处理即可。

this.chartsOption.customStageByTime.series = [];
_.map(_.groupBy(customStageByTime.data,'areaName')).forEach((item,index) => {
  this.chartsOption.customStageByTime.series.push({
    name: item[0].areaName,
    type:"line",
    barGap:0,
    emphasis: {
      focus:"series"    
    },
    smooth:true,
    data: _.map(_.map(_.groupBy(customStageByTime.data,'areaName'))[index],'personNum')
  })
})

this.chartsOption = _.cloneDeep(this.chartsOption)

5、待优化的部分

在实现的过程中遗漏了一种情况，也就是某个时间点可能没有数据的情况，这种情况下需前端处理为0人