<!--
 * @FilePath: Center.vue
 * @Author: zz
 * @Date: 2024-07-19 11:04:25
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-19 11:11:38
 * @Descripttion: 
-->
<template>
  <Border class="center">
    <v-chart :option="options" class="line"></v-chart>
  </Border>
</template>
<script setup lang="ts">
import Border from "./Border.vue";
import {
  ref,
  onMounted,
  onUnmounted,
  getCurrentInstance,
  onUpdated,
  defineProps,
  computed,
} from "vue";
const { proxy } = getCurrentInstance() as any;

let lineRef = ref();
let lineChart = null;

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
});
// 折线图配置

let options = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
    },
    backgroundColor: "transparent",
    legend: {
      data: ["日耗电曲线"],
      icon: "none",
      right: "10px",
      textStyle: {
        color: "#ff7b12",
        fontSize: 20,
        fontWeight: "bold",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      // data: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
      data: props.data.x,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} ",
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "日耗电曲线",
        type: "line",
        stack: "Total",
        lineStyle: {
          color: "#ff7b12",
        },
        // data: [120, 135, 101, 134, 90, 230, 210],
        data: props.data.y,
        symbol: "none",
        smooth: true,
      },
    ],
  };
});
</script>
<style scoped>
.center {
  height: 30%;
  width: 94%;
  margin: 2% 3%;
}
.line {
  width: 100%;
  height: 100%;
}
</style>
