echarts中国地图使省份选择性滑动或点击高亮「建议收藏」

echarts中国地图使省份选择性滑动或点击高亮「建议收藏」本文介绍echarts显示中国省份图,对于需要高亮的省份进行筛选。并且对省份进行选择性交互。首先我们需要一个颜色集合,代表我们要设置多少种颜色。这里用到了dataRange。dataRange:{ show:false, x:’left’, y:’bottom’, splitList:[ …

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

本文介绍echarts显示中国省份图,对于需要高亮的省份进行筛选。并且对省份进行选择性交互。

首先我们需要一个颜色集合,代表我们要设置多少种颜色。这里用到了dataRange。

        dataRange: {
	    	show:false,
	        x: 'left',
	        y: 'bottom',
	        splitList: [
	            {start: 5, end: 5, color: 'orange'},//当值为5时,区域背景
	            {start: 10, end: 10, color: '#ff6300'},//当值为10时,区域背景
	            {start: 15, end: 15, color: '#ccc'},//当值为15时,区域背景
	        ],
	    },

然后就需要数据就行了。

        series : [
	        {
	            name: '市场分布',
	            type: 'map',
	            mapType: 'china',
	            //hoverable: false,
	            roam: false,
	            itemStyle:{
		                normal:{label:{show:true}},
		                emphasis:{label:{show:false}}
		            },
	            data:[],
	        }
	    ],

这里的data为空,因为正常情况下数据不会写死,都是从后台获取的,在这里我直接赋值。

var ini_data=[];//初始化省份数组
var provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽','山东'];//获取的省份,有可能是从后台获取

由于框架不识别’省’,‘市’的字眼,所以使用正则将字眼去掉。

    //正则省份,将省与市的字眼去掉,框架不识别
    for(var i=0;i<provArr.length;i++){
    	var str = provArr[i];
		var re = /省|市/g;  //全局匹配
		var str2 ={name:str.replace(re,''),value: 5};//拼接对象数组
		ini_data.push(str2);
    }

此时,我们有了一个完整的ini_data对象数组了。可以直接给图表赋值了。

 option.series[0].data=ini_data;//将拼接好的数组赋给参数集合
 mycharts.setOption(option);//跟新图表

结果:echarts中国地图使省份选择性滑动或点击高亮「建议收藏」

可以看到,只要在数组里的省份都变成了我设置的orange颜色,因为它们的value都是5。

下面就是交互了,我的需求是点击灰色省份无任何效果,点击orange色的省份背景变为‘#ff6300’。

    //点击事件
	mycharts.on('click', function (params) {//点击事件
			select_province(params.name);
	});
	//初始化省颜色
	function ini_province(){
		var ini_len=option.series[0].data.length;
		for(var i=0;i<ini_len;i++){
			//初始化颜色
			option.series[0].data[i].value=5;
			mycharts.setOption(option);
		}
		
	}
	//选中省颜色
	function select_province(province_name){
		var len=option.series[0].data.length;
		for(var i=0;i<len;i++){
			if(option.series[0].data[i].name==province_name){//如果匹配正确
				//先归零
				ini_province();
				//改变颜色
				option.series[0].data[i].value=10;
				mycharts.setOption(option);
			}
		}
	}

我们通过监听click事件来获得event对象,然后获得省份,经过匹配后,将原来选中的省份清零,再改变选中省份的颜色。

结果:echarts中国地图使省份选择性滑动或点击高亮「建议收藏」

至于鼠标滑过的高亮效果,是框架自带的,默认是所有省份都有,如果想去掉只要加:hoverable: false就行了,不过这样同样会取消掉橙色的省份。所以为了保留橙色省份的滑动高亮效果,我是这样写的。

    //鼠标滑过事件
	var testStr=','+provArr.join(",")+","; 
	mycharts.on('hover', function (param){
		if(testStr.indexOf(","+param.name+",")!=-1){
			return false;
		}else{
			param.value=15;
			mycharts.setOption(option);
		}
	});

这时设置的第三个颜色生效了,当鼠标滑过时没有匹配到provArr中的省份时,就设置背景颜色为#ccc,由于默认背景是#ccc的缘故,也可以重新设置背景色,只要这里设置的颜色与背景色相同就行了。

附上demo地址:https://my.weblf.cn/xly/demo/echarts/map/map2.html

稍作修改也可点击进入省内详情:https://my.weblf.cn/xly/demo/echarts/map/map_china.html

下载地址:https://tx.weblf.cn/files/echarts地图—中国进入省份.zip

附上完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;color:#333333;}
			h3,h4,h5,h6{font-weight: normal;}
			.clear{clear:both;}
			body{font-family:"微软雅黑";}
			a{text-decoration: none;color: #333;}
			#charts{width:800px;height:600px;margin:0 auto;}
			.market_map_title{font-size:32px;text-align:left;padding-left:50px;}
		</style>
	</head>
	
	<body>
		<h3 class="market_map_title">全国市场分布图</h3>
		<div id="charts"></div>
	</body>
	<!--<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>-->
	<script src="echarts-all.js"></script>	
<script>
	var mycharts = echarts.init(document.getElementById('charts'))
		option = {
	    dataRange: {
	    	show:false,
	        x: 'left',
	        y: 'bottom',
	        splitList: [
	            {start: 5, end: 5, color: 'orange'},//当值为5时,区域背景
	            {start: 10, end: 10, color: '#ff6300'},//当值为10时,区域背景
	            {start: 15, end: 15, color: '#ccc'},//当值为15时,区域背景
	        ],
	    },
	    series : [
	        {
	            name: '市场分布',
	            type: 'map',
	            mapType: 'china',
	            //hoverable: false,
	            roam: false,
	            itemStyle:{
		                normal:{label:{show:true}},
		                emphasis:{label:{show:false}}
		            },
	            data:[],
	        }
	    ],
	    animation:false
	   
	};
	var ini_data=[];//初始化省份数组
	var provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽','山东'];//获取的省份,有可能是从后台获取
	//正则省份,将省与市的字眼去掉,框架不识别
    for(var i=0;i<provArr.length;i++){
    	var str = provArr[i];
		var re = /省|市/g;  //全局匹配
		var str2 ={name:str.replace(re,''),value: 5};//拼接对象数组
		ini_data.push(str2);
    }
    option.series[0].data=ini_data;//将拼接好的数组赋给参数集合
    mycharts.setOption(option);//跟新图表
	//鼠标滑过事件
	var testStr=','+provArr.join(",")+","; 
	mycharts.on('hover', function (param){
		if(testStr.indexOf(","+param.name+",")!=-1){
			return false;
		}else{
			param.value=15;
			mycharts.setOption(option);
		}
	});
	
	//点击事件
	mycharts.on('click', function (params) {//点击事件
			select_province(params.name);
	});
	//初始化省颜色
	function ini_province(){
		var ini_len=option.series[0].data.length;
		for(var i=0;i<ini_len;i++){
			//初始化颜色
			option.series[0].data[i].value=5;
			mycharts.setOption(option);
		}
		
	}
	//选中省颜色
	function select_province(province_name){
		var len=option.series[0].data.length;
		for(var i=0;i<len;i++){
			if(option.series[0].data[i].name==province_name){//如果匹配正确
				//先归零
				ini_province();
				//改变颜色
				option.series[0].data[i].value=10;
				mycharts.setOption(option);
			}
		}
	}
	</script>
</html>

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/179655.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ringbuffer的常规用法_likewise用法

    ringbuffer的常规用法_likewise用法C/C++Linux服务器开发/后台架构师知识体系整理环形缓冲区(RINGBUFFER)的实现原理环形缓冲区通常有一个读指针和一个写指针(一个入指针和一个出指针)。读指针指向环形缓冲区中可读的数据,写指针指向环形缓冲区中可写的缓冲区。通过移动读指针和写指针就可以实现缓冲区的数据读取和写入。在通常情况下,环形缓冲区的读用户仅仅会影响读指针,而写用户仅仅会影响写指针。如果仅仅有一个读用户和一个写用户,那么不需要添加互斥保护机制就可以保证数据的正确性。如果有多个读写用户访问环形缓冲区,那么必须添加互斥保护机

  • executescalar mysql_ExecuteScalar[通俗易懂]

    executescalar mysql_ExecuteScalar[通俗易懂]这两个答案和一点点思考使我想到了一个接近答案的东西。首先再澄清一下:该应用程序是用C#(2.0+)编写的,并使用ADO.NET与SQLServer2005进行通信。镜像设置是托管主体和镜像的两个W2k3服务器以及托管作为监视器的快速实例的第三个服务器。这样做的好处是,故障转移对于使用数据库的应用程序几乎是透明的,它将对某些连接引发错误,但从根本上讲一切都会很好地进行。是的,我们得到了奇怪的误报…

  • 关于 Android 程序员最近的状况

    关于 Android 程序员最近的状况-关于Android的近况大家都知道,今年移动开发不那么火热了,完全没有了前两年Android开发那种火热的势头,如此同时,AI热火朝天,很多言论都说Android不行了。其实不光是Android,iOS也有类似的言论。那么到底如何看待这一现象呢?我的答案是:Android还行,只是回归平淡了,没有了前些年的火热。-为什么Android还行?如何看待一个行业行不行?有两点:这个行业有没有死亡?…

  • 用css解决table文字溢出控制td显示字数

    用css解决table文字溢出控制td显示字数

  • 版本号命名规则_文件版本号命名规则

    版本号命名规则_文件版本号命名规则版本号的格式为X.Y.Z(又称Major.Minor.Patch),递增的规则为:X表示主版本号,当API的兼容性变化时,X需递增。Y表示次版本号,当增加功能时(不影响API的兼容性),Y需递增。Z表示修订号,当做Bug修复时(不影响API的兼容性),Z需递增。详细的规则如下:X,Y,Z必须为非负整数,且不得包含前导零,必须按数值递增,如1….

  • SPI接口简介-Piyu Dhaker

    SPI接口简介-Piyu DhakerSPI接口简介作者:PiyuDhaker串行外设接口(SPI)是微控制器和外围IC(如传感器、ADC、DAC、移位寄存器、SRAM等)之间使用最广泛的接口之一。本文先简要说明SPI接口,然后介绍ADI公司支持SPI的模拟开关与多路转换器,以及它们如何帮助减少系统电路板设计中的数字GPIO数量。SPI是一种同步、全双工、主从式接口。来自主机或从机的数据在时钟上升沿或下降沿同步。主机和从机可以同时传输数据。SPI接口可以是3线式或4线式。本文重点介绍常用的4线SPI接口。接口图1.含主机和从

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号