-
-
-
第四步，平均留存分析
+
+
比率指标2 - 月平均活跃天数
+
+
分子可理解为过去30天用户的总活跃天数，分母为过去30天活跃用户数
+ ，分子/分母 即为 过去30天的人均活跃天数
+
+
-
- 留存分析的适用场景：
- 日留存率:
- 快速判断产品是否迎合市场需求，比如新手对产品的UI设计、功能设置、新手引导等的体验是否满意，是否需做调整。
- 快速判断用户粘性，比如用户是否更易受促销活动的影响等等。
- 周留存率:
- 判断用户忠诚度，用户此时对产品基本已有完整的体验。一整套流程体验下来，继续访问的用户可判断为潜在忠诚用户。
- 分析用户再次访问的原因，找出产品最能巩固用户的点，且参考此点以一贯之，拓展应用到更多的用户身上，促使更多的用户留下来。
- 月留存率：
- 评估迭代与优化的效果。砍掉留存率低的产品功能，进行迭代优化。
- 平均留存率的分析，需要结合公司不同时期，与行业平均水平进行对比，找出差距，分析相关原因，从而制定营销策略。
-
-
-
-
+
-
+
+
+
+
+
-
+
+
+
-
+
+
+
+
+
-
-
-
-
-
-
-
第五步，留存分析应用场景
-
-
- 日常工作中，留存分析常用于下述场景：
-
-
- 1. 了解一个渠道的质量
- 可以使用「日留存」来衡量各渠道用户的表现，并以此作为衡量渠道质量的标准之一。如对不同渠道来源的用户进行次日留存、7日留存的对比（不同行业可能选择不同周期），
- 以此衡量不同渠道的用户留存情况。一般来说，留存情况较好可以反应这个渠道质量较好。
-
-
- 2. 判断运营手段/某项功能改动是否奏效
- 当我们期待某个运营手段/某项功能可以期提升留存时，可以对通过分析该运营手段/功能，「覆盖到的新用户」和「未覆盖到的新用户」的留存率，对两部分用户的留存进行对比，来验证手段/功能的有效性。
- 以贴吧为例，该贴吧想检验“看贴”功能是否对新用户的留存是有提升效果，于是对同样来自A渠道的新用户（一部分使用了看贴功能，一部分没有使用看贴功能）进行留存对比。通过比较发现，使用过看贴功能的新用户，
- 三日留存率比未使用过该功能的新用户，多了10%以上。这说明“看贴”功能对新用户留存有着正向促进作用。
-
-
- 3. 衡量一个产品是否健康
- 可以使用「周留存」、「月留存」等指标观察用户在平台上的粘性，衡量产品的健康情况。
+
@@ -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",
},
{
- data1: "A-C",
- data2: "2400",
+ id: "B",
},
{
- data1: "A-D",
- data2: "1100",
+ id: "C",
+ },
+ {
+ id: "D",
},
{
- data1: "B-C",
- data2: "600",
+ id: "E",
+ },
+ {
+ id: "F",
},
{
- data1: "B-D",
- data2: "600",
+ id: "G",
},
{
- data1: "C-D",
- data2: "600",
+ id: "H",
+ },
+ {
+ 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);
+};
diff --git a/src/views/portraitModel/index.vue b/src/views/portraitModel/index.vue
index 3e3443a..63b9ca7 100644
--- a/src/views/portraitModel/index.vue
+++ b/src/views/portraitModel/index.vue
@@ -57,29 +57,29 @@
background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
}"
>
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
