首页 新闻 赞助 找找看

echarts 热力图

0
悬赏园豆: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>

 

报错是 Axis option not found

求个大神帮帮我的主页 求个大神帮帮我 | 初学一级 | 园豆:117
提问于:2017-10-10 09:57
< >
分享
最佳答案
1

这个提示是赋值错误,x轴和y轴是否也赋值了,查看api确保写法正确

收获园豆:10
Leap李 | 菜鸟二级 |园豆:246 | 2017-10-10 15:04
其他回答(1)
-2

参考:http://blog.csdn.net/wolfpirelee/article/details/54410661

金琥 | 园豆:2605 (老鸟四级) | 2017-10-10 10:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册