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

<template>
  <Card :title="title||'订单数据统计'">
    <template #extra>
      <condition type="2"  @change="Search" @expor="expor" />
    </template>
    <div ref="chartRef" :style="{ height, width }"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { basicProps } from './props';
  import condition from './condition.vue';
  import { Card, DatePicker } from 'ant-design-vue';
  import { ref, Ref, watch, defineEmits } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { exportElsxFile, } from '/@/utils/file/download';
  const props = defineProps({
  loading: Boolean,
    ...basicProps,
  });
  const emit = defineEmits(["alertSome"])
  const kjList = ref<number[]>([]);
  const kkList = ref<number[]>([]);
  const ssList = ref<number[]>([]);
  const ssobjList = ref<number[]>([]);
  const yixStringData = ref<string[]>([]);
  const echartTypr = ref('line')
  const nameList = ref<string[]>(['看看场景',]);//'看看场景','深时场景','深时obj']);
  const maxSize = ref(0);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

  function Search(val){
    emit('change',val)
  }
  function expor(val){
    let fileTile = props.title||'订单数据'
    let fields  = {
    'time':'日期',
    'kj':'看看场景',
    // 'kk':'看看场景',
    // 'ss':'深时场景',
    // 'dy':'深时obj',
    }
    if('场景趋势分析' == fileTile){
      fileTile = `${val && val.value == 0?'新增':'累计'}`+fileTile
    }
    let data = yixStringData.value.map((ele,index) => {
      return {
        'time':ele,
        'kj':kjList.value && kjList.value[index] || 0,
        // 'kk':kkList.value && kkList.value[index] || 0,
        // 'ss':ssList.value && ssList.value[index] || 0,
        // 'dy':ssobjList.value && ssobjList.value[index] || 0,
      }
    })
    exportElsxFile(data,fields,fileTile)
  }
  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: kjList.value,
          type: echartTypr.value,
          itemStyle: { color: '#38a0ff' },
          barMaxWidth: 80,
          name: nameList.value[0],
        },
        // {
        //   data: kkList.value,
        //   type: echartTypr.value,
        //   itemStyle: { color: '#4cca73' },
        //   barMaxWidth: 80,
        //   name: nameList.value[1],
        // },
        // {
        //   data: ssList.value,
        //   type: echartTypr.value,
        //   itemStyle: { color: '#FDD56A' },
        //   barMaxWidth: 80,
        //   name: nameList.value[2],
        // },
        // {
        //   data: ssobjList.value,
        //   type: echartTypr.value,
        //   itemStyle: { color: '#d58b55' },
        //   barMaxWidth: 80,
        //   name: nameList.value[3],
        // },
      ],
    });
  }
  watch(
    () => props.echartData,
    (echartData) => {
      kjList.value = echartData.kjList ||[]
      kkList.value = echartData.kkList ||[]
      ssList.value = echartData.ssList ||[]
      ssobjList.value = echartData.ssobjList ||[]
      yixStringData.value = echartData.xdata ||[]
      if(echartData.nameList){
        nameList.value = echartData.nameList
      }
      if(echartData.echartTypr){
        echartTypr.value = echartData.echartTypr
      }
      handlesetOptions();
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>