<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
import createResizeObserver from '@/utils/resizeObserver'
const assetEchart = ref()
const chart = ref(null)
let unobserve = null
const props = defineProps({
  echartData: {
    type: Object,
    default: () => ({})
  }
});
const { echartData } = props
const initM = () => {
  chart.value = markRaw(echarts.init(assetEchart.value))
  chart.value.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      minInterval: 1,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#2C323C'
        }
      }
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        color: '#D1DEEE'
      },
      data: echartData.typeNames
    },
    series: [
      {
        name: '阅读次数',
        type: 'bar',
        barWidth: 8,
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          offset: [0, 1]
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0,
            [
              {
                offset: 0,
                color: 'rgba(108, 236, 234, 1)'
              },
              {
                offset: 1,
                color: 'rgba(108, 236, 234, 0)'
              }
            ]
          ),
        },
        data: echartData.counts
      }
    ]
  })
}

const onResize = () => {
  chart.value && chart.value.resize()
}

onMounted(() => {
  initM()
  unobserve = createResizeObserver(assetEchart.value, onResize)
})

onBeforeUnmount(() => {
  unobserve()
})
</script>

<style lang="scss" scoped>
.asset_echart {
  height: 100%;
}
</style>