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的值來確定位置的