echarts实现离线世界地图（国内）展示

最新推荐文章于 2024-08-09 09:58:52 发布

weixin_45387491

最新推荐文章于 2024-08-09 09:58:52 发布

阅读量2.8k

点赞数

分类专栏： js 文章标签： echarts

本文链接：https://blog.csdn.net/weixin_45387491/article/details/95448739

版权

本文介绍了如何使用echarts实现离线状态下的世界地图（国内）展示，包括资源引入、HTML布局、核心JS代码的步骤，最终展示了示例结果。

摘要由CSDN通过智能技术生成

1、首先引入需要的资源

<script src="echarts.min (1).js"></script> 
	<script src="world.js"></script>

2、实现HTML的body部分

<body>
	 <div id="main"></div>
</body>

3、引入核心JS实现代码

var myChart = echarts.init(document.getElementById('main'));

 var geoCoordMap = {
	'南宁': [108.479, 23.1152],
	'广州': [113.5107, 23.2196],
	'重庆': [107.7539, 30.1904],
	'芬兰': [24.909912, 60.169095], 
	'美国': [-100.696295, 33.679979], 
	'日本': [139.710164, 35.706962], 
	'韩国': [126.979208, 37.53875], 
	'瑞士': [7.445147, 46.956241],
	'东南亚': [117.53244, 5.300343], 
	'澳大利亚': [135.193845, -25.304039], 
	'德国': [13.402393, 52.518569], 
	'英国': [-0.126608, 51.208425], 
	'加拿大': [-102.646409, 59.994255]
};

/* 
	记录下起点城市和终点城市的名称，以及权重
	数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小
 */

// 重庆
var CQData = [
	[{name: '重庆'}, {name: "芬兰",value: 30}],
	[{name: '重庆'}, {name: "德国",value: 90}],
	[{name: '重庆'}, {name: "英国",value: 30}],
	[{name: '重庆'}, {name: "韩国",value: 30}]
];

// 广州
var GZData = [
	[{name: '广州'}, {name: "日本",value: 30}]