Echarts2热力图设置背景图片

HTML

1
2
<div id="main"></div>
<script src="/echarts-all.js"></script>

这里需要引人echarts-all.js, 这个文件在2.0版本的官网中下载

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var heatData = [];
for (var i = 0; i < 100; ++i) {
heatData.push([
100 + Math.random() * 600,
150 + Math.random() * 50,
Math.random()
]);
}
echarts.init(document.getElementById('main')).setOption({
series: [{
type: 'heatmap',
data: heatData,
opacity: 0.6
}]
});

这是最简配置, 其中opacity: 0.6决定热力图的透明度, 设置为半透明后再为Div #main设置背景图片即可

CSS

1
2
3
4
5
6
7
#main {
width: 600px;
height: 400px;
background-image: url('/map.jpg');
background-repeat: no-repeat;
background-position: right top;
}
 欢迎关注我的博客公众号
如果觉得我的文章对你有用,请随意赞赏
0%