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(""); 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代码
4.效果图
5.最后说明一下
注意:图中这些点是你自己手动调到相对应的位置的,就是heatData中x,y的值来确定位置的