|  |  |  | @ -4,7 +4,7 @@ | 
		
	
		
			
				|  |  |  |  |   创建人:Zhaipeixiu | 
		
	
		
			
				|  |  |  |  | --> | 
		
	
		
			
				|  |  |  |  | <script setup lang="ts"> | 
		
	
		
			
				|  |  |  |  | import {onMounted, ref} from 'vue' | 
		
	
		
			
				|  |  |  |  | import {ref} from 'vue' | 
		
	
		
			
				|  |  |  |  | import * as echarts from 'echarts' | 
		
	
		
			
				|  |  |  |  | const emit = defineEmits(['confirmDia']) | 
		
	
		
			
				|  |  |  |  | let showDia = ref<boolean>(false) | 
		
	
	
		
			
				
					|  |  |  | @ -22,12 +22,12 @@ const confirmDia = (): void => { | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | 
 | 
		
	
		
			
				|  |  |  |  | /** | 
		
	
		
			
				|  |  |  |  |  *  绘制折线图 | 
		
	
		
			
				|  |  |  |  |  *  绘制折线图(航线碰撞检测) | 
		
	
		
			
				|  |  |  |  |  * @param xData x数组 | 
		
	
		
			
				|  |  |  |  |  * @param yData y数组,以面积线绘制 | 
		
	
		
			
				|  |  |  |  |  * @param yData2 y数组,以折线绘制 | 
		
	
		
			
				|  |  |  |  |  */ | 
		
	
		
			
				|  |  |  |  | const drawChart = (xData:number[],yData:number[],yData2:number[]) => { | 
		
	
		
			
				|  |  |  |  | const drawChart_AirlineDetect = (xData:number[],yData:number[],yData2:number[]) => { | 
		
	
		
			
				|  |  |  |  |   let myChart = echarts.init(document.getElementById('profileChart')) | 
		
	
		
			
				|  |  |  |  |   // 绘制图表 | 
		
	
		
			
				|  |  |  |  |   myChart.setOption({ | 
		
	
	
		
			
				
					|  |  |  | @ -119,13 +119,106 @@ const drawChart = (xData:number[],yData:number[],yData2:number[]) => { | 
		
	
		
			
				|  |  |  |  |     ] | 
		
	
		
			
				|  |  |  |  |   }); | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | /** | 
		
	
		
			
				|  |  |  |  |  *  绘制折线图(地形剖面) | 
		
	
		
			
				|  |  |  |  |  * @param xData x数组 | 
		
	
		
			
				|  |  |  |  |  * @param yData y数组,以面积线绘制 | 
		
	
		
			
				|  |  |  |  |  */ | 
		
	
		
			
				|  |  |  |  | const drawChart_TerrainProfile = (xData:number[],yData:number[]) => { | 
		
	
		
			
				|  |  |  |  |   let myChart = echarts.init(document.getElementById('profileChart')) | 
		
	
		
			
				|  |  |  |  |   // 绘制图表 | 
		
	
		
			
				|  |  |  |  |   myChart.setOption({ | 
		
	
		
			
				|  |  |  |  |     legend:{ | 
		
	
		
			
				|  |  |  |  |       show: true, | 
		
	
		
			
				|  |  |  |  |       type: 'plain', | 
		
	
		
			
				|  |  |  |  |       top: '7%', | 
		
	
		
			
				|  |  |  |  |       data:[ | 
		
	
		
			
				|  |  |  |  |         { | 
		
	
		
			
				|  |  |  |  |           name: 'groundLine', | 
		
	
		
			
				|  |  |  |  |           itemStyle: 'inherit', | 
		
	
		
			
				|  |  |  |  |           lineStyle: 'inherit', | 
		
	
		
			
				|  |  |  |  |         }, | 
		
	
		
			
				|  |  |  |  |         { | 
		
	
		
			
				|  |  |  |  |           name: 'airLine', | 
		
	
		
			
				|  |  |  |  |           itemStyle: 'inherit', | 
		
	
		
			
				|  |  |  |  |           lineStyle: 'inherit', | 
		
	
		
			
				|  |  |  |  |         }] | 
		
	
		
			
				|  |  |  |  |     }, | 
		
	
		
			
				|  |  |  |  |     tooltip: { | 
		
	
		
			
				|  |  |  |  |       show: true, | 
		
	
		
			
				|  |  |  |  |       trigger: 'axis', | 
		
	
		
			
				|  |  |  |  |       axisPointer: { | 
		
	
		
			
				|  |  |  |  |         type: 'cross' | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       formatter:'地表高度: {c0}' | 
		
	
		
			
				|  |  |  |  |     }, | 
		
	
		
			
				|  |  |  |  |     xAxis: { | 
		
	
		
			
				|  |  |  |  |       data: xData, | 
		
	
		
			
				|  |  |  |  |       name: '距离', | 
		
	
		
			
				|  |  |  |  |       nameTextStyle: { | 
		
	
		
			
				|  |  |  |  |         fontWeight:'bolder', | 
		
	
		
			
				|  |  |  |  |         fontSize: 14 | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       nameLocation: 'end', | 
		
	
		
			
				|  |  |  |  |       axisLine:{ | 
		
	
		
			
				|  |  |  |  |         onZero: false, | 
		
	
		
			
				|  |  |  |  |         show: true,    // 是否显示坐标轴轴线 | 
		
	
		
			
				|  |  |  |  |         symbol: ['none', 'arrow'], | 
		
	
		
			
				|  |  |  |  |         symbolSize: [7, 10] | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       axisLabel: { | 
		
	
		
			
				|  |  |  |  |         formatter: '{value} m', | 
		
	
		
			
				|  |  |  |  |         margin: 5, | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       axisTick: { | 
		
	
		
			
				|  |  |  |  |         show: true,    // 是否显示坐标轴刻度 | 
		
	
		
			
				|  |  |  |  |         inside: true,     // 坐标轴刻度是否朝内,默认朝外 | 
		
	
		
			
				|  |  |  |  |         alignWithLabel: true, | 
		
	
		
			
				|  |  |  |  |         lineStyle: { | 
		
	
		
			
				|  |  |  |  |           color: '#000000',     //刻度线的颜色 | 
		
	
		
			
				|  |  |  |  |           type: 'solid',    //坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型) | 
		
	
		
			
				|  |  |  |  |         }, | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |     }, | 
		
	
		
			
				|  |  |  |  |     yAxis: { | 
		
	
		
			
				|  |  |  |  |       type: 'value', | 
		
	
		
			
				|  |  |  |  |       name: '高度', | 
		
	
		
			
				|  |  |  |  |       nameTextStyle: { | 
		
	
		
			
				|  |  |  |  |         fontWeight:'bolder', | 
		
	
		
			
				|  |  |  |  |         fontSize: 14 | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       nameLocation: 'end', | 
		
	
		
			
				|  |  |  |  |       position: 'left', | 
		
	
		
			
				|  |  |  |  |       axisLabel: { | 
		
	
		
			
				|  |  |  |  |         formatter: '{value} m' | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       axisLine: { | 
		
	
		
			
				|  |  |  |  |         show: true, | 
		
	
		
			
				|  |  |  |  |         symbol: ['none', 'arrow'], | 
		
	
		
			
				|  |  |  |  |         symbolSize: [7, 10] | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |     }, | 
		
	
		
			
				|  |  |  |  |     series: [ | 
		
	
		
			
				|  |  |  |  |       { | 
		
	
		
			
				|  |  |  |  |         name:'groundLine', | 
		
	
		
			
				|  |  |  |  |         type: 'line', | 
		
	
		
			
				|  |  |  |  |         data: yData, | 
		
	
		
			
				|  |  |  |  |         areaStyle: { | 
		
	
		
			
				|  |  |  |  |           color: '#37a5fb', | 
		
	
		
			
				|  |  |  |  |           opacity: 0.5 | 
		
	
		
			
				|  |  |  |  |         } | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |     ] | 
		
	
		
			
				|  |  |  |  |   }); | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | 
 | 
		
	
		
			
				|  |  |  |  | // vue3中规定,使用了 <script setup> 的组件是默认私有的: | 
		
	
		
			
				|  |  |  |  | // 一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西,除非子组件在其中通过 defineExpose 宏显式暴露 | 
		
	
		
			
				|  |  |  |  | defineExpose({ | 
		
	
		
			
				|  |  |  |  |   openDia, | 
		
	
		
			
				|  |  |  |  |   closeDia, | 
		
	
		
			
				|  |  |  |  |   drawChart, | 
		
	
		
			
				|  |  |  |  |   drawChart_AirlineDetect, | 
		
	
		
			
				|  |  |  |  |   drawChart_TerrainProfile | 
		
	
		
			
				|  |  |  |  | }) | 
		
	
		
			
				|  |  |  |  | 
 | 
		
	
		
			
				|  |  |  |  | 
 | 
		
	
	
		
			
				
					|  |  |  | 
 |