pj_plan_cloud/src/components/car-abnormal-through-line-chart.vue

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, useTemplateRef, watch } from "vue";
import * as echarts from "echarts";
import { getRecentMonths } from "@/utils/date";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      in: [],
      out: [],
    }),
  },
});

const chartRef = useTemplateRef("chartRef");
let chartInstance = null;

onMounted(async () => {
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption(option);
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener("resize", handleResize);
});

const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

watch(
  () => props.data,
  (val) => {
    if (!chartInstance) return;
    const { in: inData, out: outData } = props.data;
    const inChart = inData.list?.map((v) => {
      return v.carCount;
    });
    const outChart = outData.list?.map((v) => {
      return v.carCount;
    });
    chartInstance.setOption({
      series: [
        { name: outData.typeStr, data: outChart },
        { name: inData.typeStr, data: inChart },
      ],
      xAxis: {
        data: inData.list?.map((v) => {
          return v.time;
        }),
      },
      legend: {
        data: [{ name: outData.typeStr }, { name: inData.typeStr }],
      },
    });
  }
);

const option = {
  backgroundColor: "transparent",
  grid: {
    top: "18%",
    left: "0%",
    right: "4%",
    bottom: "10%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderColor: "#000000",
    borderWidth: 1,
    textStyle: {
      color: "#ffffff",
      fontSize: 12,
    },
    padding: 10,
    // formatter: (params) => {
    //   return `${params[0].axisValue}<br/>${params[0].marker}${params[0].value}辆<br/>
    //           ${params[1].axisValue}<br/>${params[1].marker}${params[1].value}辆<br/>
    //           ${params[2].axisValue}<br/>${params[2].marker}${params[2].value}辆<br/>`;
    // },
    valueFormatter: (value) => value,
  },
  legend: {
    icon: "rect",
    right: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 8,
    itemGap: 16,
    textStyle: { color: "#ffffff", fontSize: 12 },
    itemStyle: { borderWidth: 0, borderColor: "transparent" },
    data: [
      { name: "车出", itemStyle: { color: "#1DB996", borderWidth: 0, borderColor: "transparent" } },
      { name: "车入", itemStyle: { color: "#01C6EF", borderWidth: 0, borderColor: "transparent" } },
    ],
  },
  xAxis: {
    type: "category",
    data: [],
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: "#21303C",
      },
    },
    axisLabel: {
      color: "#ffffff",
      fontSize: 10,
      // backgroundColor: "#2d5a3d",
      // padding: [4, 4, 4, 4],
    },
  },
  yAxis: {
    type: "value",
    name: "车辆数",
    min: 0,
    nameTextStyle: {
      color: "#ffffff",
      fontSize: 10,
      padding: [0, 0, 0, 0],
      // align: "right",
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "#00ffff",
      },
    },
    axisLabel: {
      color: "#ffffff",
      fontSize: 10,
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.2)",
      },
    },
  },
  series: [
    {
      name: "车出",
      type: "line",
      // stack: "Total",
      data: props.data?.out ?? [],
      smooth: true,
      symbol: "circle",
      symbolSize: 0,
      yAxisIndex: 0,
      lineStyle: {
        color: "#1DB996",
        width: 2,
      },
      itemStyle: {
        color: "#1DB996",
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        formatter: "{c}",
        color: "#1DB996",
        fontWeight: "bold",
        fontSize: 12,
      },
      areaStyle: {
        color: "#1DB996",
        opacity: 0.8,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            // { offset: 0, color: "rgba(255, 107, 107, 0.3)" },
            { offset: 0, color: "#1C7C67" },
            { offset: 1, color: "#0D1E25" },
          ],
        },
      },
    },
    {
      name: "车入",
      type: "line",
      // stack: "Total",
      data: props.data?.in ?? [],
      smooth: true,
      symbol: "circle",
      symbolSize: 0,
      yAxisIndex: 0,
      lineStyle: {
        color: "#01C6EF",
        width: 2,
      },
      itemStyle: {
        color: "#01C6EF",
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        formatter: "{c}",
        color: "#01C6EF",
        fontWeight: "bold",
        fontSize: 12,
      },
      areaStyle: {
        color: "#01C6EF",
        opacity: 0.8,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            // { offset: 0, color: "rgba(255, 107, 107, 0.3)" },
            { offset: 0, color: "#097186" },
            { offset: 1, color: "#0D1E25" },
          ],
        },
      },
    },
  ],
};
</script>