GCSGUI/src/components/ProfileAnalysis.vue

<!--
  文件描述：地形剖面图组件
  创建时间：2024/4/23 9:55
  创建人：Zhaipeixiu
-->
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts'
const emit = defineEmits(['confirmDia'])
let showDia = ref<boolean>(false)

const openDia = (): void => {
  showDia.value = true
}

const closeDia = (): void => {
  showDia.value = false
}

const confirmDia = (): void => {
  emit('confirmDia', '弹窗内容事件处理完毕，信息传给父组件。')
}

/**
 *  绘制折线图
 * @param xData x数组
 * @param yData y数组，以面积线绘制
 * @param yData2 y数组，以折线绘制
 */
const drawChart = (xData:number[],yData:number[],yData2: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}<br>航线高度: {c1}'
    },
    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
        }
      },
      {
        name:'airLine',
        type: 'line',
        data: yData2,
      }
    ]
  });
}

// vue3中规定，使用了 <script setup> 的组件是默认私有的：
// 一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露
defineExpose({
  openDia,
  closeDia,
  drawChart,
})


</script>

<template>
<div id="profileChart" v-show="showDia">
</div>
</template>

<style scoped>
#profileChart{
  width: 700px;
  height: 500px;
  position: relative;
}
</style>