SZYGM1.0/src/views/dashboard/components/lineChart.vue

<template>
  <div class="dashboard-content-top-left-item">
    <div class="dashboard-content-top-left-item-top">
      <div class="dashboard-content-top-left-item-top-title">{{ title }}</div>
      <div
        class="dashboard-content-top-left-item-top-time"
        @click="showDatePicker"
      >
        <el-icon color="#ffffff" size="18">
          <Calendar />
        </el-icon>
        <el-icon color="#ffffff">
          <CaretBottom />
        </el-icon>
      </div>
    </div>
    <div class="dashboard-content-top-left-item-bottom">
      <Echarts :id="id" :option="options" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Echarts from "@/components/Echarts/commonChartsBar.vue";
import { Calendar, CaretBottom } from "@element-plus/icons-vue";
import Dialog from "@/components/dialog/index.vue";
import axios from "axios";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "w" + Math.random(),
  },
});
const { title, id } = props;
const options = ref({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    show: true,
    top: 0,
    left: "30%",
    icon: "roundRect",
  },
  grid: {
    left: "0%",
    right: "5%",
    bottom: "0%",
    top: "15%",
    containLabel: true,
  },
  color: ["#F5BB3D", "#73D970", "#6A9DD9"],
  xAxis: {
    type: "category",
    boundaryGap: true,
    data: [
      "0:00",
      "2:00",
      "4:00",
      "6:00",
      "8:00",
      "10:00",
      "12:00",
      "14:00",
      "16:00",
      "18:00",
      "20:00",
      "22:00",
    ],
    axisLine: {
      show: true,
      lineStyle: {
        color: "#8897BC",
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: "#8897BC",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#8897BC",
        formatter: function (item) {
          return item / 10000 + "万";
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(196,194,225, 0.54)",
        },
      },
      name: "单",
    },
    {
      type: "value",
      axisLabel: {
        color: "#8897BC",
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(196,194,225, 0.54)",
        },
      },
      name: "吨",
    },
  ],
  series: [
    {
      name: "运单/单",
      type: "line",
      symbol: "none",
      key: "bagsnum",
      yAxisIndex: 0,
      data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230],
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(125,72,255,0.5)",
            },
            {
              offset: 1,
              color: "rgba(0,180,255,0.01)",
            },
          ],
          global: false,
        },
      },
    },
    {
      name: "重量/吨",
      type: "line",
      symbol: "none",
      yAxisIndex: 1,
      key: "passengers",
      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(125,72,255,0.5)",
            },
            {
              offset: 1,
              color: "rgba(0,180,255,0.01)",
            },
          ],
          global: false,
        },
      },
    },
  ],
});
const form = ref({
  startDate: Date.now(),
  endDate: Date.now(),
});

const disabledStartDate = (time: Date) => {
  let data = new Date(form.value.endDate);
  return time.getTime() > data.getTime();
};
const disabledEndDate = (time: Date) => {
  let data = new Date(form.value.startDate);
  return data.getTime() > time.getTime();
};

const flag = ref(false);
const resetForm = () => {
  flag.value = false;
};

const submitForm = () => {
  flag.value = false;
};

const showDatePicker = () => {
  flag.value = true;
};
</script>

<style lang="scss" scoped>
.dashboard-content-top-left-item {
  &-top {
    width: 100%;
    height: 45px;
    display: flex;
    padding-top: 15px;
    box-sizing: border-box;
    &-title {
      font-size: 16px;
      font-weight: bold;
      color: #75cee1;
      line-height: 1.8;
      margin-right: 10px;
    }
    &-time {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
    }
  }
  &-bottom {
    width: 100%;
    flex: 1;
    position: relative;
    // margin-top: 10px;
  }
}
</style>