zfb_mp/src/views/dashboard/analysis/components/VisitAnalysis.vue

<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { basicProps } from './props';
  // import { dateUtil } from '/@/utils/dateUtil';
</script>
<script lang="ts" setup>
  import { ref, Ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';

  const props = defineProps({
    ...basicProps,
  });
  const bulletChatAmountsData = ref<number[]>([]);
  const userAmountData = ref<number[]>([]);
  const yixStringData = ref<string[]>([]);
  const maxSize = ref(0);

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  function handleSetOptions() {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      legend: {
        orient: 'horizontal',
        bottom: 0,
      },
      xAxis: {
        type: 'category',
        data: yixStringData.value,
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'solid',
            color: 'rgba(226,226,226,0.5)',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'value',
          max: maxSize.value,
          splitNumber: 4,
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
            },
          },
        },
      ],
      grid: { left: '2%', right: '2%', top: '2%', bottom: '10%', containLabel: true },
      series: [
        {
          smooth: true,
          data: userAmountData.value,
          type: 'line',
          areaStyle: {},
          name: '留言总人数',
          itemStyle: {
            color: '#5ab1ef',
          },
        },
        {
          smooth: true,
          data: bulletChatAmountsData.value,
          type: 'line',
          name: '留言总数',
          areaStyle: {},
          itemStyle: {
            color: '#019680',
          },
        },
      ],
    });
  }

  watch(
    () => [props.bulletChatAmounts, props.userAmount],
    ([data1, data2]) => {
      bulletChatAmountsData.value = data1.reduce<number[]>(
        (prev: number[], current) => prev.concat(Number(current.amount)),
        [],
      );

      yixStringData.value = data1.reduce<string[]>(
        (prev: string[], current) => prev.concat(current.date),
        [],
      );

      userAmountData.value = data2.reduce<number[]>(
        (prev: number[], current) => prev.concat(Number(current.amount)),
        [],
      );
      console.log('viewStatics-data', bulletChatAmountsData.value);
      const maxNumber = Math.max(...bulletChatAmountsData.value.concat(userAmountData.value));
      const pow = Math.pow(10, maxNumber.toString().length - 1);
      maxSize.value = maxNumber > 10 ? Math.floor(maxNumber / 10) * 10 + pow * 2 : 10;
      console.log('maxSize', maxSize.value);
      handleSetOptions();
      // viewStaticsData.value = data;
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>