修改1

WX

2023-09-21 6435d34a649f7b00855a5fca975a3fed92230a89

 src/components/BarGraph.vue

@@ -1,4 +1,7 @@
<template>
  <div class="title">
    {{ layerData.layerName }}
  </div>
  <div id="myEcharts" :style="{ width: width, height: height }"></div>
</template>
<script lang="ts" setup>
@@ -11,52 +14,128 @@
  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);
watch(
  () => props.layerData,
  (nVal, oVal) => {
    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}",
          },
        },
      });
    });

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