<template>
  <div class="traffic-flow" id="traffic-flow" />
</template>

<script setup>
  import { fitChartSize } from '@/utils/dataUtil'
  import * as echarts from 'echarts'

  let trafficChart = null

  let option = {
    grid: {
      left: '4%',
      right: '4%',
      top: '10%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      boundaryGap: true,
      type: 'category',
      data: ['河北', '山西', '河南', '内蒙', '辽宁'],
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(5, 72, 134, 1)'
        }
      },
      axisLabel: {
        fontSize: fitChartSize(12),
        color: 'rgba(255,255,255,0.9)'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: fitChartSize(12),
        color: 'rgba(255,255,255,0.9)'
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(0, 150, 255,0.4)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290],
        type: 'bar',
        showBackground: true,
        barWidth: fitChartSize(8),
        itemStyle: {
          barBorderRadius: [3, 3, 0, 0],
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 208, 255, 0)'
              },
              {
                offset: 1,
                color: 'rgba(0, 208, 255, 1)'
              }
            ]
          }
        },
        backgroundStyle: {
          color: 'rgba(0, 150, 255, 0.15)'
        }
      }
    ]
  }
  const init = () => {
    trafficChart = echarts.init(document.getElementById('traffic-flow'))
    trafficChart.setOption(option)
    window.addEventListener('resize', resize)
  }
  const resize = () => {
    if (trafficChart) {
      trafficChart.dispose()
      trafficChart = null
      init()
    }
  }
  onMounted(() => {
    init()
  })
</script>

<style scoped lang="scss">
  .traffic-flow {
    width: 100%;
    height: vh(160);
  }
</style>
