瀏覽代碼

Merge branch 'master' of http://git.ycjcjy.com/zhiyuxing/pc-admin

张延森 5 年之前
父節點
當前提交
b0174d8c09
共有 1 個文件被更改,包括 62 次插入47 次删除
  1. 62
    47
      src/views/indexEcharts/index.vue

+ 62
- 47
src/views/indexEcharts/index.vue 查看文件

92
       },
92
       },
93
         // ----  用户来源 start -----
93
         // ----  用户来源 start -----
94
         pieSecondChart: '', // 饼状图实例
94
         pieSecondChart: '', // 饼状图实例
95
-        columnarSecondChart: '', // 柱状图
95
+        columnarSecondChart: '', // 柱状图实例
96
         // ----  用户来源 end -----
96
         // ----  用户来源 end -----
97
+        // ---- 性别 start ----
98
+        sexSixthChart: '', // 饼状图实例
99
+        // ---- 性别 end ------
97
     };
100
     };
98
   },
101
   },
99
   computed: {
102
   computed: {
132
           this.selectUserSourceColumnar(x.selectUserSource.columnar)
135
           this.selectUserSourceColumnar(x.selectUserSource.columnar)
133
         // ----- 用户来源 end --------
136
         // ----- 用户来源 end --------
134
 
137
 
138
+          // 用户性别
139
+          this.sexSixthChartPie(x.selectSexUser)
140
+
135
       });;
141
       });;
136
     },
142
     },
137
     toNewUsers() {
143
     toNewUsers() {
145
     },
151
     },
146
     drawLine() {
152
     drawLine() {
147
         // --- 用户来源 start -------
153
         // --- 用户来源 start -------
148
-        // 基于准备好的dom,初始化echarts实例
154
+        // 柱状
149
         this.columnarSecondChart = Echarts.init(this.$refs.firstChart);
155
         this.columnarSecondChart = Echarts.init(this.$refs.firstChart);
150
         // 饼图
156
         // 饼图
151
         this.pieSecondChart = Echarts.init(this.$refs.secondChart);
157
         this.pieSecondChart = Echarts.init(this.$refs.secondChart);
152
         // --- 用户来源 start -------
158
         // --- 用户来源 start -------
153
 
159
 
160
+        // --- 性别 环形图 start -------
161
+        this.sexSixthChart = Echarts.init(this.$refs.sixthChart);
162
+        // --- 性别 环形图 end -------
163
+
164
+
154
       // 折线图
165
       // 折线图
155
       // let thirdChart = Echarts.init(this.$refs.thirdChart);
166
       // let thirdChart = Echarts.init(this.$refs.thirdChart);
156
       // 绘制图表
167
       // 绘制图表
318
           }
329
           }
319
         ]
330
         ]
320
       });
331
       });
321
-      // 环形图
322
-      let sixthChart = Echarts.init(this.$refs.sixthChart);
323
-      // 绘制图表
324
-      sixthChart.setOption({
325
-        title: {
326
-          text: "性别比例"
327
-        },
328
-        color:["#6a96f7","#f5749d"],
329
-        tooltip: {
330
-          trigger: "item",
331
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
332
-        },
333
-        legend: {
334
-          orient: "vertical",
335
-          x: "right",
336
-          data: ["男", "女"]
337
-        },
338
-        series: [
339
-          {
340
-            name: "性别比例",
341
-            type: "pie",
342
-            radius: ["40%", "56%"],
343
-            avoidLabelOverlap: false,
344
-            label: {
345
-              normal: {
346
-                show: false,
347
-                position: "center"
348
-              },
349
-              emphasis: {
350
-                show: true,
351
-                textStyle: {
352
-                  fontSize: "30",
353
-                  fontWeight: "bold"
354
-                }
355
-              }
356
-            },
357
-            labelLine: {
358
-              normal: {
359
-                show: false
360
-              }
361
-            },
362
-            data: [{ value: 335, name: "男" }, { value: 310, name: "女" }]
363
-          }
364
-        ]
365
-      });
332
+
366
       // 饼图
333
       // 饼图
367
       let seventhChart = Echarts.init(this.$refs.seventhChart);
334
       let seventhChart = Echarts.init(this.$refs.seventhChart);
368
       // 绘制图表
335
       // 绘制图表
549
           });
516
           });
550
       },
517
       },
551
       // ---------- 用户来源 end -------------
518
       // ---------- 用户来源 end -------------
519
+      // ---------- 性别 start --------------
520
+      sexSixthChartPie(obj) {
521
+          // 性别 绘制图表
522
+          this.sexSixthChart.setOption({
523
+              title: {
524
+                  text: "性别比例"
525
+              },
526
+              color:["#6a96f7","#f5749d"],
527
+              tooltip: {
528
+                  trigger: "item",
529
+                  formatter: "{a} <br/>{b}: {c} ({d}%)"
530
+              },
531
+              legend: {
532
+                  orient: "vertical",
533
+                  x: "right",
534
+                  data: ["男", "女"]
535
+              },
536
+              series: [
537
+                  {
538
+                      name: "性别比例",
539
+                      type: "pie",
540
+                      radius: ["40%", "56%"],
541
+                      avoidLabelOverlap: false,
542
+                      label: {
543
+                          normal: {
544
+                              show: false,
545
+                              position: "center"
546
+                          },
547
+                          emphasis: {
548
+                              show: true,
549
+                              textStyle: {
550
+                                  fontSize: "30",
551
+                                  fontWeight: "bold"
552
+                              }
553
+                          }
554
+                      },
555
+                      labelLine: {
556
+                          normal: {
557
+                              show: false
558
+                          }
559
+                      },
560
+                      // data: [{ value: 335, name: "男" }, { value: 310, name: "女" }]
561
+                      data: obj
562
+                  }
563
+              ]
564
+          });
565
+      }
566
+      // ---------- 性别 end ---------------
552
   },
567
   },
553
   mounted() {
568
   mounted() {
554
     if (this.echartsInfo) {
569
     if (this.echartsInfo) {