|
|
@@ -3,26 +3,49 @@
|
|
|
<div class="!overflow-auto px-1">
|
|
|
<div class="el-card p-2">
|
|
|
<!-- 顶部控制区域 -->
|
|
|
- <div class="flex items-center justify-between mb-4">
|
|
|
- <div class="flex items-center">
|
|
|
- <h2 class="text-lg font-medium mr-2">用户新鲜度</h2>
|
|
|
- <el-icon class="text-gray-400"><QuestionFilled /></el-icon>
|
|
|
+ <div class=" mb-4">
|
|
|
+ <div class="flex items-center mb-4">
|
|
|
+ <Title :title="t('freshness.title')">
|
|
|
+ <template #default>
|
|
|
+ <el-popover class="box-item" placement="right" trigger="hover" width="250">
|
|
|
+ <template #reference>
|
|
|
+ <el-icon class="ml-1" style="color: #a4b8cf"><QuestionFilled /></el-icon>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div class="ant-popover-inner-content">
|
|
|
+ <div class="um-page-tips-content" style="width: 340px">
|
|
|
+ <p>
|
|
|
+ <span
|
|
|
+ >报表展示每天活跃用户的成分构成，并提供用户成分分析控件做进一步的分析。用户新鲜度帮您从宏观上了解每日启动用户的新老用户比以及来源结构。</span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span
|
|
|
+ >某日的活跃用户来源于当天新增用户、1天前新增用户...30天前新增用户、30+天前新增用户。其中当天新增用户与您在当日的推广行为相关，n天前新增用户与n日前的新增用户和n日留存率有关。</span
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </Title>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<!-- 显示模式切换 -->
|
|
|
<div class="flex items-center">
|
|
|
- <el-radio-group v-model="displayMode" size="small">
|
|
|
+ <el-radio-group v-model="displayMode" >
|
|
|
<el-radio-button label="absolute">绝对值</el-radio-button>
|
|
|
<el-radio-button label="percentage">百分比</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<!-- 配色选择 -->
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-600 mr-2">配色:</span>
|
|
|
<div class="flex space-x-2">
|
|
|
- <div
|
|
|
- v-for="scheme in colorSchemes"
|
|
|
+ <div
|
|
|
+ v-for="scheme in colorSchemes"
|
|
|
:key="scheme.id"
|
|
|
@click="selectColorScheme(scheme.id)"
|
|
|
class="w-4 h-4 rounded cursor-pointer border-2 transition-all"
|
|
|
@@ -31,31 +54,31 @@
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<!-- 用户成分分析 -->
|
|
|
<div class="flex items-center">
|
|
|
<el-checkbox v-model="userCompositionAnalysis">用户成分分析:</el-checkbox>
|
|
|
<div class="ml-2 relative">
|
|
|
<div class="w-32 h-2 bg-gray-200 rounded-full relative">
|
|
|
<!-- 已选择区域 -->
|
|
|
- <div
|
|
|
+ <div
|
|
|
class="absolute top-0 h-full bg-blue-500 rounded-full"
|
|
|
- :style="{
|
|
|
- left: `${startPosition}%`,
|
|
|
- width: `${endPosition - startPosition}%`
|
|
|
+ :style="{
|
|
|
+ left: `${startPosition}%`,
|
|
|
+ width: `${endPosition - startPosition}%`,
|
|
|
}"
|
|
|
></div>
|
|
|
-
|
|
|
+
|
|
|
<!-- 开始拖拽手柄 -->
|
|
|
- <div
|
|
|
- class="absolute top-0 w-2 h-2 bg-white border border-gray-300 rounded-full cursor-pointer transform -translate-y-1"
|
|
|
+ <div
|
|
|
+ class="absolute w-2 h-2 bg-white border top-1 border-gray-300 rounded-full cursor-pointer transform -translate-y-1"
|
|
|
:style="{ left: `calc(${startPosition}% - 4px)` }"
|
|
|
@mousedown="startDrag('start')"
|
|
|
></div>
|
|
|
-
|
|
|
+
|
|
|
<!-- 结束拖拽手柄 -->
|
|
|
- <div
|
|
|
- class="absolute top-0 w-2 h-2 bg-white border border-gray-300 rounded-full cursor-pointer transform -translate-y-1"
|
|
|
+ <div
|
|
|
+ class="absolute w-2 h-2 bg-white border top-1 border-gray-300 rounded-full cursor-pointer transform -translate-y-1"
|
|
|
:style="{ left: `calc(${endPosition}% - 4px)` }"
|
|
|
@mousedown="startDrag('end')"
|
|
|
></div>
|
|
|
@@ -68,10 +91,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<!-- 导出按钮 -->
|
|
|
<el-button type="primary" size="small">
|
|
|
- <el-icon class="mr-1"><Download /></el-icon>
|
|
|
导出
|
|
|
</el-button>
|
|
|
</div>
|
|
|
@@ -92,9 +114,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, watch, computed } from 'vue';
|
|
|
+import { ref, onMounted, watch, computed, defineAsyncComponent } from 'vue';
|
|
|
import * as echarts from 'echarts';
|
|
|
import { QuestionFilled, Download } from '@element-plus/icons-vue';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+
|
|
|
+const { t } = useI18n();
|
|
|
+const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
|
|
|
|
|
|
// 控制状态
|
|
|
const displayMode = ref('absolute');
|
|
|
@@ -116,14 +142,14 @@ function startDrag(type: 'start' | 'end') {
|
|
|
|
|
|
function handleDrag(event: MouseEvent) {
|
|
|
if (!isDragging.value) return;
|
|
|
-
|
|
|
+
|
|
|
// 获取进度条容器
|
|
|
const sliderContainer = document.querySelector('.w-32.h-2.bg-gray-200') as HTMLElement;
|
|
|
if (!sliderContainer) return;
|
|
|
-
|
|
|
+
|
|
|
const rect = sliderContainer.getBoundingClientRect();
|
|
|
const percentage = Math.max(0, Math.min(100, ((event.clientX - rect.left) / rect.width) * 100));
|
|
|
-
|
|
|
+
|
|
|
if (dragType.value === 'start') {
|
|
|
startPosition.value = Math.min(percentage, endPosition.value - 5);
|
|
|
} else if (dragType.value === 'end') {
|
|
|
@@ -145,32 +171,32 @@ const colorSchemes = ref([
|
|
|
id: 'blue',
|
|
|
name: '蓝色系',
|
|
|
upperColor: '#7dd3fc',
|
|
|
- lowerColor: '#3b82f6'
|
|
|
+ lowerColor: '#3b82f6',
|
|
|
},
|
|
|
{
|
|
|
id: 'green',
|
|
|
name: '绿色系',
|
|
|
upperColor: '#86efac',
|
|
|
- lowerColor: '#22c55e'
|
|
|
+ lowerColor: '#22c55e',
|
|
|
},
|
|
|
{
|
|
|
id: 'purple',
|
|
|
name: '紫色系',
|
|
|
upperColor: '#c4b5fd',
|
|
|
- lowerColor: '#8b5cf6'
|
|
|
+ lowerColor: '#8b5cf6',
|
|
|
},
|
|
|
{
|
|
|
id: 'orange',
|
|
|
name: '橙色系',
|
|
|
upperColor: '#fed7aa',
|
|
|
- lowerColor: '#f97316'
|
|
|
+ lowerColor: '#f97316',
|
|
|
},
|
|
|
{
|
|
|
id: 'pink',
|
|
|
name: '粉色系',
|
|
|
upperColor: '#f9a8d4',
|
|
|
- lowerColor: '#ec4899'
|
|
|
- }
|
|
|
+ lowerColor: '#ec4899',
|
|
|
+ },
|
|
|
]);
|
|
|
|
|
|
function selectColorScheme(schemeId: string) {
|
|
|
@@ -190,77 +216,127 @@ let subChart: echarts.ECharts | null = null;
|
|
|
|
|
|
// 模拟数据 - 05-18 时间点
|
|
|
const timeData = [
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18',
|
|
|
- '05-18', '05-18', '05-18', '05-18', '05-18', '05-18'
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
+ '05-18',
|
|
|
];
|
|
|
|
|
|
// 主图表数据 - 上层区域（浅蓝绿色）- 大幅波动的数据
|
|
|
const upperSeriesData = [
|
|
|
- 1200, 800, 600, 400, 800, 1200, 1000, 800, 600, 900, 1100, 800,
|
|
|
- 950, 750, 550, 350, 750, 1150, 950, 750, 550, 850, 1050, 750,
|
|
|
- 1100, 900, 700, 500, 900, 1300, 1100, 900, 700, 1000, 1200, 900,
|
|
|
- 850, 650, 450, 250, 650, 1050, 850, 650, 450, 750, 950, 650,
|
|
|
- 1100, 900, 700, 500, 900, 1300, 1100, 900, 700, 1000, 1200, 900,
|
|
|
- 850, 650, 450, 250, 650, 1050, 850, 650, 450, 750, 950, 650,
|
|
|
- 1100, 900, 700, 500, 900, 1300, 1100, 900, 700, 1000, 1200, 900,
|
|
|
- 850, 650, 450, 250, 650, 1050, 850, 650, 450, 750, 950, 650,
|
|
|
- 1100, 900, 700, 500, 900, 1300, 1100, 900, 700, 1000, 1200, 900,
|
|
|
- 850, 650, 450, 250, 650, 1050, 850, 650, 450, 750, 950, 650
|
|
|
+ 1200, 800, 600, 400, 800, 1200, 1000, 800, 600, 900, 1100, 800, 950, 750, 550, 350, 750, 1150, 950, 750, 550, 850, 1050, 750, 1100, 900, 700, 500,
|
|
|
+ 900, 1300, 1100, 900, 700, 1000, 1200, 900, 850, 650, 450, 250, 650, 1050, 850, 650, 450, 750, 950, 650, 1100, 900, 700, 500, 900, 1300, 1100, 900,
|
|
|
+ 700, 1000, 1200, 900, 850, 650, 450, 250, 650, 1050, 850, 650, 450, 750, 950, 650, 1100, 900, 700, 500, 900, 1300, 1100, 900, 700, 1000, 1200, 900,
|
|
|
+ 850, 650, 450, 250, 650, 1050, 850, 650, 450, 750, 950, 650, 1100, 900, 700, 500, 900, 1300, 1100, 900, 700, 1000, 1200, 900, 850, 650, 450, 250,
|
|
|
+ 650, 1050, 850, 650, 450, 750, 950, 650,
|
|
|
];
|
|
|
|
|
|
// 下层区域数据（蓝色）- 相对平坦的数据
|
|
|
const lowerSeriesData = [
|
|
|
- 200, 180, 160, 150, 180, 200, 190, 180, 170, 190, 210, 200,
|
|
|
- 195, 175, 155, 145, 175, 195, 185, 175, 165, 185, 205, 195,
|
|
|
- 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205,
|
|
|
- 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205,
|
|
|
- 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205,
|
|
|
- 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205,
|
|
|
- 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205,
|
|
|
- 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205,
|
|
|
- 190, 170, 150, 140, 170, 190, 180, 170, 160, 180, 200, 190
|
|
|
+ 200, 180, 160, 150, 180, 200, 190, 180, 170, 190, 210, 200, 195, 175, 155, 145, 175, 195, 185, 175, 165, 185, 205, 195, 205, 185, 165, 155, 185,
|
|
|
+ 205, 195, 185, 175, 195, 215, 205, 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205, 205, 185, 165, 155, 185, 205, 195, 185, 175, 195,
|
|
|
+ 215, 205, 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205, 205, 185, 165, 155, 185, 205, 195, 185, 175, 195, 215, 205, 205, 185, 165,
|
|
|
+ 155, 185, 205, 195, 185, 175, 195, 215, 205, 190, 170, 150, 140, 170, 190, 180, 170, 160, 180, 200, 190,
|
|
|
];
|
|
|
|
|
|
function initMainChart(): void {
|
|
|
if (!mainChartRef.value) return;
|
|
|
if (mainChart) mainChart.dispose();
|
|
|
-
|
|
|
+
|
|
|
// 获取当前选中的配色方案
|
|
|
- const currentScheme = colorSchemes.value.find(scheme => scheme.id === selectedColorScheme.value) || colorSchemes.value[0];
|
|
|
-
|
|
|
+ const currentScheme = colorSchemes.value.find((scheme) => scheme.id === selectedColorScheme.value) || colorSchemes.value[0];
|
|
|
+
|
|
|
mainChart = echarts.init(mainChartRef.value);
|
|
|
const option: echarts.EChartsOption = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
- type: 'cross'
|
|
|
- }
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
},
|
|
|
legend: {
|
|
|
- show: false
|
|
|
+ show: false,
|
|
|
},
|
|
|
grid: {
|
|
|
left: 40,
|
|
|
right: 20,
|
|
|
top: 20,
|
|
|
- bottom: 30
|
|
|
+ bottom: 30,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: timeData,
|
|
|
axisLine: { lineStyle: { color: '#e5e7eb' } },
|
|
|
axisLabel: { color: '#6b7280' },
|
|
|
- axisTick: { alignWithLabel: true }
|
|
|
+ axisTick: { alignWithLabel: true },
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
@@ -269,7 +345,7 @@ function initMainChart(): void {
|
|
|
interval: 200,
|
|
|
axisLine: { show: false },
|
|
|
splitLine: { lineStyle: { color: '#f3f4f6' } },
|
|
|
- axisLabel: { color: '#6b7280' }
|
|
|
+ axisLabel: { color: '#6b7280' },
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
@@ -278,18 +354,18 @@ function initMainChart(): void {
|
|
|
stack: 'total',
|
|
|
areaStyle: {
|
|
|
color: currentScheme.upperColor,
|
|
|
- opacity: 0.8
|
|
|
+ opacity: 0.8,
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: currentScheme.upperColor,
|
|
|
- width: 0
|
|
|
+ width: 0,
|
|
|
},
|
|
|
itemStyle: {
|
|
|
- color: currentScheme.upperColor
|
|
|
+ color: currentScheme.upperColor,
|
|
|
},
|
|
|
data: upperSeriesData,
|
|
|
smooth: false,
|
|
|
- showSymbol: false
|
|
|
+ showSymbol: false,
|
|
|
},
|
|
|
{
|
|
|
name: '下层区域',
|
|
|
@@ -297,20 +373,20 @@ function initMainChart(): void {
|
|
|
stack: 'total',
|
|
|
areaStyle: {
|
|
|
color: currentScheme.lowerColor,
|
|
|
- opacity: 1
|
|
|
+ opacity: 1,
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: currentScheme.lowerColor,
|
|
|
- width: 0
|
|
|
+ width: 0,
|
|
|
},
|
|
|
itemStyle: {
|
|
|
- color: currentScheme.lowerColor
|
|
|
+ color: currentScheme.lowerColor,
|
|
|
},
|
|
|
data: lowerSeriesData,
|
|
|
smooth: false,
|
|
|
- showSymbol: false
|
|
|
- }
|
|
|
- ]
|
|
|
+ showSymbol: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
mainChart.setOption(option);
|
|
|
}
|
|
|
@@ -318,36 +394,36 @@ function initMainChart(): void {
|
|
|
function initSubChart(): void {
|
|
|
if (!subChartRef.value) return;
|
|
|
if (subChart) subChart.dispose();
|
|
|
-
|
|
|
+
|
|
|
// 获取当前选中的配色方案
|
|
|
- const currentScheme = colorSchemes.value.find(scheme => scheme.id === selectedColorScheme.value) || colorSchemes.value[0];
|
|
|
-
|
|
|
+ const currentScheme = colorSchemes.value.find((scheme) => scheme.id === selectedColorScheme.value) || colorSchemes.value[0];
|
|
|
+
|
|
|
subChart = echarts.init(subChartRef.value);
|
|
|
const option: echarts.EChartsOption = {
|
|
|
tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
+ trigger: 'axis',
|
|
|
},
|
|
|
legend: {
|
|
|
- show: false
|
|
|
+ show: false,
|
|
|
},
|
|
|
grid: {
|
|
|
left: 40,
|
|
|
right: 20,
|
|
|
top: 20,
|
|
|
- bottom: 30
|
|
|
+ bottom: 30,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: timeData,
|
|
|
axisLine: { lineStyle: { color: '#e5e7eb' } },
|
|
|
axisLabel: { color: '#6b7280' },
|
|
|
- axisTick: { alignWithLabel: true }
|
|
|
+ axisTick: { alignWithLabel: true },
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisLine: { show: false },
|
|
|
splitLine: { lineStyle: { color: '#f3f4f6' } },
|
|
|
- axisLabel: { color: '#6b7280' }
|
|
|
+ axisLabel: { color: '#6b7280' },
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
@@ -355,20 +431,20 @@ function initSubChart(): void {
|
|
|
type: 'line',
|
|
|
areaStyle: {
|
|
|
color: currentScheme.lowerColor,
|
|
|
- opacity: 1
|
|
|
+ opacity: 1,
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: currentScheme.lowerColor,
|
|
|
- width: 0
|
|
|
+ width: 0,
|
|
|
},
|
|
|
itemStyle: {
|
|
|
- color: currentScheme.lowerColor
|
|
|
+ color: currentScheme.lowerColor,
|
|
|
},
|
|
|
data: lowerSeriesData,
|
|
|
smooth: false,
|
|
|
- showSymbol: false
|
|
|
- }
|
|
|
- ]
|
|
|
+ showSymbol: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
subChart.setOption(option);
|
|
|
}
|
jcq