<script name="repairEcharts" setup lang="ts">
import Echarts from '@/components/Echarts/index.vue';
import { getLast7Days } from '@/utils/time';
import { EChartsOption } from 'echarts';
const chartConfig = shallowRef<EChartsOption>({
  grid: {
    left: '1%',
    right: '1%',
    top: '10%',
    bottom: '1%',
    containLabel: true
  },
  xAxis: {
    data: getLast7Days()
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [100, 140, 230, 100, 130, 180, 173],
      type: 'line',
      smooth: true,
      name: '维修单数',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1, // 从上到下渐变
          colorStops: [
            { offset: 0, color: '#e2edff' }, // 顶部：半透明蓝色
            { offset: 1, color: '#f2f9ff' } // 底部：极浅蓝/透明
          ]
        }
      },
      lineStyle: {
        color: '#1a75ff'
      },
      itemStyle: {
        color: '#1a75ff'
      },
      label: {
        show: true,
        color: '#3f8afc',
        position: 'top'
      }
    }
  ]
});
</script>

<template>
  <div class="w-full h-full">
    <Echarts :options="chartConfig" />
  </div>
</template>

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