|
@@ -213,7 +213,6 @@ function initLineChart(): void {
|
|
|
onMounted(() => {
|
|
|
initLineChart();
|
|
|
initQualityChart();
|
|
|
- initBehaviorChart();
|
|
|
});
|
|
|
|
|
|
watch(timeGranularity, () => {
|
|
@@ -246,101 +245,7 @@ const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue')
|
|
|
// 展开/收起明细
|
|
|
const showDetail1 = ref(true);
|
|
|
|
|
|
-// 用户质量(留存率)
|
|
|
-const qualityChartRef = ref<HTMLDivElement | null>(null);
|
|
|
-let qualityChart: echarts.ECharts | null = null;
|
|
|
|
|
|
-const qualityXAxis = ref<string[]>([
|
|
|
- '2025-07-01',
|
|
|
- '2025-07-08',
|
|
|
- '2025-07-15',
|
|
|
- '2025-07-22',
|
|
|
- '2025-07-29',
|
|
|
- '2025-08-05',
|
|
|
- '2025-08-12',
|
|
|
- '2025-08-19',
|
|
|
- '2025-08-26',
|
|
|
- '2025-09-02',
|
|
|
- '2025-09-09',
|
|
|
- '2025-09-16',
|
|
|
-]);
|
|
|
-
|
|
|
-const retentionSeries = ref<number[]>([20, 23, 27, 24, 22, 15, 5, 4, 16, 26, 25, 2]);
|
|
|
-const industryAvgSeries = ref<number[]>([16, 18, 20, 24, 25, 24, 16, 10, 15, 22, 21, 12]);
|
|
|
-const peerSameScaleSeries = ref<number[]>([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
|
|
|
-
|
|
|
-function initQualityChart(): void {
|
|
|
- if (!qualityChartRef.value) return;
|
|
|
- if (qualityChart) qualityChart.dispose();
|
|
|
- qualityChart = echarts.init(qualityChartRef.value);
|
|
|
- const option: echarts.EChartsOption = {
|
|
|
- tooltip: { trigger: 'axis', valueFormatter: (v) => `${v}%` },
|
|
|
- legend: { data: ['留存率', '同行业App', '同行业同规模App'] },
|
|
|
- grid: { left: 40, right: 20, top: 30, bottom: 30 },
|
|
|
- xAxis: { type: 'category', data: qualityXAxis.value },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- min: 0,
|
|
|
- max: 30,
|
|
|
- axisLabel: { formatter: '{value}%' },
|
|
|
- splitLine: { lineStyle: { color: '#f3f4f6' } },
|
|
|
- },
|
|
|
- series: [
|
|
|
- { name: '留存率', type: 'line', smooth: true, data: retentionSeries.value },
|
|
|
- { name: '同行业App', type: 'line', smooth: true, data: industryAvgSeries.value, color: '#f59e0b' },
|
|
|
- { name: '同行业同规模App', type: 'line', smooth: true, data: peerSameScaleSeries.value, color: '#60a5fa' },
|
|
|
- ],
|
|
|
- };
|
|
|
- qualityChart.setOption(option);
|
|
|
-}
|
|
|
-
|
|
|
-// 用户行为分析(静态)
|
|
|
-const behaviorChartRef = ref<HTMLDivElement | null>(null);
|
|
|
-let behaviorChart: echarts.ECharts | null = null;
|
|
|
-
|
|
|
-const behaviorXAxis = ref<string[]>([
|
|
|
- '2025-07-01',
|
|
|
- '2025-07-08',
|
|
|
- '2025-07-15',
|
|
|
- '2025-07-22',
|
|
|
- '2025-07-29',
|
|
|
- '2025-08-05',
|
|
|
- '2025-08-12',
|
|
|
- '2025-08-19',
|
|
|
- '2025-08-26',
|
|
|
- '2025-09-02',
|
|
|
- '2025-09-09',
|
|
|
- '2025-09-16',
|
|
|
-]);
|
|
|
-
|
|
|
-const activeUsersSeries = ref<number[]>([100, 120, 130, 110, 105, 90, 80, 70, 95, 110, 100, 85]);
|
|
|
-const avgSessionSeries = ref<number[]>([120, 130, 140, 125, 120, 110, 100, 95, 115, 125, 120, 110]);
|
|
|
-const behaviorAvgSeries = ref<number[]>([110, 115, 120, 115, 110, 105, 100, 95, 110, 115, 110, 105]);
|
|
|
-
|
|
|
-function initBehaviorChart(): void {
|
|
|
- if (!behaviorChartRef.value) return;
|
|
|
- if (behaviorChart) behaviorChart.dispose();
|
|
|
- behaviorChart = echarts.init(behaviorChartRef.value);
|
|
|
- const option: echarts.EChartsOption = {
|
|
|
- tooltip: { trigger: 'axis', valueFormatter: (v) => `${v}s` },
|
|
|
- legend: { data: ['活跃用户数', '平均会话时长', '行为均值'] },
|
|
|
- grid: { left: 40, right: 20, top: 30, bottom: 30 },
|
|
|
- xAxis: { type: 'category', data: behaviorXAxis.value },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- min: 0,
|
|
|
- max: 150,
|
|
|
- axisLabel: { formatter: '{value}s' },
|
|
|
- splitLine: { lineStyle: { color: '#f3f4f6' } },
|
|
|
- },
|
|
|
- series: [
|
|
|
- { name: '活跃用户数', type: 'line', smooth: true, data: activeUsersSeries.value },
|
|
|
- { name: '平均会话时长', type: 'line', smooth: true, data: avgSessionSeries.value, color: '#f59e0b' },
|
|
|
- { name: '行为均值', type: 'line', smooth: true, data: behaviorAvgSeries.value, color: '#60a5fa' },
|
|
|
- ],
|
|
|
- };
|
|
|
- behaviorChart.setOption(option);
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|