实现的效果图长这样
steps
因为热力图的点是相对于整张地图，与经纬度相关。所以可以使用地图叠加的方式。
series里面是数组的形式。
第一个数组是相对应省份的一个边界图。底图是中国地图的热力图。然后根据中心位置和缩放比例使两者重合。展示第一层的省份边界图和后面几层的热力图。
series: [
//第一层是省份的边界地图
{
name: 'map',
type: 'map', //
map: 'guangxi',
coordinateSystem: 'geo',
zoom:1,
roam: false,
label: {
show:true,
normal:
{
show: true,
color:"#fff",
},
emphasis: {
show: true,
fontSize:16,
color:"#fff"
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
//鼠标移入高亮显颜色
areaColor: '#f46d43',
show:false
}
}
},
//小型企业热力分布图
{
name: '小型企业',
type: 'heatmap', //
coordinateSystem: 'geo',
data: convertData([
{name: "百色市", value: 999},
{name: "河池市", value: 654},
{name: "桂林市", value: 546},
{name: "南宁市", value: 545},
{name: "柳州市", value: 564},
{name: "崇左市", value: 654},
{name: "来宾市", value: 87},
{name: "玉林市", value: 99},
{name: "梧州市", value: 55},
{name: "贺州市", value: 767},
{name: "钦州市", value: 567},
{name: "贵港市", value: 55},
{name: "防城港市", value: 43},
{name: "北海市", value: 234},
]),
pointSize: 5,
blurSize: 6
},
.....
]复制代码map有两种引入方式：
这边采用json引入的方式
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});复制代码附上中国各省份的边界json数组和实现的map
github.com/heavy-snowy…