ECharts-热力图实例

　　1.引入echarts.js

　　2.页面js代码

//用ajax获取所需要的json数据
             $.get("../../../mall/queryPageWtSrPost.do", {
                 'sdate' : sdate,
                 'edate' : edate
 
             },
            function (result, resultState) {
                if (resultState == "success") {
                    var resultJson = eval(result);
                     if(resultJson!=""){
                         //添加需要实现热力分布的图片
                        $('#graphic').html("<img id='baidu-img' src='./10086mall.png'><div id='main' style='width:1130px;height:2500px;'></div>");
                            var heatData=new Array();//定义数组存取后台数据
                            //封装成所需要的数据 x：距右边距的像素，y：距上边距的像素，h：热度
                            for(var i = 0;i < resultJson.length; i++) {
                                heatData[i]=[resultJson[i].x,resultJson[i].y,resultJson[i].h];
                            }
                            //echarts
                        require(
                            [
                                'echarts',
                                'echarts/chart/heatmap' // 使用柱状图就加载bar模块，按需加载
                            ],
                            function (ec) {
                                // 基于准备好的dom，初始化echarts图表
                                var myChart = ec.init(document.getElementById('main'));
                                var option = {
                                        title : {
                                            text: '热力图自定义样式'
                                        },
                                        series : [
                                            {
                                                type : 'heatmap',
                                                data : heatData,
                                                hoverable : false,
                                                gradientColors: [{
                                                    offset: 0.4,
                                                    color: 'green'
                                                }, {
                                                    offset: 0.5,
                                                    color: 'yellow'
                                                }, {
                                                    offset: 0.8,
                                                    color: 'orange'
                                                }, {
                                                    offset: 1,
                                                    color: 'red'
                                                }],
                                                minAlpha: 0.2,
                                                valueScale: 2,
                                                opacity: 0.6
                                            }
                                        ]
                                    };
 
                                // 为echarts对象加载数据
                                myChart.setOption(option);
                            }
                        );
                        }
 
                    }
 
                });

　　3.html代码

　　　　<div id="graphic" class="col-md-8" style="width: 1130px;margin:0 auto;float:none!important;">
            <img id="baidu-img" src="./10086mall.png">
            <div id="main" style="width: 1130px; height: 2500px;"></div>
        </div>

　　4.效果图

　

　　5.最后说明一下

　　注意：图中这些点是你自己手动调到相对应的位置的，就是heatData中x，y的值来确定位置的