月球大数据地理空间分析展示平台-【前端】-月球2期前端
surprise
2023-10-26 19a4741002f4208bf7fc951cbf3219897af5699a
src/components/BarGraph.vue
@@ -1,7 +1,5 @@
<template>
  <div class="title">
    {{ layerData.layerName }}
  </div>
  <div class="title">{{ layerData.layerName }}</div>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
</template>
<script lang="ts" setup>
@@ -69,31 +67,33 @@
onMounted(() => {
  // console.log(props.layerData);
  xAxisData.value = [];
  props.layerData.points.forEach((e, i) => {
    xAxisData.value.push(e.len);
  });
  data = trans(props.layerData.points);
  optionData = props.layerData.points;
  seriesData.value = [];
  data.forEach((e) => {
    seriesData.value.push({
      data: e,
      type: "line",
      smooth: true,
      label: {
        label: {
          show: false,
          position: "top",
          formatter: "{c}",
        },
      },
  if (props.layerData && props.layerData.points) {
    props.layerData.points.forEach((e, i) => {
      xAxisData.value.push(e.len);
    });
  });
    data = trans(props.layerData.points);
    optionData = props.layerData.points;
    seriesData.value = [];
    data.forEach((e) => {
      seriesData.value.push({
        data: e,
        type: "line",
        smooth: true,
  nextTick(() => {
    initChart();
  });
        label: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
        },
      });
    });
    nextTick(() => {
      initChart();
    });
  }
});
onUnmounted(() => {
@@ -118,9 +118,8 @@
  }
  var valXData = [];
  xAxisData.value.filter((rs) => {
    valXData.push((parseFloat(rs) / 1000).toFixed(3));
  })
  });
  myChart = myEcharts.init(
    document.getElementById(`myEcharts`),
    "purple-passion"
@@ -153,7 +152,7 @@
      axisTick: {
        show: true, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: true, // 不显示坐标轴线
      },
@@ -161,7 +160,6 @@
        show: true, // 不显示坐标轴上的文字
        showMinLabel: true, // 强制显示最小值标签
        showMaxLabel: true, // 强制显示最大值标签
      },
      splitLine: {
        show: false, // 不显示网格线
@@ -186,7 +184,6 @@
              optionData[val.dataIndex].len == res.len &&
              res.vals[0] == val.data
            ) {
              return (
                "数值: " +
                res.vals[0] +