性别统计 首页

src/views/indexEcharts/index.vue

       },
         // ----  用户来源 start -----
         pieSecondChart: '', // 饼状图实例
-        columnarSecondChart: '', // 柱状图
+        columnarSecondChart: '', // 柱状图实例
         // ----  用户来源 end -----
+        // ---- 性别 start ----
+        sexSixthChart: '', // 饼状图实例
+        // ---- 性别 end ------
     };
   },
   computed: {
           this.selectUserSourceColumnar(x.selectUserSource.columnar)
         // ----- 用户来源 end --------
 
+          // 用户性别
+          this.sexSixthChartPie(x.selectSexUser)
+
       });;
     },
     toNewUsers() {
         // --- 用户来源 start -------
         // 基于准备好的dom，初始化echarts实例
         this.columnarSecondChart = Echarts.init(this.$refs.firstChart);
+
         // 饼图
         this.pieSecondChart = Echarts.init(this.$refs.secondChart);
+
         // --- 用户来源 start -------
 
+        // 性别 环形图
+        this.sexSixthChart = Echarts.init(this.$refs.sixthChart);
+
+
       // 折线图
       // let thirdChart = Echarts.init(this.$refs.thirdChart);
       // 绘制图表
           }
         ]
       });
-      // 环形图
-      let sixthChart = Echarts.init(this.$refs.sixthChart);
-      // 绘制图表
-      sixthChart.setOption({
-        title: {
-          text: "性别比例"
-        },
-        color:["#6a96f7","#f5749d"],
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          x: "right",
-          data: ["男", "女"]
-        },
-        series: [
-          {
-            name: "性别比例",
-            type: "pie",
-            radius: ["40%", "56%"],
-            avoidLabelOverlap: false,
-            label: {
-              normal: {
-                show: false,
-                position: "center"
-              },
-              emphasis: {
-                show: true,
-                textStyle: {
-                  fontSize: "30",
-                  fontWeight: "bold"
-                }
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            data: [{ value: 335, name: "男" }, { value: 310, name: "女" }]
-          }
-        ]
-      });
+
       // 饼图
       let seventhChart = Echarts.init(this.$refs.seventhChart);
       // 绘制图表
           });
       },
       // ---------- 用户来源 end -------------
+      // ---------- 性别 start --------------
+      sexSixthChartPie(obj) {
+          // 性别 绘制图表
+          this.sexSixthChart.setOption({
+              title: {
+                  text: "性别比例"
+              },
+              color:["#6a96f7","#f5749d"],
+              tooltip: {
+                  trigger: "item",
+                  formatter: "{a} <br/>{b}: {c} ({d}%)"
+              },
+              legend: {
+                  orient: "vertical",
+                  x: "right",
+                  data: ["男", "女"]
+              },
+              series: [
+                  {
+                      name: "性别比例",
+                      type: "pie",
+                      radius: ["40%", "56%"],
+                      avoidLabelOverlap: false,
+                      label: {
+                          normal: {
+                              show: false,
+                              position: "center"
+                          },
+                          emphasis: {
+                              show: true,
+                              textStyle: {
+                                  fontSize: "30",
+                                  fontWeight: "bold"
+                              }
+                          }
+                      },
+                      labelLine: {
+                          normal: {
+                              show: false
+                          }
+                      },
+                      // data: [{ value: 335, name: "男" }, { value: 310, name: "女" }]
+                      data: obj
+                  }
+              ]
+          });
+      }
+      // ---------- 性别 end ---------------
   },
   mounted() {
     if (this.echartsInfo) {