标绘查询修改

surprise

2023-10-26 19a4741002f4208bf7fc951cbf3219897af5699a

 src/components/BarGraph.vue

@@ -1,4 +1,5 @@
<template>
  <div class="title">{{ layerData.layerName }}</div>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
</template>
<script lang="ts" setup>
@@ -11,61 +12,154 @@
  defineEmits,
  watch,
  onUnmounted,
  nextTick,
} from "vue";
import * as echarts from "echarts";
import { fa } from "element-plus/es/locale";

//defineProps 来接收组件的传值
const props = defineProps({
  width: String,
  height: String,
  layerData: Object,
});
let myEcharts = echarts;
let seriesData = ref([]);
let xAxisData = ref([]);
let dataLength;
let data = [];
let isshow = ref(true);
let myChart = null;
let optionData = [];
watch(
  () => props.layerData,
  (nVal, oVal) => {
    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,
        symbol: "none", //取消折点圆圈
        label: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
        },
      });
    });

    nextTick(() => {
      initChart();
    });
  },
  { deep: true }
);
onMounted(() => {
  initChart();
  // console.log(props.layerData);
  xAxisData.value = [];
  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,

        label: {
          label: {
            show: false,
            position: "top",
            formatter: "{c}",
          },
        },
      });
    });

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

onUnmounted(() => {
  myEcharts.dispose;
});
function trans(arr) {
  let result = [];

  arr.forEach((item) => {
    item.vals.forEach((d, i) => {
      let a = (result[i] = result[i] || []);

      a.push(d);
    });
  });

  return result;
}
function initChart() {
  let chart = myEcharts.init(
    document.getElementById("myEcharts"),
  if (myChart) {
    myChart.clear();
  }
  var valXData = [];
  xAxisData.value.filter((rs) => {
    valXData.push((parseFloat(rs) / 1000).toFixed(3));
  });
  myChart = myEcharts.init(
    document.getElementById(`myEcharts`),
    "purple-passion"
  );
  chart.setOption({
    title: {
      text: "",
      left: "center",
    },
  myChart.setOption({
    // title: {
    //   text: props.layerData.layerName,
    //   left: "center",
    //   textStyle: {
    //     //文字颜色
    //     color: "#fff",
    //     // //字体风格,'normal','italic','oblique'
    //     // fontStyle: "normal",
    //     // //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
    //     // fontWeight: "bold",
    //     // //字体系列
    //     // fontFamily: "sans-serif",
    //     // //字体大小
    //     fontSize: 14,
    //   },
    // },
    legend: {
      data: [],
      // data: xAxisData.value,
    },
    xAxis: {
      name: "千米",
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      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, // 强制显示最大值标签
      },
      splitLine: {
        show: false, // 不显示网格线
@@ -73,44 +167,82 @@
    },
    tooltip: {
      trigger: "axis",
    },
    yAxis: {
      type: "value",
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
      },
      splitLine: {
        show: false, // 不显示网格线
      },
    },
    series: [
      {
        data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
          },
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    ],

      // 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: {
      type: "value",
      show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: true, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: true, // 不显示坐标轴线
      },
      axisLabel: {
        show: true, // 不显示坐标轴上的文字
      },
      splitLine: {
        show: true, // 不显示网格线
      },
    },
    series: seriesData.value,
  });
  window.onresize = function () {
    chart.resize();
    myChart.resize();
  };
}
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.title {
  width: 100%;
  word-wrap: break-word;
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>