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

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

  let topChart = null
  let colorList = [
    'rgba(255, 38, 38, 1)',
    'rgba(255, 96, 0, 1)',
    'rgba(255, 165, 7, 1)',
    'rgba(0, 234, 255, 1)',
    'rgba(0, 132, 255, 1)',
    '#2379FF'
  ]
  let colorListA = [
    'rgba(255, 38, 38, 0.1)',
    'rgba(255, 96, 0, 0.1)',
    'rgba(255, 165, 7, 0.1)',
    'rgba(0, 234, 255, 0.1)',
    'rgba(0, 132, 255, 0.1)',
    '#49B1FF'
  ]
  let colorListB = [
    'rgba(249, 136, 136, 1)',
    'rgba(255, 162, 106, 1)',
    'rgba(255, 210, 130, 1)',
    'rgba(142, 255, 206, 1)',
    'rgba(165, 232, 255, 1)'
  ]
  let colorListC = [
    'rgba(249, 136, 136, 0.1)',
    'rgba(255, 162, 106, 0.1)',
    'rgba(255, 210, 130, 0.1)',
    'rgba(142, 255, 206, 0.1)',
    'rgba(165, 232, 255, 0.1)'
  ]
  let result = [
    { name: '河北', value: 86 },
    { name: '山西', value: 83 },
    { name: '河南', value: 73 },
    { name: '内蒙', value: 61 },
    { name: '辽宁', value: 61 }
  ]
  let option = {
    color: colorList,
    backgroundColor: 'transparent',
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    grid: {
      left: '4%',
      right: '4%',
      top: '6%',
      bottom: '-4%',
      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, 10, 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(12),
        MaxSize: 0,
        showBackground: true,
        barBorderRadius: [30, 0, 0, 30],
        backgroundStyle: {
          color: 'rgba(0, 150, 255, 0.15)'
        },
        label: {
          show: true,
          offset: [10, -17],
          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: colorListA[index]
                  },
                  {
                    offset: 1,
                    color: colorList[index]
                  }
                ]
              }
            }
          }
        })
      }
      // {
      //   name: '外圆',
      //   type: 'scatter',
      //   emphasis: {
      //     scale: false
      //   },
      //   showSymbol: true,
      //   symbol: 'circle',
      //   symbolSize: 8, // 进度条白点
      //   z: 2,
      //   data: result.map((item, index) => {
      //     return {
      //       name: item.name,
      //       value: item.value,
      //       itemStyle: {
      //         color: colorListB[index],
      //         borderColor: colorListC[index],
      //         borderWidth: 12,
      //         shadowColor: colorListC[index],
      //         shadowBlur: 10,
      //         opacity: 1
      //       }
      //     }
      //   }),
      //   animationDelay: 500
      // },
      // {
      //   name: '外圆',
      //   type: 'scatter',
      //   emphasis: {
      //     scale: false
      //   },
      //   showSymbol: true,
      //   symbol: 'circle',
      //   symbolSize: 3, // 进度条白点
      //   z: 3,
      //   data: result.map((item, index) => {
      //     return {
      //       name: item.name,
      //       value: item.value,
      //       itemStyle: {
      //         color: colorListB[index],
      //         borderColor: colorListC[index],
      //         borderWidth: 30,
      //         shadowColor: colorListC[index],
      //         shadowBlur: 10,
      //         opacity: 1
      //       }
      //     }
      //   }),
      //   animationDelay: 500
      // }
    ]
  }
  const init = () => {
    topChart = echarts.init(document.getElementById('top'))
    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(260);
  }
</style>
