标绘查询点，多边形添加最大最小值，线查询添加单位

surprise

2023-11-28 64e1db9d04bd4e2dd8ee4e61f2ec1de922c2f84d

 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>
@@ -31,6 +29,8 @@
let dataLength;
let data = [];
let isshow = ref(true);
let myChart = null;
let optionData = [];
watch(
  () => props.layerData,
  (nVal, oVal) => {
@@ -39,8 +39,9 @@
      xAxisData.value.push(e.len);
    });
    data = trans(props.layerData.points);
    console.log(data);
    optionData = props.layerData.points;
    seriesData.value = [];

    data.forEach((e) => {
      seriesData.value.push({
        data: e,
@@ -56,7 +57,6 @@
        },
      });
    });
    console.log(seriesData.value);

    nextTick(() => {
      initChart();
@@ -67,29 +67,34 @@
onMounted(() => {
  // console.log(props.layerData);
  xAxisData.value = [];
  props.layerData.points.forEach((e, i) => {
    xAxisData.value.push(e.len);
  });
  data = trans(props.layerData.points);
  seriesData.value = [];
  data.forEach((e) => {
    seriesData.value.push({
      data: e,
      type: "line",
      smooth: true,
      symbol: "none", //取消折点圆圈
      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);
    });
  });
  nextTick(() => {
    initChart();
  });
   
    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}",
          },
        },
      });
    });

    nextTick(() => {
      initChart();
    });
  }
});

onUnmounted(() => {
@@ -109,11 +114,19 @@
  return result;
}
function initChart() {
  let chart = myEcharts.init(
  if (myChart) {
    myChart.clear();
  }
  var unit = props.layerData.unit ? props.layerData.unit : '';
  var valXData = [];
  xAxisData.value.filter((rs) => {
    valXData.push((parseFloat(rs) / 1000).toFixed(3));
  });
  myChart = myEcharts.init(
    document.getElementById(`myEcharts`),
    "purple-passion"
  );
  chart.setOption({
  myChart.setOption({
    // title: {
    //   text: props.layerData.layerName,
    //   left: "center",
@@ -134,18 +147,19 @@
      // data: xAxisData.value,
    },
    xAxis: {
      name: "米（m）",
      name: "千米",
      type: "category",
      data: xAxisData.value,
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      data: valXData,
      show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: false, // 不显示坐标轴刻度线
        show: true, // 不显示坐标轴刻度线
      },

      axisLine: {
        show: false, // 不显示坐标轴线
        show: true, // 不显示坐标轴线
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
        show: true, // 不显示坐标轴上的文字
        showMinLabel: true, // 强制显示最小值标签
        showMaxLabel: true, // 强制显示最大值标签
      },
@@ -161,28 +175,66 @@
          backgroundColor: "#6a7985",
        },
      },
      formatter: "数值：{c} <br> 距离：{b}m", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

      // formatter: "数值：{c} <br> 距离：{b}m", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      formatter: (result) => {
        var val = result[0];
        if (optionData) {
          for (var i in optionData) {
            var res = optionData[i];
            if (
              optionData[val.dataIndex].len == res.len &&
              res.vals[0] == val.data
            ) {
              return (
                "数值： " +
                res.vals[0] +
                " <br> 距离：" +
                (res.len / 1000).toFixed(3) +
                "KM<br> 经度：" +
                res.x.toFixed(6) +
                "<br> 纬度：" +
                res.y.toFixed(6)
              );
              break;
            }
          }
          return "数值： " + val.data + " <br> 距离：" + val.dataIndex + "Km";
        } else {
          return "数值： " + val.data + " <br> 距离：" + val.dataIndex + "m";
        }
      },
    },

    grid: {
      left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字

      right: "23%",

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

    yAxis: {
      name: unit,
      type: "value",
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: false, // 不显示坐标轴刻度线
        show: true, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
        show: true, // 不显示坐标轴线
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
        show: true, // 不显示坐标轴上的文字
      },
      splitLine: {
        show: false, // 不显示网格线
        show: true, // 不显示网格线
      },
    },
    series: seriesData.value,
  });
  window.onresize = function () {
    chart.resize();
    myChart.resize();
  };
}
</script>