data-marketing-platform/src/views/count/engagement/frequency/OneDay.vue

<template>
  <el-card shadow="none" style="padding: 10px 14px;">
    <div class="trend-container">
      <div class="card-title">
        日启动次数分布<el-tooltip class="box-item" effect="light" placement="right-start">
          <template #content>
            <div style="width: 300px;">
              您可以查看用户在任意1天内日启动次数的分布情况，同时可以对日启动次数的数据进行版本、渠道、分群的交叉筛选。<br />
              <span style="color: rgba(22, 122, 240, 1);">日启动次数：</span>（用户）一天内启动应用的次数
            </div>
          </template>
          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
            <Svg name="export"></Svg>
          </span>
        </el-tooltip>
      </div>
      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" :type="type" :form="form" />
      <div class="chart-container">
        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
          style="height: 300px;" />
      </div>
      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
      <ExportToCSV :data="formatData" :columns="columns" :fileName="'日启动次数分布'" />
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import BarChart from '/@/views/count/components/BarChart.vue';
import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
import FormEcharts from '../components/FormEcharts.vue';
import Svg from '/@/components/Svg.vue';

const props = defineProps({
  type: {
    type: String,
    default: 'date'
  },
  form: {
    type: Object,
    default: () => ({})
  }
})

const averageValue = ref({
  time: '平均每日启动次数',
  value: '1.23'
})

// 多系列数据对比
const usageTimeData = ref([
  {
    name: '1-2',
    values: []
  },
  {
    name: '3-5',
    values: []
  },
  {
    name: '6-10',
    values: []
  },
  {
    name: '11-20',
    values: []
  }
])

const seriesNames = ref<string[]>([]);

const handleDateChange = (val: string[]) => {
  // 强制触发响应式更新
  seriesNames.value = [...val];

  // 创建新的数据对象以确保响应式更新
  const newData = usageTimeData.value.map((item: any) => ({
    ...item,
    values: val.map((date: string) => {
      const value = Math.floor(Math.random() * 100);
      return {
        value: value,
        percentage: `${value}%`
      }
    })
  }));

  console.log(newData);

  usageTimeData.value = newData;
}


// 定义表格列配置
const columns = [
  { prop: 'time', label: '启动次数' },
  { prop: 'count', label: '用户数' },
  { prop: 'percentage', label: '用户数比例' }
];

const formatData = computed(() => {
  console.log(`formatData: `);
  console.log(usageTimeData.value);
  return usageTimeData.value.map((item: any) => {
    return {
      time: item.name,
      count: item.values[0]?.value || 0,
      percentage: `${item.values[0]?.value || 0}%`
    }
  })
})
</script>
<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';

svg {
  vertical-align: middle;
  margin: 0 0 0 12px;
}

.chart-container {
  margin: 0 auto;
  max-width: 1360px;
}
</style>