echarts制作某个省份的热力图

实现的效果图长这样

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…

转载于:https://juejin.im/post/5d06e7d0f265da1bc07e38dd