<template>
  <div class="w-314px">
    <div
      class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
    >
      历年产值趋势
    </div>
    <div class="h-200px mt-30px" ref="chartRef"> 1 </div>
  </div>
</template>

<script setup lang="ts">
  import { Ref, ref, onMounted } from 'vue'
  import { useECharts } from '/@/hooks/web/useECharts'
  import echarts from '/@/utils/lib/echarts'
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
  onMounted(() => {
    setOptions({
      grid: { left: '2%', right: '2%', top: '4%', bottom: '2%', containLabel: true },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      xAxis: {
        type: 'category',
        data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
        },
      },
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#8EEEFF',
              opacity: 0.3,
            },
          },
          axisLabel: {
            color: '#fff',
          },
        },
      ],
      series: [
        {
          data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            color: '#fff',
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#76E9F0',
              },
              {
                offset: 1,
                color: '#1A3537',
              },
            ]),
          },
        },
      ],
    })
  })
</script>

<style scoped></style>
