可视化篇：Echarts实现区域人群密度实时监控

perface
一些工作经验的整理，欢迎留言探讨。
Echarts2的时候曾试过在百度地图背景上加timeline属性，但发现不支持遂以失败告终，e3后来的bmap.js扩展，使得之前的设想得以实现。
下面是《可视化篇：效果图》中第10、11张的实现说明

---

其中：
1.下图展示数据均为模拟数据
2.使用的echarts版本为3.2.3，关于如何引入百度地图，参考《Echarts3.0引入百度地图》
3.此部分为热力图实时变化，可以通过扩展实现多区域实时变化，echarts3支持十万级别数据渲染，但是会有点慢

---

下面是一些实现细节：

1. 关于人群密度变化的思考

现阶段对一些景点区域，以及一些人流量相对较大的区域的监控预警是十分重要的一种事故预防措施，除了一些冷冰冰的数字呈现，我们仍可以通过一些相对醒目的手法来提高预警技巧，比如将要讲的人群密度热力分布，通过加上时间轴，以及地图渲染，我们可以清晰地了解在什么时间，什么地点，什么情况，当然百度地图一直就有这种功能服务，现在我们只是把他拿出来讲具体如何实现，仅此而已。

---

2. option 设置

在含有timeline属性的echarts图表中，有两个关键的实现基础，baseOption 和 options.

1. option.baseOption

option.baseOption，顾名思义就是图标的一些基础选项，由于在timeline属性环境下，option必须分成两家，1家baseOption承载之前option的属性设置，另一家options则对应到timeline属性下各个时间段
那么baseOption下都应该怎么设置呢？

图中任何属性都是可以写在baseOption里，图为echarts3配置文档。
如本篇例子中的代码：

    baseOption: {
        title:{
            text: "区域人群实时密度监控--花城广场",
            link: 'http://blog.csdn.net/yc_1993',
            subtext: "数据模拟,仅为测试",
            left: 'center',
            top: 20,
            textStyle:{
                color: 'red',
                fontSize: 20
            },
            subtextStyle:{
                color: 'white',
                fontSize: 16
            }
        },
        timeline: {
            autoPlay:true,
            data: ["7:00","8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00"],
            axisType: 'category',
            padding: [5,5,5,5],
            playInterval:1500,
            lineStyle:{color:'white'},
            label:{
                normal:{
                    textStyle:{
                        color: 'white',
                        fontSize: 13
                    }
                }
            }
        },
        bmap: {
        center: [113.331788,23.124235],
        zoom: 16,
        roam: true,
        mapStyle: {
                       styleJson: [
          {
                    'featureType': 'land',     //调整土地颜色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#081734'
                    }
          },
          {
                    'featureType': 'building',   //调整建筑物颜色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#04406F'
                    }
          },
         {
                    'featureType': 'building',   //调整建筑物标签是否可视
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'highway',     //调整高速道路颜色
                    'elementType': 'geometry',
                    'stylers': {
                    'color': '#015B99'
                    }
          },
          {
                    'featureType': 'highway',    //调整高速名字是否可视
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'arterial',   //调整一些干道颜色
                    'elementType': 'geometry',
                    'stylers': {
                    'color':'#003051'
                    }
          },
          {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'green',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'water',
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#044161'
                    }
          },
          {
                    'featureType': 'subway',    //调整地铁颜色
                    'elementType': 'geometry.stroke',
                    'stylers': {
                    'color': '#003051'
                    }
          },
          {
                    'featureType': 'subway',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'railway'