<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, PropType, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';

  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '250px',
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer:{
        type:'shadow'
      }
    },
    grid: {
      top: '10%',
      left: '1%',
      right: '1%',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      top: '-2%',
      itemGap: 50, //图例每项之间的间隔
      data: ['粉丝总量', '月销量'],
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            //color: '#f9f9f9',
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
        },
        axisTick: {
          show: false,
        },
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 140,
        splitNumber: 7,
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: '#0a3256',
        //   },
        // },
        axisLine: {
          show: false,
        },
        axisLabel: {
          margin: 20,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '粉丝总量',
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {},
        label: {
          show: true,
          position: 'top',
        },
        itemStyle: {
          color: '#FC619D',
        },
        // tooltip: {
        //   show: false,
        // },
        data: [105, 180, 208, 284, 343, 388, 435, 465, 487, 531, 589, 669],
      },
      {
        name: '月销量',
        type: 'bar',
        barWidth: 10,
        // tooltip: {
        //   show: false,
        // },
        label: {
          show: true,
          position: 'top',
        },
        itemStyle: {
          color: '#1990FF',
          borderRadius: 5,
        },
        data: [200, 282, 302, 367, 386, 315, 316, 386, 395, 416, 377, 509],
      },
    ],
  };

  onMounted(() => {
    setOptions(option as any);
  });
</script>
