码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-01 17:33:15      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:mod   java   log   char   event   例子   tor   click   dem   

已甘肃为例:

需要注意的是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

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

标签:mod   java   log   char   event   例子   tor   click   dem   

原文地址:https://www.cnblogs.com/dancer0321/p/13220250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!