4dkk_mp/src/views/statistics/components/lineEcharts2.vue

<template>
  <Card title="订单数据统计" :loading="loading">
    <template #extra>
      <div class="condition">
          <div class="selct" style="display: inline-block;">
            <!-- <span style="margin-right:15px"></span> -->
            <Select
            v-model:value="type"
            style="width: 100px;margin-right:30px"
            placeholder="请选择颗粒度"
            :options="typeOptions"
            @change="handleType"
          ></Select>
          </div>
          
          <div class="selct" style="display: inline-block;margin-right:15px">
            <RangePicker v-model:value="selectTime" :picker="picker" />
          </div>
          
          <div class="selct" style="display: inline-block;">
            <!-- <span style="margin-right:15px">颗粒度</span> -->
            <Select
            v-model:value="value"
            style="width: 100px;margin-right:30px"
            placeholder="请选择颗粒度"
            :options="options"
            @change="handleData"
          ></Select>
          </div>
          <a-button type="primary" >导出</a-button>
      </div>
    </template>
      <div ref="chartRef" :style="{ height, width }"></div>
  </Card>
</template>
<script lang="ts">
  import { basicProps } from './props';
  // import { dateUtil } from '/@/utils/dateUtil';
</script>
<script lang="ts" setup>
  import { Card, Select, DatePicker } from 'ant-design-vue';
  const {RangePicker} = DatePicker;
  import { ref, Ref, watch } from 'vue';
  // import type { dataItemType } from './props';
  import { useECharts } from '/@/hooks/web/useECharts';
  import type { Dayjs } from 'dayjs';
  const props = defineProps({
  loading: Boolean,
    ...basicProps,
  });
  
  type RangeValue = [Dayjs, Dayjs];
  const picker = ref('date')
  const value = ref('1');
  const selectTime = ref<RangeValue>();
  const options = ref<SelectProps['options']>([
        {
          value: '1',
          label: '日',
        },
        {
          value: '2',
          label: '周',
        },
        {
          value: '2',
          label: '月',
        },
      ]);
  const type = ref('1');
  const typeOptions = ref<SelectProps['options']>([
        {
          value: '1',
          label: '数量',
        },
        {
          value: '2',
          label: '金额',
        },
      ]);
  const viewStaticsData = ref<number[]>([1,5,6,8,55,1,5,6,8,1]);
  const shareStaticsData = ref<number[]>([2,55,10,2,6,1,5,6,8,1]);
  const yixStringData = ref<string[]>(['11','22','33','44','ss','11','22','33','44','ss']);
  const maxSize = ref(0);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  function handleData(val){
    let obj ={
      1:'date',
      2:'week',
      3:'month',
    }
    console.log('handleChange',val)
  }
  function handleType(val){
    console.log('handleChange',val)
  }
  function handlesetOptions() {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      legend: {
        orient: 'horizontal',
        bottom: 0,
      },
      // grid: { left: '2%', right: '2%', top: '10%', bottom: '10%', containLabel: true },
      xAxis: {
        type: 'category',
        // data: [...new Array(30)].map((_item, index) => `${index + 1}日`),
        data: yixStringData.value,
      },
      yAxis: {
        type: 'value',
        max: maxSize.value,
        splitNumber: 4,
      },
      series: [
        {
          data: viewStaticsData.value,
          type: 'line',
          itemStyle: { color: '#38a0ff' },
          // barMaxWidth: 80,
          name: '用户浏览量',
        },
        {
          data: shareStaticsData.value,
          type: 'line',
          itemStyle: { color: '#4cca73' },
          // barMaxWidth: 80,
          name: '用户分享数',
        },
      ],
    });
  }
  // props.viewStatics,
  watch(
    // () => [props.viewStatics, props.shareStatics],
    // ([data1, data2]) => {
    () => props.loading,
    () => {
      console.log('viewStatics-data');
      // viewStaticsData.value = data1.reduce<number[]>(
      //   (prev: number[], current) => prev.concat(Number(current.amount)),
      //   [],
      // );

      // yixStringData.value = data1.reduce<string[]>(
      //   (prev: string[], current) => prev.concat(current.date),
      //   [],
      // );
      // shareStaticsData.value = data2.reduce<number[]>(
      //   (prev: number[], current) => prev.concat(Number(current.amount)),
      //   [],
      // );

      const maxNumber = Math.max(...viewStaticsData.value.concat(shareStaticsData.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();
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>