<template>
  <div class="top" id="jam" />
</template>

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

  let topChart = null
  let result = [
    { name: '路段1', value: 86 },
    { name: '路段1', value: 83 },
    { name: '路段1', value: 73 },
    { name: '路段1', value: 61 },
    { name: '路段1', value: 61 }
  ]
  let option = {
    backgroundColor: 'transparent',
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    grid: {
      left: '4%',
      right: '4%',
      top: '16%',
      bottom: '-10%',
      containLabel: true
    },
    xAxis: [
      {
        splitLine: {
          show: false
        },
        type: 'value',
        show: false
      }
    ],
    yAxis: [
      {
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        type: 'category',
        axisTick: {
          show: false
        },
        data: result.map((item) => item.name),
        axisLabel: {
          show: false
        }
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: fitChartSize(12)
          },
          verticalAlign: 'bottom',
          padding: [0, 0, 6, 0],
          inside: true,
          formatter: function (value) {
            return `{value|${value}}`
          },
          rich: {
            name: {
              align: 'center',
              color: '#D3E5FF',
              fontSize: fitChartSize(14),
              fontFamily: 'Source Han Sans CN'
            },
            value: {
              align: 'center',
              color: '#fff',
              fontSize: fitChartSize(14),
              fontFamily: 'Source Han Sans CN'
            }
          }
        },
        data: result.map((item) => item.value)
      }
    ],
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: fitChartSize(4),
        MaxSize: 0,
        showBackground: true,
        barBorderRadius: [30, 0, 0, 30],
        backgroundStyle: {
          color: 'rgba(0, 150, 255, 0.15)'
        },
        label: {
          show: true,
          offset: [10, -10],
          color: '#D3E5FF',
          fontWeight: 500,
          position: 'left',
          align: 'left',
          fontSize: fitChartSize(14),
          fontFamily: 'Source Han Sans CN',
          formatter: function (params) {
            return params.data.name
          }
        },
        data: result.map((item, index) => {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              barBorderRadius: [3, 0, 0, 3],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255, 112, 33, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 112, 33, 1)'
                  }
                ]
              }
            }
          }
        })
      },
      {
        name: '外圆',
        type: 'scatter',
        emphasis: {
          scale: false
        },
        showSymbol: true,
        symbol: 'circle',
        symbolSize: fitChartSize(10),
        z: 2,
        data: result.map((item, index) => {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              color: '#fff',
              opacity: 1
            }
          }
        }),
        animationDelay: 500
      }
    ]
  }
  const init = () => {
    topChart = echarts.init(document.getElementById('jam'))
    topChart.setOption(option)
  }
  const resize = () => {
    if (topChart) {
      topChart.dispose()
      topChart = null
      init()
    }
  }
  onMounted(() => {
    init()
    window.addEventListener('resize', resize)
  })
</script>

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