Echarts热力图demo

（1）导包

导包分为本地和线上加载两种，这里采用线上自主导包。导包的主要代码如下：

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

<!—导入中国地图文件-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<!—使用百度地图api-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=BGquqFxPX3NUlRUDdP8ShwjG7CT3aFEn"></script>
<!—导入百度地图扩展包 实现在百度地图的基础上绘制散点图、热力图和线图等-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

这里需要注意的是，使用百度地图api接口，必须要上百度地图官网申请个人密钥，然后填于上方的ak=你的密钥。

申请网址为：http://lbsyun.baidu.com/index.php?title=jspopular

（2）echarts的基本配置

1、echarts的初始化：

需要建立一个布局容器，一般是div，采用

var dom = document.getElementById("container");

var myChart = echarts.init(dom); //拿到echart对象。

2、为echarts配置option。

Echarts的最终使用是基于设置配置的option对象，option又区分为BaseOption和Options。BaseOption用于配置所需要呈现的多个option中的共同部分，而Options用于设置不同部分。如本demo中，采用的时间线展示有11个，而且这11个时间线的数据是不一致的，所以在BaseOption中配置这11个相同的部分后，还需要在Options中配置11种不同的数据。下面，基于代码阐述,首先，获取数据需要在异步请求中，采用

$.get(“uri”,function(data){

   //书写echarts配置代码

}); ：

var option = {
    //option部分的相同配置
    baseOption: {
        title: { //显示的标题
            text: '北京市地铁口人流监控',
            left: 'center',
            textStyle: {
                color: 'black'
            }
        },
        


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',
        playInterval: 2000,//跳转间隔时间
lineStyle: {color: 'white'},//线条颜色
label: { //显示上方时间点标签的样式
        normal: {
        textStyle: {
color: 'black',
fontSize: 13
}
}
}
},
        tooltip : {  //用于当前坐标点的弹出信息
            /*show : true, //默认显示
            showContent:true, //是否显示提示框浮层*/
            trigger:'item',//触发类型，默认数据项触发
            /*triggerOn:'click',//提示触发条件，mousemove鼠标移至触发，还有click点击触发
            alwaysShowContent:false,
            // 绝对位置，相对于容器左侧 10px, 上侧 10 px
            position: [10, 10],*/
            "formatter":function(params,ticket,callback){//
                //其中params中包含了我们传入的数据和设定的series的name等
                //console.log(params);
                //ticket 是异步回调标识，配合第三个参数 callback 使用。
                // 第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过         callback 传入上述的 ticket 和 html 更新提示框浮层内容。
                return params.data.name+"<br/>"+params.data.value[2];
            }
        },

        bmap: {
            center: [116.422545110, 39.917055306224895], //当前显示地图的中心点
            zoom: 12,//空间放大的倍数
            roam: true //是否允许用户调节地图，如放大缩小
        },
        visualMap: { //用于开启自定义的视觉颜色条框
            show: true,
            //top: 'top',
            min: 0,
            max: 200,
            //seriesIndex: 0,//如果指定为0 ，那么只会运行第一个series配置
            calculable: true,//如果开启，将会支持手动拖拽更改颜色
            inRange: {
                color: ['blue','blue', 'green', 'yellow', 'red']
            },
            top:20 //颜色指示器放置在顶端
        },
        series: [{  
            name:"人口流动密度",
            type: 'heatmap',//类型为热力图  //设置为scatter才会显示文字提示
            coordinateSystem: 'bmap',//采用的坐标系（地理坐标系）
            pointSize: 8,//显示点的大小
            blurSize: 4, //模糊显示点  其放大倍数越高，显示点的颜色越浅
            /*label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },*/
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        }]
},

  options: [
        {
            series: [{
                data :convertData(0)
            }]
        }, {
            series: [{
                data : convertData(1)
            }]
        },
        {
            series: [{
            ata : convertData(2)
            }]
        },
        {
            series: [{
            data : convertData(3)
            }]
        },
        {
            series: [{
        data: convertData(4)
        }]
        },
        {
            series: [{
                data : convertData(5)
            }]
        },
        {
            series: [{
                data : convertData(6)
            }]
        },
        {
            series : [{
                data: convertData(7)
            }]
        },
        {

            series: [{
                data: convertData(8)
            }]
        },
        {
            series : [{
                data: convertData(9)
            }]
        },
        {
            series: [{
                data : convertData(10)
            }]
        }
    ]
}

各模块的配置效果图

（3）echarts的series使用的data格式

一般series中采用的数据格式为：[{name:"",value:[[xAxis,yAxis,other,..],]}]

也可以省略name,直接默认使用value, [[xAxis,yAxis,other],]，即value中的第一个参数为X维度，Y维度，第三个参数为热力图中的颜色值等。如果需要展示数据，建议采用第一种。

本demo中的数据转换代码为：

//将服务器的json数据 数据为 [ [ {"id": 2, "xAxis":, "yAxis":,"value":,"name": ""}, ] ]
转化为[ {name:"",value:[[xAxis,yAxis,value],] } ]格式
var points = [];
var convertData = function (nb) {
    var res = [];
    var dataObject = data[nb];
    for (var i= 0;i<dataObject.length;i++){
        var concatArray = [];
        concatArray.push(dataObject[i].xAxis);
        concatArray.push(dataObject[i].yAxis);
        concatArray.push(dataObject[i].value);
        res.push({
            name:dataObject[i].name,
            value:concatArray
        });
    }
return res;
}

（4）echarts的使用

进行完以上的所有配置后，采用 myChart.setOption(option);即可使用该配置。