echarts 北京地图+热力图

最新推荐文章于 2026-04-16 16:55:56 发布

原创最新推荐文章于 2026-04-16 16:55:56 发布 · 2.2w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Echarts web前端

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用ECharts实现地图上的热力图展示，通过具体代码示例展示了如何设置热力图的颜色、触发提示框的方式以及如何指定地理位置坐标等关键配置。

把下面代码直接复制粘贴到echarts官网代码块部分（http://echarts.baidu.com/echarts2/doc/example/map20.html）

// 数据格式 [经度，纬度]
var heatData = [[116.11,39.852],
			                [116.21,39.952],
			                [116.31,39.957],
			                [116.41,39.959],
			            ];

option = {
    color: ['red','yellow','#d8e050'],
    tooltip : {
        trigger: 'item',
        formatter: '{b}'
    },
    series : [
        {
            name: '妥投量',
            type: 'map',
            mapType: '北京',
            roam: false,
            mapLocation:{x:'center',y:'2%'},
            itemStyle:{
                normal:{
                  label:{
                    	 show:true,
                         textStyle:{
                           fontSize : '12',
                           fontFamily:'Microsoft YaHei',
                           color:'#00ffff'
                         }
                        },
                    borderColor:'#5ef9f7',
                    borderWidth:1,
                    areaStyle:{
                        color: '#210874'
                    }
                }
            },
            data:[],
            heatmap: {
                minAlpha: 0.5,
                data: heatData
            },
        } 
    ]
};

效果如图：