echarts 世界地图中文版及英文版

原创已于 2022-01-25 09:45:29 修改 · 2.6k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

怂叔

关注

标签

#echarts #javascript #vue.js

分类 it交互设计（ux）

于 2022-01-19 09:29:04 首次发布

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用ECharts绘制世界地图的例子，并展示了如何通过添加交互性和数据展示增强地图的功能。该示例包括了如何设置地图样式、添加提示框、配置工具栏等功能。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./../../utils/echarts.min.js"></script>
	<script src="./../../utils/world.js"></script>
	<script src="./../../utils/nameMap.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body,
		html,
		#main {
			height: 100%;
			width: 100%;
		}

		.active{
			color: #8361BB;
			margin: 0 6px;
			font-weight: 600;
		}
	</style>
</head>

<body>
	<div id="main"></div>
	<script>
		const chartDom = document.getElementById('main');
		const myChart = echarts.init(chartDom);
		echarts.registerMap('world', world);
		const option = {
			tooltip: {
				trigger: 'item',
				showDelay: 0,
				transitionDuration: .5,
				formatter: function (params) {
					let data = params.data || {}
					let textArr = []
					data.text?.forEach(item => {
						const value = (item.value + '').split('.');
						const valueStr = value[0].replace(
							/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
							'$1,'
						);
						textArr.push(`${item.title}<span class="active">${valueStr}</span>H<br/>`)
					})
					return params.name + '<br/>' + textArr.join('');
				}
			},
			visualMap: {
				show : false
			},
			toolbox: {
				show: true,
				left: 'left',
				top: 'top',
				feature: {
					dataView: {
						readOnly: false
					},
					restore: {},
					saveAsImage: {}
				}
			},
			series: [{
				name: 'USA aaa',
                nameMap,    //引入中文版   替换为中文
				type: 'map',
				roam: true,
				map: 'world',
				emphasis: {
					label: {
						show: true
					}
				},
				data: [{
						name: 'China',
						text: [
							{
								title : 'title 1',
								value : 300
							},
							{
								title : 'title 2',
								value : 370
							},
							{
								title : 'title 3',
								value : 300
							},
							{
								title : 'title 4',
								value : 300
							},
							{
								title : 'title 5',
								value : 300
							},
							{
								title : 'title 6',
								value : 500
							},
							{
								title : 'title 7',
								value : 300
							}
						],
						itemStyle: {
								color: '#8361BB'
						}
					},
				]
			}]
		};
		myChart.setOption(option);

		option && myChart.setOption(option);
	</script>
</body>

</html>

world.js 世界地图下载https://download.csdn.net/download/Jie0817/76626391