MAP地图点击省份显示当前地区地图

最新推荐文章于 2023-09-18 15:40:47 发布

吃不胖爹

最新推荐文章于 2023-09-18 15:40:47 发布

阅读量301

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43894292/article/details/121378235

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击省份显示当前地区</title>
	</head>
	<body>
		<div id="main" style="height: 500px;">
			
		</div>
	<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
	<script type="text/javascript">
		var myCharts = echarts.init(document.getElementById("main"));
		var option = {
			title : {
				text : "地图详情"
			},
			tooltip : {
				show: true,
				formatter: "{b}"
			},
			series: [
			{
				name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'single',//multiple多选
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                    color: "#231816"
                                }
                            },
                            areaStyle:{color:'#B1D0EC'},
                            color:'#B1D0EC',
                            borderColor:'#dadfde'//区块的边框颜色
                        },
                        emphasis:{//鼠标hover样式
                            label:{
                                show:true,
                                textStyle:{
                                    color:'#fa4f04'
                                }
                            }
                        }
                    },
                    data:[
                       
                    ]
                }
			]
		}
		myCharts.setOption(option)
		
		//点击事件
		var ecConfig= echarts.config;
		myCharts.on(ecConfig.EVENT.CLICK,function(param){
			console.log(param.name)
			option = {
				series : [{
                    name: '中国',
                    type: 'map',
                    mapType: 'china|'+param.name,
                    selectedMode : 'single',//multiple多选
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                    color: "#231816"
                                }
                            },
                            areaStyle:{color:'#B1D0EC'},
                            color:'#B1D0EC',
                            borderColor:'#dadfde'//区块的边框颜色
                        },
                        emphasis:{//鼠标hover样式
                            label:{
                                show:true,
                                textStyle:{
                                    color:'#fa4f04'
                                }
                            }
                        }
                    },
                    data:[
                        {name:'四川',selected:true}
                    ]
                }]
			};
			myCharts.clear()
			myCharts.setOption(option)
		})
		
		
		
	</script>
	</body>
</html>

吃不胖爹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MAP地图点击省份显示当前地区地图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点击省份显示当前地区</title> </head> <body> <div id="main" style="height: 500px;"> </div> <script src="http://echarts.baidu.com
复制链接

扫一扫