echarts热力图mysql_ECharts-热力图实例

//用ajax获取所需要的json数据

$.get("../../../mall/queryPageWtSrPost.do", {'sdate': sdate,'edate': edate

},function(result, resultState) {if (resultState == "success") {var resultJson =eval(result);if(resultJson!=""){//添加需要实现热力分布的图片

$('#graphic').html("

//封装成所需要的数据 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);

}

);

}

}

});