使用echarts在地图中使用dispatchAction

最新推荐文章于 2024-05-29 22:54:10 发布

checkMa

最新推荐文章于 2024-05-29 22:54:10 发布

阅读量1.7w

点赞数 3

分类专栏： echarts

本文链接：https://blog.csdn.net/qq_36990322/article/details/108019649

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果如下

在这里插入图片描述

注意事项

1、必须使用goe渲染地图
2、同一个option只能存在一个series参数
3、tooltip提示框默认跟随series参数展示
4、通过地图区域的鼠标悬停事件，用dispatchAction触发城市锚点scatter对应的tooltip
5、dispatchAction的seriesIndex必须加上

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../echarts-4.8.0/package/dist/echarts.js"></script>
		<script src="./黔西南布依族苗族自治州.js"></script>
	</head>
	<body>
		<div id="map" style="width: 500px;height: 500px;margin: 0 auto"></div>
		
		<script type="text/javascript">
			// 城市的坐标
			// yoy : year on year 同比
			// mom: month on month 环比
			const scatterData = [
			  {
			    name: '兴义市',
			    value: [104.897982, 25.088599],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			  {
			    name: '安龙县',
			    value: [105.471498, 25.108959],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			  {
			    name: '兴仁市',
			    value: [105.192778, 25.431378],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			  {
			    name: '普安县',
			    value: [104.955347, 25.786404],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			  {
			    name: '晴隆县',
			    value: [105.218773, 25.832881],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			  {
			    name: '贞丰县',
			    value: [105.650133, 25.385752],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			  {
			    name: '望谟县',
			    value: [106.091563, 25.166667],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			  {
			    name: '册亨县',
			    value: [105.81241, 24.983338],
			    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
			  },
			];
			
			const option = {
			  title: {
			    text: '黔西南州',
			    subtext: '兴义市',
			    left: 'center',
			  },
			  tooltip: {
			    backgroundColor: '#fff',
			    trigger: 'item',
				alwaysShowContent: true,
				triggerOn: 'mousemove' ,
			    formatter: function(params) {
			      let htmlStr = '';
			      params.data.typeList.forEach(item => {
			        // 判断数值升降
			        let colorSpan = number => {
			          let color = number > 0 ? '#00cc99' : '#ff0000';
			          return `<span style="color: ${color}">${number}%</span>`;
			        };
			        htmlStr += `
			          <div>
			            ${item.type}：同比 ${colorSpan(item.yoy)}  环比 ${colorSpan(item.mom)}
			          </div>
			        `;
			      });
			
			      return `<div style="width: 300px; height: 100px; border-radius: 5px; color: #000; font-weight: 600;">
			        ${htmlStr}
			      </div>`;
			    },
			  },
			  geo: {
			    map: '黔西南州',
			    roam: false,
			    zoom: 1.2,
			    itemStyle: {
			      normal: {
			        borderWidth: 2,
			        borderColor: '#0090fe', //边框颜色
			        areaColor: '#003399', //地图区域颜色
			      },
			      emphasis: {
			        show: 'true',
			        borderWidth: 4,
			        borderColor: '#b2163c', //边框颜色
			        areaColor: '#531f67', //鼠标移上去的颜色
			      },
			    },
			    label: {
			      normal: {
			        color: '#fff',
			        fontWeight: 'bold',
			        show: true,
			      },
			      emphasis: {
			        color: '#fff',
			        fontWeight: 'bold',
			        show: true,
			      },
			    },
			  },
			  series:[
				  {
					type: 'scatter',
					coordinateSystem: 'geo',
					symbol: 'circle' ,
					symbolSize: 10 ,
					color: "#00cc99",
					data: scatterData
				  }
			  ]
			};

			echarts.registerMap("黔西南州", jsonGeo);
			let myChart = echarts.init(document.getElementById('map'));
			myChart.setOption(option);
			
			myChart.on('mouseover' , (params)=>{
				myChart.dispatchAction({
				    type:'showTip',//默认显示江苏的提示框
				    seriesIndex: 0,//这行不能省
				    name: params.name 
				});
			})
		</script>
	</body>
</html>

checkMa

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
使用echarts在地图中使用dispatchAction

效果如下注意事项1、必须使用goe渲染地图2、同一个option只能存在一个series参数3、tooltip提示框默认跟随series参数展示4、通过地图区域的鼠标悬停事件，用dispatchAction触发城市锚点scatter对应的tooltip5、dispatchAction的seriesIndex必须加上代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> &lt
复制链接

扫一扫