byte-sailing-new/src/views/customer/portrait/com/LineTrend.vue

<template>
  <div v-loading="loading">
    <div ref="echartDom" style="height: 200px"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
const props = defineProps({
  customerId: {
    type: String,
  },
});
const { proxy } = getCurrentInstance();
const echartDom = ref(null);
const loading = ref(false);
let myChart = null;
const option = reactive({
  data: {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "0%",
      top: "15px",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      splitLine: {
        lineStyle: {
          type: "dashed",
          // 设置背景横线
          color: "#ccc",
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          // 设置背景横线
          color: "#ccc",
        },
      },
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
        areaStyle: {
          color: "#FCE5CA",
          opacity: 0.4,
        },
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          normal: {
            color: "#FF9315", //改变折线点的颜色
            lineStyle: {
              color: "#FF9315", //改变折线颜色
            },
          },
        },
      },
      {
        data: [210, 885, 644, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
        areaStyle: {
          color: "#D9EDFF",
          opacity: 0.4,
        },
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          normal: {
            color: "#0084FF", //改变折线点的颜色
            lineStyle: {
              color: "#0084FF", //改变折线颜色
            },
          },
        },
      },
    ],
  },
});
const getData = () => {
  loading.value = true;
  proxy
    .post("/saleQuotation/salesTrend", { id: props.customerId })
    .then((res) => {
      let months = res.contractList.map((x) => x.month);
      let dataOne = res.contractList.map((x) => x.contractAmount);
      let dataTwo = res.saleQuotationList.map((x) => x.saleAmount);
      option.data.xAxis.data = months;
      option.data.series[0].data = dataOne;
      option.data.series[1].data = dataTwo;
      myChart.setOption(option.data);
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};
onMounted(() => {
  myChart = echarts.init(echartDom.value);
  if (props.customerId) {
    getData();
  }
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style lang="scss" scoped>
// .dom {
//   height: calc(100% - 50px);
// }
</style>