<script setup>
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
const canvasRef = ref()

const containerRef = ref()
const props = defineProps({
  data:Object
})
const data = props?.data

const years = data.year

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
  },
  grid: {
    left: 20,
    right: 20,
    top: 20,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: years.map((y) => `${y}年`)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data.data,
      type: 'line',
    }
  ]
};

onMounted(() => {
  const myChart = echarts.init(canvasRef.value)
  myChart.setOption(option)

  const rect = (containerRef.value.getBoundingClientRect())
  canvasRef.value.width = rect.width
  myChart.resize({
    width: rect.width - 40,
    height: 160
  })
})
</script>

<template>
  <div class="card flex-auto" ref="containerRef">
    <div class="h-12 flex justify-between items-end">
      <div class="font-semibold text-lg">设备维修趋势</div>
    </div>
    <canvas ref="canvasRef" height="160" width="800"></canvas>
  </div>
</template>
