标绘查询修改

surprise

2023-10-26 19a4741002f4208bf7fc951cbf3219897af5699a

 src/components/BarGraph.vue

@@ -1,11 +1,6 @@
<template>
  <div class="title">
    {{ layerData.layerName }}
  </div>
  <div
    id="myEcharts"
    :style="{ width: width, height: height }"
  ></div>
  <div class="title">{{ layerData.layerName }}</div>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
</template>
<script lang="ts" setup>
import {
@@ -72,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(() => {
@@ -119,9 +116,10 @@
  if (myChart) {
    myChart.clear();
  }
  var valXData=  xAxisData.value.filter(res=>{
 return (res/1000).toFixed(2)
  })
  var valXData = [];
  xAxisData.value.filter((rs) => {
    valXData.push((parseFloat(rs) / 1000).toFixed(3));
  });
  myChart = myEcharts.init(
    document.getElementById(`myEcharts`),
    "purple-passion"
@@ -147,13 +145,14 @@
      // data: xAxisData.value,
    },
    xAxis: {
      name: "千米（KM）",
      name: "千米",
      type: "category",
      data: valXData,
      show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: true, // 不显示坐标轴刻度线
      },

      axisLine: {
        show: true, // 不显示坐标轴线
      },
@@ -189,7 +188,7 @@
                "数值： " +
                res.vals[0] +
                " <br> 距离：" +
                res.len +
                (res.len / 1000).toFixed(3) +
                "KM<br> 经度：" +
                res.x.toFixed(6) +
                "<br> 纬度：" +
@@ -208,7 +207,7 @@
    grid: {
      left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字

      right: "10%",
      right: "23%",

      containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
    },