标绘查询

WX

2023-09-15 d91053e5cbe7fac6deee994c22c0529fd1b08755

 src/components/BarGraph.vue

@@ -1,5 +1,8 @@
<template>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
  <div
    :id="`myEcharts${chartsId}`"
    :style="{ width: width, height: height }"
  ></div>
</template>
<script lang="ts" setup>
import {
@@ -11,52 +14,134 @@
  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,
  chartsId: String,
});
let myEcharts = echarts;
let seriesData = ref([]);
let xAxisData = ref([]);
let dataLength;
let data = [];
let isshow = ref(true);
watch(
  () => props.layerData,
  (nVal, oVal) => {
    xAxisData.value = [];
    props.layerData.points.forEach((e, i) => {
      xAxisData.value.push(e.len);
    });
    data = trans(props.layerData.points);
    console.log(data);
    seriesData.value = [];
    data.forEach((e) => {
      seriesData.value.push({
        data: e,
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
          },
        },
      });
    });
    console.log(seriesData.value);

    nextTick(() => {
      initChart();
    });
  },
  { deep: true }
);
onMounted(() => {
  initChart();
  // 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", //取消折点圆圈
      itemStyle: {
        normal: {
          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"),
    document.getElementById(`myEcharts${props.chartsId}`),
    "purple-passion"
  );
  chart.setOption({
    title: {
      text: "",
      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: 18,
      },
    },
    legend: {
      data: [],
      // data: xAxisData.value,
    },
    xAxis: {
      name: "米（m）",
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      data: xAxisData.value,
      show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      axisTick: {
        show: false, // 不显示坐标轴刻度线
@@ -66,6 +151,8 @@
      },
      axisLabel: {
        show: false, // 不显示坐标轴上的文字
        showMinLabel: true, // 强制显示最小值标签
        showMaxLabel: true, // 强制显示最大值标签
      },
      splitLine: {
        show: false, // 不显示网格线
@@ -73,6 +160,13 @@
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
      formatter: "距离：{b}m <br> 数值：{c}", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
    },
    yAxis: {
      type: "value",
@@ -90,23 +184,7 @@
        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}",
            },
          },
        },
      },
    ],
    series: seriesData.value,
  });
  window.onresize = function () {
    chart.resize();