用户来源 首页

src/views/indexEcharts/index.vue

@@ -99,6 +99,10 @@ export default {
           source: [],
         },
       },
+        // ----  用户来源 start -----
+        pieSecondChart: '', // 饼状图实例
+        columnarSecondChart: '', // 柱状图
+        // ----  用户来源 end -----
     };
   },
   computed: {
@@ -128,6 +132,15 @@ export default {
 
           return [row2, row3];          
         }, this.tableData)
+
+
+        // ----- 用户来源 start  -----
+          console.log('selectUserSource - pie: ', x.selectUserSource.pie)
+          console.log('selectUserSource - columnar: ', x.selectUserSource.columnar)
+          this.pie(x.selectUserSource.pie)
+          this.columnar(x.selectUserSource.columnar)
+        // ----- 用户来源 end --------
+
       });;
     },
     toNewUsers() {
@@ -140,136 +153,13 @@ export default {
       this.$router.push({ name: "behaviorAnalysis" });
     },
     drawLine() {
-      // 基于准备好的dom，初始化echarts实例
-      let firstChart = Echarts.init(this.$refs.firstChart);
-      let labelOption = {
-        normal: {
-          show: true,
-          position: "top",
-          fontSize: 15,
-          rich: {
-            name: {
-              textBorderColor: "#fff"
-            }
-          }
-        }
-      };
-      // 绘制图表
-      firstChart.setOption({
-        color: ["#3688f8", "#7974ce"],
-        backgroundColor: "#fff",
-        tooltip: {
-          trigger: "axis"
-        },
-        toolbox: {
-          show: false,
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ["bar"] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
-        calculable: true,
-        legend: {
-          data: ["所有用户", "注册用户"]
-        },
-        xAxis: [
-          {
-            type: "category",
-            axisLabel: {
-              interval: 0,
-              formatter: function(val) {
-                // return val.split("").join("\n");
-                return val;
-              }
-            },
-            data: [
-              "生成海报",
-              "好友分享",
-              "群分享",
-              "线下扫码",
-              "名片分享",
-              "小程序搜索"
-            ]
-          }
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "人数（人）",
-            axisTick: {
-              inside: true
-            },
-            axisLabel: {
-              formatter: "{value}"
-            }
-          }
-        ],
-        grid: {
-          left: "1%",
-          right: "1%",
-          containLabel: true,
-          y2: 10
-        },
-        series: [
-          {
-            name: "所有用户",
-            type: "bar",
-            smooth: true,
-            label: labelOption,
-            data: [78, 90, 13, 81, 170, 77]
-          },
-          {
-            name: "注册用户",
-            type: "bar",
-            smooth: true,
-            label: labelOption,
-            data: [26, 49, 62, 45, 21, 89]
-          }
-        ]
-      });
-      // 饼图
-      let secondChart = Echarts.init(this.$refs.secondChart);
-      // 绘制图表
-      secondChart.setOption({
-        color: ["#7974ce","#f5749d","#3688f8"],
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          data: ["自主进入", "来源全民经纪人", "来源置业顾问"]
-        },
-        series: [
-          {
-            name: "用户来源",
-            type: "pie",
-            radius: "55%",
-            center: ["50%", "60%"],
-            // label: {
-            //   normal: {
-            //     position: "inner"
-            //   }
-            // },
-            data: [
-              { value: 15, name: "自主进入" },
-              { value: 30, name: "来源全民经纪人" },
-              { value: 75, name: "来源置业顾问" }
-            ],
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      });
+        // --- 用户来源 start -------
+        // 基于准备好的dom，初始化echarts实例
+        this.columnarSecondChart = Echarts.init(this.$refs.firstChart);
+        // 饼图
+        this.pieSecondChart = Echarts.init(this.$refs.secondChart);
+        // --- 用户来源 start -------
+
       // 折线图
       // let thirdChart = Echarts.init(this.$refs.thirdChart);
       // 绘制图表
@@ -524,7 +414,150 @@ export default {
           }
         ]
       });
