！！！求助大佬 Echart flights gl展示每个点的showtip

最新推荐文章于 2024-01-30 15:46:00 发布

原创最新推荐文章于 2024-01-30 15:46:00 发布 · 607 阅读

0 ·

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

收录于

当前文章被以下社区和专栏收录：

本文介绍如何使用ECharts库中的geo3D组件，结合JSON数据，实现全球飞行路线的3D动态展示。文章详细解释了数据处理、地图配置及路线绘制的过程。

showtip展示出每个点名称

<body>
		<div id="main" style="width: 800px;height:600px;"></div>
	</body>
	
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		var uploadedDataURL = "js/flights.json";

myChart.showLoading();

$.getJSON(uploadedDataURL, function(data) {

			myChart.hideLoading();

			function getAirportCoord(idx) {
				return [data.airports[idx][3], data.airports[idx][4]];
			}
			var routes = data.routes.map(function(airline) {
				return [
					getAirportCoord(airline[1]),
					getAirportCoord(airline[2])
					
				];
			});
			console.log("data",data)
           console.log("routes",routes)
			myChart.setOption({
				**tooltip: { //提示框这个不知该怎么用 **
					formatter: function(params) {},
				},
					geo3D: { //1 - 注意到这里是geo3D
						map: 'world', //2 - world
						shading: 'realistic',
						silent: true,
						environment: '#333',
						realisticMaterial: {
							roughness: 0.8,
							metalness: 0
						},
						label: {
						emphasis: {
							show: false //高亮时是否显示地域名称
						}
					},
					//下面的内容忽略了。。。

标签

#求答