echarts 热力图

悬赏园豆：10 [已解决问题] 解决于 2018-04-02 13:22

用自己的图片作为背景，怎么做热力图

这是我的代码，求各位大佬帮忙

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
* {
margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="graphic" class="col-md-8" style="width: 1540px; height: 768px;margin:0 auto;float:none!important;"></div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>
$.ajax({
type:"get",
url:"aa.json",
async:true,

success: function(da){
if(da.ret == 200){
//添加需要实现热力分布的图片
$('#graphic').html("<img src='img/map.png'><div id='main' style='width:1540px;height:768px;'></div>");
var heatData = []; //定义数组存取后台数据
//封装成所需要的数据 x：距右边距的像素，y：距上边距的像素，h：热度
for(var i = 0;i < da.data.length; i++) {
heatData[i]=[da.data[i].x,da.data[i].y,da.data[i].h];
}
console.log(heatData);
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '热力图自定义样式'
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series : [
{
type : 'heatmap',
coordinateSystem: 'cartesian2d',
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);

}
},
error: function(){
console.log(2);
}
});
</script>
</body>
</html>