devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用echarts实现地图map_echarts image: mappattern

作者：IT小白 | 2024-02-18 15:03:34

赞

踩

echarts image: mappattern
  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title>echarts.js中国地图省份悬浮提示</title>
  7. <script src="../js/echarts.min.js"></script>
  8. <script type="text/javascript" src="../js/macarons.js"></script>
  9. <!-- <script src="../js/china.js"></script> -->
  10. <script type="text/javascript" src="china_1.js"></script></head>
  11.  
  12. <body>
  13.  
  14. <div id="container" style="height: 800px;width:800px;background:white;margin:20px 0 0;"></div>
  15.  
  16. <script type="text/javascript">
  17.     // 全国省份列表
  18.  
  19. function randomData() {  
  20. 	return Math.round(Math.random()*1000);
  21. }  
  22.  
  23. var dataMap =[  
  24.    {name: '北京',value: 150 },{name: '天津',value: randomData() },  
  25.     {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
  26.     {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
  27.     {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
  28.     {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
  29.     {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
  30.     {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
  31.     {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
  32.    /*  {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
  33.     {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },   */
  34.     {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData()},  
  35.     {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
  36.     {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
  37.     {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
  38.     {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
  39.     {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
  40.     {name: '香港',value: randomData() },{name: '澳门',value: randomData() },{name: '南海诸岛',value: randomData() }
  41. ];
  42. // 需要在页面上直接标记出来的城市
  43.  
  44. 	var specialMap = []; //默认选中的几个城市设置   "北京","重庆"
  45.     // 对dataMap进行处理，使其可以直接在页面上展示
  46.     for (var i = 0; i < specialMap.length; i++) {
  47.         for (var j = 0; j < dataMap.length; j++) {
  48.             if (specialMap[i] == dataMap[j].name) {
  49.                 dataMap[j].selected = true;
  50.                 break;
  51.             }
  52.  
  53.         }
  54.     }
  55.  
  56. /* var option = {
  57. 	title : {
  58.         text: '平台用户分布',
  59.         subtext: '纯属虚构',
  60.         x:'left',
  61.         textStyle:{
  62.         	fontSize:30
  63.         }
  64.     },
  65.     tooltip: {
  66.     	formatter: function (params) {
  67.             var info = '';//'<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>';
  68.             if(params.data.value != undefined){
  69.             	info = '注册用户</br>'+params.name+' : '+params.data.value+'人';
  70.             }
  71.             return info;
  72.             
  73.         },
  74.         //backgroundColor: "#ff7f50",//提示标签背景颜色
  75.         //textStyle: { color: "#fff" } //提示标签字体颜色
  76.     },
  77. 	//左侧小导航图标
  78.     visualMap: {  
  79.         show : true,  
  80.         x: 'left',  
  81.         y: 'center',  
  82.         splitList: [   
  83.             {start: 500, end:600},{start: 400, end: 500},  
  84.             {start: 300, end: 400},{start: 200, end: 300},  
  85.             {start: 100, end: 200},{start: 0, end: 100},  
  86.         ],  
  87.         //color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
  88.     }, 
  89.     dataRange: {
  90.     	orient: 'vertical', //vertical：垂直 ,horizontal
  91.     	min: 0,
  92.     	max: 1000,
  93.         x: 'left',
  94.         y: 'bottom',
  95.         text:['高','低'],           // 文本，默认为数值文本
  96.         calculable : true,
  97.        /* splitList:[  //自定义范围
  98.        		{start: 1500},
  99.             {start: 900, end: 1500},
  100.             {start: 310, end: 1000},
  101.             {start: 200, end: 300},
  102.             {start: 10, end: 200, label: '10 到 200（自定义label）'},
  103.             {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
  104.             {end: 10}
  105.        ] 
  106.     },
  107.     series: [
  108.         {
  109.             name: '注册用户',
  110.             type: 'map',
  111.             mapType: 'china',
  112.             
  113.             label: {
  114.                 normal: {
  115.                     show: true,//显示省份标签
  116.                 },
  117.                 emphasis: {
  118.                     show: false,//对应的鼠标悬浮效果
  119.                 }
  120.             },
  121.  
  122.             data: dataMap
  123.         }
  124.     ]
  125. }; */
  126. //初始化echarts实例
  127. var myChart = echarts.init(document.getElementById('container'),'macarons');
  128. 	myChart.on("mouseover",function(params){  //鼠标悬停事件
  129. 		/* params.color = "#2ec7c9";
  130. 		console.log("悬浮事件"); */
  131. 		var color ="";
  132. 		if(params.data == undefined){
  133. 			color = "#ecebeb";
  134. 		}else{
  135. 			color = "#2ec7c9";
  136. 		}
  137. 		params.color = color;
  138.    		params.event.target.style.fill = color;
  139. 		
  140. 	});
  141. 	myChart.on("mouseout",function(e){
  142. 	});
  143. var option = {
  144.     title : {
  145.         text: '用户分布',
  146.         subtext: '纯属虚构',
  147.         x:'center'
  148.     },
  149.     tooltip : {
  150.         trigger: 'item',
  151.         formatter: function (params) {
  152.             var info = '';//'<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>';
  153.             if(params.data != undefined){
  154.             	info = '注册用户</br>'+params.name+' : '+params.data.value+'人';
  155.             	return info;
  156.             }else{
  157.             	hideTip();
  158.             }
  159.             
  160.         },
  161.     },
  162.    /*  legend: {
  163.         orient: 'vertical',
  164.         x:'left',
  165.         data:['iphone3','iphone4','iphone5']
  166.     }, */
  167.     dataRange: {
  168.         min: 0,
  169.         max: 2500,
  170.         x: 'left',
  171.         y: 'bottom',
  172.         text:['高','低'],           // 文本，默认为数值文本
  173.         calculable : true
  174.     },
  175.     toolbox: {
  176.         show: true,
  177.         orient : 'vertical',
  178.         x: 'right',
  179.         y: 'center',
  180.         feature : {
  181.             mark : {show: true},
  182.             dataView : {show: true, readOnly: false},
  183.             restore : {show: true},
  184.             saveAsImage : {show: true}
  185.         }
  186.     },
  187.     roamController: {
  188.         show: true,
  189.         x: 'right',
  190.         mapTypeControl: {
  191.             'china': true
  192.         }
  193.     },
  194.     series : [
  195.         {
  196.             name: '用户分布',
  197.             type: 'map',
  198.             mapType: 'china',
  199.             roam: false,
  200.             itemStyle:{
  201.                 normal:{label:{show:true}},
  202.                 emphasis:{label:{show:true},} // areaColor设置鼠标悬浮到省的颜色 areaColor:'#2a333d'
  203.             },
  204.             data:dataMap
  205.         }
  206.     ]
  207.     
  208.  
  209. };
  210.   function hideTip(){
  211.   }                  
  212. //使用制定的配置项和数据显示图表
  213. myChart.setOption(option);
  214. </script>
  215.  
  216. </body>
  217. </html>

处理了 鼠标悬停在没有数值的区域的时候 没有选中的效果  资源上传中 审核成功之后 附下载地址的哦  有用的话点个赞

点击下载：demo下载

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/108706
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。