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;
}