echarts 显示中国地图以及省份

最新推荐文章于 2025-07-21 15:43:22 发布

顽石九变

最新推荐文章于 2025-07-21 15:43:22 发布

阅读量4.5k

点赞数 29

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/wlddhj/article/details/141927707

这里使用echarts 4.9的版本显示中国地图，因为5.X的版本已经把地图模块分离出去了

可以从这里下载全国地图数据或各身份的数据 https://github.com/apache/echarts/tree/master/test/data/map

完整代码示例：中国地图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全国地图</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.4.9.0.js"></script>
    <!-- 引入中国地图数据 -->
    <script src="js/map/china.js"></script>
    
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1100px;height:800px;"></div>
    <script type="text/javascript">
       
        var chart = echarts.init(document.getElementById('main'));
        option = {
     
     
            title: {
     
     
                text: '全国客户分布',
				top:'top',
                x:'center'
            },
			tooltip: {
     
       
                trigger: 'item', // 触发类型，'item' 表示鼠标悬浮到图形上时触发  
                formatter: '{b}: {c}' // 提示框内容的格式，{b} 是名称，{c} 是值  
            },  
			// dataRange
            visualMap: {
     
     
			  show: true,
			  min: 0,
			  max: 3000,
			  text: ["高", "低"],
			  realtime: true,
			  calculable: true,
			  color: ["#28C9B7", "#E3F2D9"],
			},
            series:[
            	{
     
     
            		name:'客户分布',
            		type:'map',
					map: "china", 
					show:true,
					label: {
     
     
						normal: {
     
     
							show: true, // 显示省份名称或数量  
							formatter: function (params) {
     
       
								// 当值为0时不显示省份名称，直接留空；否则显示省份名称  
								if (params.value && params.value >0){
     
     
									return params.name
								}
								return '';  
							},  
							fontSize:12,
							color:'#333',
							position: 'top' // 标签在地图内部  
						},  
						emphasis: {
     
       
							show: true,  
							fontSize: '14',  
							fontWeight: 'bold'  
						}  
					},
					tooltip: {
     
     
						formatter: function (params) {
     
       
							// 当值为0时不显示信息，直接留空；否则显示数量  
							if (params.value && params.value >0){
     
     
								return params.name + ' : '+params.value
							}
							return '';  
						}
					},
					markArea:{
     
     
						label:{
     
     
							show:true
						},
						itemStyle:{
     
     
							color:'blue',
						},

					},
            		itemStyle: {
     
     
						normal: {
     
     
						  show:true,
						  color:'#fff',
						  areaColor: "#DAE3F3",
						  borderColor