<template>
  <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template>

<script setup>
import { computed } from 'vue';
const prop = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const options = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let tooltipText = '';
        let xAxisValue = params[0].name; // 获取 x 轴的值
        params.forEach((item) => {
          tooltipText += `${item.marker}${item.seriesName}: ${item.value} kWh<br>`;
        });
        return `${xAxisValue}<br>${tooltipText}`;
      }
    },
    backgroundColor: 'transparent',
    xAxis: {
      type: 'category',
      data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: "耗电量",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 198, 255, 0.5)' },
              { offset: 1, color: 'rgba(0, 114, 255, 0.01)' }
            ]
          }
        },
      }
    ]
  };
});
</script>

<style lang="scss" scoped></style>
