<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script setup>
import { init } 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(init(assetEchart.value))
  chart.value.setOption({
    color: ['#CA9137', '#1D72FF', '#67CC4F'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      textStyle: {
        color: '#D1DEEE'
      },
      data: ['资料新增数', '阅读新增数', '归档新增数']
    },
    grid: {
      top: '18%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#D1DEEE',
        margin: 16
      },
      data: echartData.timeList
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      splitLine: {
        lineStyle: {
          color: '#2C323C'
        }
      }
    },
    series: [
      {
        name: '资料新增数',
        type: 'line',
        data: echartData.fileAddNums
      },
      {
        name: '阅读新增数',
        type: 'line',
        data: echartData.readAddNums
      },
      {
        name: '归档新增数',
        type: 'line',
        data: echartData.archiveAddNums
      }
    ]
  })
}

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>