-    }
+    },
+      // ---------- 用户来源 start --------------
+      pie (obj) { // 饼状图绘制
+          // 绘制图表
+          this.pieSecondChart.setOption({
+              color: ["#7974ce","#f5749d","#3688f8"],
+              tooltip: {
+                  trigger: "item",
+                  formatter: "{a} <br/>{b} : {c} ({d}%)"
+              },
+              legend: {
+                  orient: "vertical",
+                  left: "left",
+                  data: ["自主进入", "来源全民经纪人", "来源置业顾问"]
+              },
+              series: [
+                  {
+                      name: "访问来源",
+                      type: "pie",
+                      radius: "55%",
+                      center: ["50%", "60%"],
+                      // label: {
+                      //     normal: {
+                      //         position: "inner"
+                      //     }
+                      // },
+                      data: [
+                          { value: obj.person_null, name: "自主进入" },
+                          { value: obj.person_estate_agent, name: "来源全民经纪人" },
+                          { value: obj.person_realty_consultant, name: "来源置业顾问" }
+                      ],
+                      itemStyle: {
+                          emphasis: {
+                              shadowBlur: 10,
+                              shadowOffsetX: 0,
+                              shadowColor: "rgba(0, 0, 0, 0.5)"
+                          }
+                      }
+                  }
+              ]
+          });
+      },
+      columnar(obj) { // 柱状图
+          // 活动名称
+          const fromName = []
+
+          // 注册人数
+          const registered = []
+
+          // 注册人数
+          const userCount = []
+
+          obj.map((item, index) => {
+              fromName.push(item.fromName)
+              registered.push(item.registered)
+              userCount.push(item.userCount)
+          })
+
+          let labelOption = {
+              normal: {
+                  show: true,
+                  position: "top",
+                  fontSize: 15,
+                  rich: {
+                      name: {
+                          textBorderColor: "#fff"
+                      }
+                  }
+              }
+          };
+          // 绘制图表
+          this.columnarSecondChart.setOption({
+              color: ["#3688f8", "#7974ce"],
+              backgroundColor: "#fff",
+              tooltip: {
+                  trigger: "axis"
+              },
+              toolbox: {
+                  show: false,
+                  feature: {
+                      mark: { show: true },
+                      dataView: { show: true, readOnly: false },
+                      magicType: { show: true, type: ["bar"] },
+                      restore: { show: true },
+                      saveAsImage: { show: true }
+                  }
+              },
+              calculable: true,
+              legend: {
+                  data: ["所有用户", "注册用户"]
+              },
+              xAxis: [
+                  {
+                      type: "category",
+                      axisLabel: {
+                          interval: 0,
+                          formatter: function(val) {
+                              // return val.split("").join("\n");
+                              return val;
+                          }
+                      },
+                      // data: ["生成海报", "好友分享", "群分享", "线下扫码", "名片分享", "小程序搜索"]
+                      data: fromName
+                  }
+              ],
+              yAxis: [
+                  {
+                      type: "value",
+                      name: "人数（人）",
+                      axisTick: {
+                          inside: true
+                      },
+                      axisLabel: {
+                          formatter: "{value}"
+                      }
+                  }
+              ],
+              grid: {
+                  left: "1%",
+                  right: "1%",
+                  containLabel: true,
+                  y2: 10
+              },
+              series: [
+                  {
+                      name: "所有用户",
+                      type: "bar",
+                      smooth: true,
+                      label: labelOption,
+                      // data: [78, 90, 13, 81, 170, 77]
+                      data: registered
+                  },
+                  {
+                      name: "注册用户",
+                      type: "bar",
+                      smooth: true,
+                      label: labelOption,
+                      // data: [26, 49, 62, 45, 21, 89]
+                      data: userCount
+                  }
+              ]
+          });
+      },
+      // ---------- 用户来源 end -------------
   },
   mounted() {
     if (this.echartsInfo) {

src/views/indexEcharts/userSource.vue

@@ -89,6 +89,7 @@ export default {
     pie (obj) { // 饼状图绘制
         // 绘制图表
         this.pieSecondChart.setOption({
+            color: ["#7974ce","#f5749d","#3688f8"],
             tooltip: {
                 trigger: "item",
                 formatter: "{a} <br/>{b} : {c} ({d}%)"
@@ -155,7 +156,7 @@ export default {
         };
         // 绘制图表
         this.columnarSecondChart.setOption({
-            color: ["#ff580f", "#ffb400"],
+            color: ["#3688f8", "#7974ce"],
             backgroundColor: "#fff",
             tooltip: {
                 trigger: "axis"