echart单独加载一个省，鼠标点击或者滑过每个市时触发的事件demo

已甘肃为例：

需要注意的是map: ‘甘肃’,需要和你下载的省份的名称对应，否则不会显示地图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="height:800px;"></div>
	</body>
	<script type="text/javascript" src="js/echarts.min.js" ></script>
	<script type="text/javascript" src="js/gansu.js"></script>
	<script>
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                selectedMode : 'single',
                map: '甘肃',
                itemStyle:{  
                    normal:{label:{show:true}},  
                    emphasis:{label:{show:true}}  
                }
            }]
        });

        chart.on('click', function (params) {
        	console.log(params)
		    var city = params.name;
		    alert(city)
		});
	</script>
</html>

　说明：

   1、上面例子中gansu.js在https://github.com/apache/incubator-echarts/tree/master/map/js/province下载的，，里面有每个省份的地图，每个市的地图。

   2、上面例子中是点击事件，如鼠标滑过事件等更多事件在官网：https://echarts.apache.org/zh/api.html#events

posted @ 2020-07-01 17:11  再见小猴子  阅读(501)  评论(0)    收藏  举报