标绘查询

WX

2023-09-15 d91053e5cbe7fac6deee994c22c0529fd1b08755

 src/components/BarGraphAxisLine.vue

@@ -1,6 +1,6 @@
<template>
  <div class="Echarts_box" :style="{ width: width, height: height }">
    <div id="myEcharts1" style="width: 100%; height: 100%"></div>
    <div id="myEchartsBIG" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script lang="ts" setup>
@@ -13,6 +13,7 @@
  defineEmits,
  watch,
  onUnmounted,
  nextTick,
} from "vue";
import * as echarts from "echarts";

@@ -20,19 +21,71 @@
const props = defineProps({
  width: String,
  height: String,
  layerData: Object,
});
let myEcharts = echarts;
let seriesData = ref([]);
let xAxisData = ref([]);
let dataLength;
let data = [];
onMounted(() => {
  initChart();
  console.log(props.layerData);
  props.layerData.points.forEach((e, i) => {
    xAxisData.value.push(returnFloat1(e.len));
  });
  data = trans(props.layerData.points);

  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 returnFloat1(value) {
  if (value == 0) {
    return value;
  }
  value = Math.round(parseFloat(value) * 10) / 10;
  if (value.toString().indexOf(".") < 0) {
    value = value.toString() + ".0";
  }
  return value;
}
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("myEcharts1"),
    document.getElementById("myEchartsBIG"),
    "purple-passion"
  );
  chart.setOption({
@@ -99,24 +152,43 @@
    },

    legend: {
      data: [],
      // data: xAxisData.value,
    },
    xAxis: {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      data: xAxisData.value,
      name: "米（m）",
      axisLabel: {
        //x轴文字的配置
        showMinLabel: true, // 强制显示最小值标签
        showMaxLabel: true, // 强制显示最大值标签
        //interval: 0, //使x轴文字显示全
        // textStyle: {
        //   color: "rgba(219, 225, 255, 1)",
        // },
        // formatter: function (params) {
        //   var newParamsName = "";
        //   var paramsNameNumber = params.length;
        //   var provideNumber = 3; //一行显示几个字
        //   var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        //   if (paramsNameNumber > provideNumber) {
        //     for (var p = 0; p < rowNumber; p++) {
        //       var tempStr = "";
        //       var start = p * provideNumber;
        //       var end = start + provideNumber;
        //       if (p == rowNumber - 1) {
        //         tempStr = params.substring(start, paramsNameNumber);
        //       } else {
        //         tempStr = params.substring(start, end) + "\n";
        //       }
        //       newParamsName += tempStr;
        //     }
        //   } else {
        //     newParamsName = params;
        //   }
        //   return newParamsName;
        // },
      },
    },
    tooltip: {
      trigger: "axis",
@@ -124,23 +196,7 @@
    yAxis: {
      type: "value",
    },
    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();