|
|
|
|
@ -6,10 +6,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="knowledgeFlag">
|
|
|
|
|
<a
|
|
|
|
|
href="https://zhuanlan.zhihu.com/p/400319684"
|
|
|
|
|
href="
|
|
|
|
|
https://blog.csdn.net/kevin1993best/article/details/106329573"
|
|
|
|
|
target="_blank"
|
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
|
>https://zhuanlan.zhihu.com/p/400319684</a
|
|
|
|
|
>
|
|
|
|
|
https://blog.csdn.net/kevin1993best/article/details/106329573</a
|
|
|
|
|
>
|
|
|
|
|
<br />
|
|
|
|
|
</div>
|
|
|
|
|
@ -64,9 +66,10 @@
|
|
|
|
|
<span>第一步，日活跃用户分析</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
日活跃用户（DAU）：每天使用产品或服务的独立用户数量。这个指标可以反映产品的日常使用情况。分析近一个月日活跃用户变动情况，包括变动率。这个时候统计活跃用户需要进行去重，一天活跃多次的只保留一条记录。<br>
|
|
|
|
|
日活跃率 = 去重后的日活跃用户数量 / 历史累计去重后的用户数量*100% <br>
|
|
|
|
|
日活跃平均时长=登录时长/活跃用户数，计算结果保留小数点后两位 <br>
|
|
|
|
|
日活跃用户（DAU）：每天使用产品或服务的独立用户数量。这个指标可以反映产品的日常使用情况。分析近一个月日活跃用户变动情况，包括变动率。这个时候统计活跃用户需要进行去重，一天活跃多次的只保留一条记录。<br />
|
|
|
|
|
日活跃率 = 去重后的日活跃用户数量 / 历史累计去重后的用户数量*100%
|
|
|
|
|
<br />
|
|
|
|
|
日活跃平均时长=登录时长/活跃用户数，计算结果保留小数点后两位 <br />
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<el-table
|
|
|
|
|
@ -81,7 +84,11 @@
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="登录时间" align="center" prop="date">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="日活跃用户（个）" align="center" prop="addNum">
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="日活跃用户（个）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="addNum"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
@ -100,10 +107,15 @@
|
|
|
|
|
style="width: 90px"
|
|
|
|
|
size="small"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-input
|
|
|
|
|
>%
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="日活跃平均时长（分钟）" align="center" prop="day3">
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="日活跃平均时长（分钟）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="day3"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params3"
|
|
|
|
|
@ -114,22 +126,38 @@
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
|
<div>
|
|
|
|
|
<div
|
|
|
|
|
class="draw"
|
|
|
|
|
style="padding-left: 15px; margin-left: 20px"
|
|
|
|
|
@click="drawEcharts"
|
|
|
|
|
>
|
|
|
|
|
绘制图表
|
|
|
|
|
</div>
|
|
|
|
|
<div id="echartsDom" style="width: 750px; height: 500px"></div>
|
|
|
|
|
<div class="analysisConclusion">分析结论</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="analysisConclusion"
|
|
|
|
|
style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
|
|
|
|
|
:rows="12"
|
|
|
|
|
type="textarea"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
/>
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
<div class="caseBack">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第二步，留存分析常用口径计算</span>
|
|
|
|
|
<span>第二步，周活跃用户分析</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
从时间维度划分，常见的的有：次日留存、3日留存、7日留存、14日留存、30日留存、60日留存。<br />
|
|
|
|
|
从用户维度划分，常见的的有：新用户留存、活跃留存。<br />
|
|
|
|
|
请按照第一步计算的表格数据，计算次日留存、3日留存、7日留存、14日留存的平均数，计算结果保留小数点后0位。
|
|
|
|
|
周活跃用户（WAU）：每周使用产品或服务的独立用户数量。这个指标可以反映产品的周活跃情况。<br />
|
|
|
|
|
|
|
|
|
|
周活跃率 = 去重后的周活跃用户数量 / 历史累计去重后的用户数量*100%
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<el-table
|
|
|
|
|
@ -142,113 +170,154 @@
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="" align="center" prop="name">
|
|
|
|
|
<el-table-column label="周数" align="center" prop="week">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="日期间隔" align="center" prop="interval">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="次日" align="center" prop="description">
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="周活跃用户（个）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="description"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 70px"
|
|
|
|
|
style="width: 90px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="3日" align="center" prop="description">
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="周活跃率（%）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="description"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params2"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 70px"
|
|
|
|
|
style="width: 90px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-input
|
|
|
|
|
>%
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="7日" align="center" prop="description">
|
|
|
|
|
</el-table>
|
|
|
|
|
<div style="width: 650px">
|
|
|
|
|
<div class="analysisConclusion">分析结论</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="analysisConclusion"
|
|
|
|
|
style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
|
|
|
|
|
:rows="8"
|
|
|
|
|
type="textarea"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
/>
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
<div class="caseBack">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第三步，月活跃用户分析</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
月活跃用户（MAU）：每月使用产品或服务的独立用户数量。这个指标可以反映产品的长期使用情况。
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="step3Data"
|
|
|
|
|
style="width: 650px"
|
|
|
|
|
border
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="月份" align="center" prop="month">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="月活跃用户（个）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="description"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params3"
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 70px"
|
|
|
|
|
style="width: 90px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="14日" align="center" prop="amount">
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="月活跃率（%）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="description"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params4"
|
|
|
|
|
v-model="scope.row.params2"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 70px"
|
|
|
|
|
style="width: 90px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-input
|
|
|
|
|
>%
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div style="width: 650px">
|
|
|
|
|
<div class="analysisConclusion">分析结论</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="analysisConclusion"
|
|
|
|
|
style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
|
|
|
|
|
:rows="8"
|
|
|
|
|
type="textarea"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
/>
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
<div class="caseBack">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第三步，留存率可视化分析</span>
|
|
|
|
|
<span>第四步，用户活跃综合分析</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
以2021/8/1注册的新增的用户数据为例，绘制之后14日的留存率折线图：
|
|
|
|
|
</span>
|
|
|
|
|
<div class="draw" @click="draw">绘制</div>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<div id="echarts" style="width: 400px; height: 300px"></div>
|
|
|
|
|
<div style="margin-left: 50px">
|
|
|
|
|
<p>通过图表分析，新增用户在哪天之后趋向于平稳</p>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="dayValue"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 120px"
|
|
|
|
|
size="default"
|
|
|
|
|
@change="handleChangeDay"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in dayOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
<div style="font-size: 14px">
|
|
|
|
|
<div style="margin-bottom: 10px">用户粘性的比率指标</div>
|
|
|
|
|
<div>比率指标1- DAU/MAU</div>
|
|
|
|
|
<div style="display: flex; align-items: center">
|
|
|
|
|
<span>通过用户粘性指标定义为过去一天的比过去30天的</span>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/u5627.png"
|
|
|
|
|
alt=""
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
<div class="analysis">
|
|
|
|
|
<div class="conclusion">分析结论：</div>
|
|
|
|
|
<span>
|
|
|
|
|
1、7日留存率，只有27%，流失率达到了73%，相对比较低，需要提供用户粘性；<br />
|
|
|
|
|
2、平缓之后，能够留存下来的客户，是公司的忠诚用户；<br />
|
|
|
|
|
3、14日的留存率，每天一直下降，需要找出原因。
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="font-size: 14px">
|
|
|
|
|
<div>比率指标2 - 月平均活跃天数</div>
|
|
|
|
|
<div style="display: flex; align-items: center">
|
|
|
|
|
<span
|
|
|
|
|
>分子可理解为过去30天用户的总活跃天数，分母为过去30天活跃用户数
|
|
|
|
|
，分子/分母 即为 过去30天的人均活跃天数</span
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="@/assets/images/u5626.png"
|
|
|
|
|
alt=""
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
<div class="caseBack">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第四步，平均留存分析</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
留存分析的适用场景：<br />
|
|
|
|
|
日留存率: <br />
|
|
|
|
|
快速判断产品是否迎合市场需求，比如新手对产品的UI设计、功能设置、新手引导等的体验是否满意，是否需做调整。<br />
|
|
|
|
|
快速判断用户粘性，比如用户是否更易受促销活动的影响等等。<br />
|
|
|
|
|
周留存率: <br />
|
|
|
|
|
判断用户忠诚度，用户此时对产品基本已有完整的体验。一整套流程体验下来，继续访问的用户可判断为潜在忠诚用户。<br />
|
|
|
|
|
分析用户再次访问的原因，找出产品最能巩固用户的点，且参考此点以一贯之，拓展应用到更多的用户身上，促使更多的用户留下来。<br />
|
|
|
|
|
月留存率：<br />
|
|
|
|
|
评估迭代与优化的效果。砍掉留存率低的产品功能，进行迭代优化。<br />
|
|
|
|
|
平均留存率的分析，需要结合公司不同时期，与行业平均水平进行对比，找出差距，分析相关原因，从而制定营销策略。
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="step4Data"
|
|
|
|
|
style="width: 650px"
|
|
|
|
|
style="width: 300px"
|
|
|
|
|
border
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
@ -256,43 +325,54 @@
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="" align="center" prop="name">
|
|
|
|
|
<el-table-column label="用户ID" align="center" prop="id">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="次日" align="center" prop="data1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="3日" align="center" prop="data2">
|
|
|
|
|
<el-table-column label="活跃天数" align="center" prop="data1">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 90px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="7日" align="center" prop="data3">
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-table
|
|
|
|
|
:data="step4DataTable2"
|
|
|
|
|
style="width: 400px; margin-left: 20px"
|
|
|
|
|
border
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="比率指标" align="center" prop="id">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="14日" align="center" prop="data4">
|
|
|
|
|
<el-table-column label="数值" align="center" prop="data1">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 90px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div style="width: 650px">
|
|
|
|
|
<div class="analysisConclusion">分析结论</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="analysisConclusion"
|
|
|
|
|
style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
|
|
|
|
|
:rows="8"
|
|
|
|
|
type="textarea"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
/>
|
|
|
|
|
<div class="submit">提交</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
<div class="caseBack">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第五步，留存分析应用场景</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
日常工作中，留存分析常用于下述场景：
|
|
|
|
|
</span>
|
|
|
|
|
<div style="font-size: 14px; margin-top: 10px">
|
|
|
|
|
1. 了解一个渠道的质量<br />
|
|
|
|
|
可以使用「日留存」来衡量各渠道用户的表现，并以此作为衡量渠道质量的标准之一。如对不同渠道来源的用户进行次日留存、7日留存的对比（不同行业可能选择不同周期），
|
|
|
|
|
以此衡量不同渠道的用户留存情况。一般来说，留存情况较好可以反应这个渠道质量较好。
|
|
|
|
|
</div>
|
|
|
|
|
<div style="font-size: 14px; margin-top: 10px">
|
|
|
|
|
2. 判断运营手段/某项功能改动是否奏效<br />
|
|
|
|
|
当我们期待某个运营手段/某项功能可以期提升留存时，可以对通过分析该运营手段/功能，「覆盖到的新用户」和「未覆盖到的新用户」的留存率，对两部分用户的留存进行对比，来验证手段/功能的有效性。
|
|
|
|
|
以贴吧为例，该贴吧想检验“看贴”功能是否对新用户的留存是有提升效果，于是对同样来自A渠道的新用户（一部分使用了看贴功能，一部分没有使用看贴功能）进行留存对比。通过比较发现，使用过看贴功能的新用户，
|
|
|
|
|
三日留存率比未使用过该功能的新用户，多了10%以上。这说明“看贴”功能对新用户留存有着正向促进作用。
|
|
|
|
|
</div>
|
|
|
|
|
<div style="font-size: 14px; margin-top: 10px">
|
|
|
|
|
3. 衡量一个产品是否健康<br />
|
|
|
|
|
可以使用「周留存」、「月留存」等指标观察用户在平台上的粘性，衡量产品的健康情况。
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line"></div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -309,6 +389,7 @@ const list = ref(["-"]);
|
|
|
|
|
const dayValue = ref("");
|
|
|
|
|
const combinationValue1 = ref("");
|
|
|
|
|
const combinationValue2 = ref("");
|
|
|
|
|
const analysisConclusion = ref("");
|
|
|
|
|
const knowledgeFlag = ref(false);
|
|
|
|
|
//时间间隔分组数-7天内
|
|
|
|
|
const sevenNum = ref(0);
|
|
|
|
|
@ -409,7 +490,6 @@ const step1Data = ref([
|
|
|
|
|
{
|
|
|
|
|
date: "2024-03-30",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]);
|
|
|
|
|
const fileTable1 = ref([
|
|
|
|
|
{
|
|
|
|
|
@ -636,43 +716,66 @@ const fileTable1 = ref([
|
|
|
|
|
]);
|
|
|
|
|
const step2Data = ref([
|
|
|
|
|
{
|
|
|
|
|
name: "平均数",
|
|
|
|
|
week: "第一周",
|
|
|
|
|
interval: "2024/3/1-2024/3/7",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
week: "第二周",
|
|
|
|
|
interval: "2024/3/8-2024/3/14",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
week: "第三周",
|
|
|
|
|
interval: "2024/3/15-2024/3/21",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
week: "第四周",
|
|
|
|
|
interval: "2024/3/22-2024/3/28",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const step3Data = ref([
|
|
|
|
|
{
|
|
|
|
|
data1: "A-B",
|
|
|
|
|
data2: "5900",
|
|
|
|
|
month: "2024年3月",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const step4Data = ref([
|
|
|
|
|
{
|
|
|
|
|
id: "A",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "B",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: "A-C",
|
|
|
|
|
data2: "2400",
|
|
|
|
|
id: "C",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: "A-D",
|
|
|
|
|
data2: "1100",
|
|
|
|
|
id: "D",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
data1: "B-C",
|
|
|
|
|
data2: "600",
|
|
|
|
|
id: "E",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "F",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "G",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: "B-D",
|
|
|
|
|
data2: "600",
|
|
|
|
|
id: "H",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
data1: "C-D",
|
|
|
|
|
data2: "600",
|
|
|
|
|
id: "J",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "K",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const step4Data = ref([
|
|
|
|
|
const step4DataTable2 = ref([
|
|
|
|
|
{
|
|
|
|
|
name: "平均数",
|
|
|
|
|
data1: "666",
|
|
|
|
|
data2: "A",
|
|
|
|
|
data3: "189",
|
|
|
|
|
data4: "衬衫",
|
|
|
|
|
id: "过去30天平均DAU/MAU",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "月平均活跃天数（天）",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const step5Data = ref([
|
|
|
|
|
@ -1109,6 +1212,120 @@ const draw = () => {
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
};
|
|
|
|
|
const drawEcharts = () => {
|
|
|
|
|
for (let i in step1Data.value) {
|
|
|
|
|
console.log(step1Data.value[i]);
|
|
|
|
|
if (
|
|
|
|
|
!step1Data.value[i].params1 ||
|
|
|
|
|
!step1Data.value[i].params2 ||
|
|
|
|
|
!step1Data.value[i].params3
|
|
|
|
|
) {
|
|
|
|
|
proxy.$modal.msgError("请完成所有填空数据");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const xAxisData = [];
|
|
|
|
|
const data1 = [];
|
|
|
|
|
const data2 = [];
|
|
|
|
|
for (let item in step1Data.value) {
|
|
|
|
|
// console.log(step1Data.value[item].date);
|
|
|
|
|
xAxisData.push(step1Data.value[item].date);
|
|
|
|
|
data1.push(step1Data.value[item].params2);
|
|
|
|
|
data2.push(step1Data.value[item].params3);
|
|
|
|
|
}
|
|
|
|
|
var chartDom = document.getElementById("echartsDom");
|
|
|
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
|
|
|
var option;
|
|
|
|
|
|
|
|
|
|
option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: "日活跃分析图",
|
|
|
|
|
left: "center",
|
|
|
|
|
top: "25",
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: "cross",
|
|
|
|
|
crossStyle: {
|
|
|
|
|
color: "#999",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ["日活跃平均时长(分钟)", "日活跃率"],
|
|
|
|
|
top: 5,
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "category",
|
|
|
|
|
data: xAxisData,
|
|
|
|
|
// offset:'10',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
rotate: 90, //代表逆时针旋转45度
|
|
|
|
|
fontSize: "0.6rem",
|
|
|
|
|
},
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: "shadow",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
name: "日活跃平均时长",
|
|
|
|
|
min: 0,
|
|
|
|
|
// max: 250,
|
|
|
|
|
interval: 10,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: "{value}",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
name: "日活跃率",
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100,
|
|
|
|
|
interval: 10,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: "{value}%",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "日活跃平均时长(分钟)",
|
|
|
|
|
type: "bar",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "#F4DAA6",
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
return value + "分钟";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: data2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "日活跃率",
|
|
|
|
|
type: "line",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "#D052E5",
|
|
|
|
|
},
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
return value + "%";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: data1,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
@ -1276,9 +1493,26 @@ const draw = () => {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.analysisConclusion {
|
|
|
|
|
background: url("@/assets/images/分析.png");
|
|
|
|
|
width: 89px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 31px;
|
|
|
|
|
color: #000;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table tr {
|
|
|
|
|
background-color: #002652 !important;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-textarea__inner {
|
|
|
|
|
background: #002652;
|
|
|
|
|
color: #fff;
|
|
|
|
|
// color: #5397C3;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
HeHaonan
2 years ago
