echarts heatmap
0
悬赏园豆：5
[已关闭问题]
关闭于 2017-04-19 15:24
想做一个网站点击量的热力图；参考百度最新的echarts的文章和例子，结果缺出不来，详细研究了该配置文档和api，弄疯了，没有搞定，特来求助；废话不说，直接上代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<script type="text/javascript"
src="/behavior/resources/easyui/jquery.min.js"></script>
<script type="text/javascript"
src="/behavior/resources/echarts/echarts.js"></script>
<script type="text/javascript"
src="/behavior/resources/visitor/index_heatmap_echarts.js"></script>
</head>
<body>
<div id="graphic">
<img id="baidu-img" src="/behavior/resources/img/test.png" />
<div id="main" style="width:600px;height:600px;"></div>
</div>
</body>
</html>
下面是index_heatmap_echarts.js的代码；
$(document).ready(function(){
// 在这里写你的代码...
var myChart = echarts.init(document.getElementById('baidu-img'));
loadData(myChart);
});
var loadData = function(myChart) {
var heatData = [];
for (var i = 0; i < 20; ++i) {
heatData.push([
400 + Math.random() * 300,
5 + Math.random() * 10,
Math.random()
]);
}
for (var i = 0; i < 100; ++i) {
heatData.push([
100 + Math.random() * 600,
150 + Math.random() * 50,
Math.random()
]);
}
for (var i = 0; i < 200; ++i) {
heatData.push([
Math.random() * 1000,
Math.random() * 800,
Math.random() * 0.5
]);
};
myChart.setOption({
title : {
text: '热力图'
},
series : [
{
type : 'heatmap',
data : heatData,
hoverable : false
}
]
});
}
