Почетна Преглед Помоћ
Регистрација Пријавите Се
yuhao
/
shujudaping_yidong
Прати 1
Волим 0
Креирај огранак 0
Files Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

优化数据

yuhao пре 2 година
родитељ
8490b13224
комит
a2d096620b
6 измењених фајлова са 136 додато и 17 уклоњено
Подељен поглед Покажи статистику Diff
  1. BIN
      public/favicon1.ico
  2. 4 2
      public/index.html
  3. 118 0
      src/views/BprogramAmount/BprogramAmount.vue
  4. 8 3
      src/views/index.vue
  5. 0 12
      src/views/programAmount/programAmount.vue
  6. 6 0
      vue.config.js

BIN
public/favicon1.ico
Прегледај датотеку


+ 4 - 2
public/index.html
Прегледај датотеку 

@@ -4,8 +4,10 @@
4 4 
     <meta charset="utf-8">
5 5 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 6 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
-    <title><%= htmlWebpackPlugin.options.title %></title>
7 
+    <link rel="icon" href="<%= BASE_URL %>favicon1.ico">
8 
+    <title>
9 
+      JOLIJOLI数据
10 
+    </title>
9 11 
     <!-- <script type="text/javascript" src="https://ydcommon.51yund.com/test_web_hd/vendor/vconsole.min.js"></script> -->
10 12 
   </head>
11 13 
   <body>

+ 118 - 0
src/views/BprogramAmount/BprogramAmount.vue
Прегледај датотеку 

@@ -0,0 +1,118 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {};
12 
+  },
13 
+  methods: {
14 
+    //先定义个方法
15 
+    myEcharts() {
16 
+      //把echarts绑定到显示元素上
17 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
18 
+      //设置图表属性
19 
+      //   经营数据
20 
+      const option = {
21 
+        color: ["#fc8452"],
22 
+        tooltip: {
23 
+          trigger: "axis",
24 
+          axisPointer: {
25 
+            type: "shadow",
26 
+          },
27 
+        },
28 
+        grid: {
29 
+          left: "7%",
30 
+          right: "4%",
31 
+          bottom: "3%",
32 
+          top: "1%",
33 
+          containLabel: true,
34 
+        },
35 
+        xAxis: [
36 
+          {
37 
+            type: "value",
38 
+          },
39 
+        ],
40 
+        yAxis: [
41 
+          {
42 
+            type: "category",
43 
+            axisTick: {
44 
+              show: false,
45 
+            },
46 
+            data: [
47 
+              "单次三个项目",
48 
+              "单次两个项目",
49 
+              "三次到店用户数",
50 
+              "两次到店用户数",
51 
+              "美妆购买总用户数",
52 
+              "总用户数",
53 
+            ],
54 
+          },
55 
+        ],
56 
+        series: [
57 
+          {
58 
+            name: "数量",
59 
+            type: "bar",
60 
+            label: {
61 
+              show: true,
62 
+              position: "inside",
63 
+            },
64 
+            emphasis: {
65 
+              focus: "series",
66 
+            },
67 
+            itemStyle: {
68 
+              normal: {
69 
+                label: {
70 
+                  show: true, //开启显示数值
71 
+                  position: "right", //数值在上方显示
72 
+                  textStyle: {
73 
+                    //数值样式
74 
+                    color: "#9b9ca2", //字体颜色
75 
+                    fontSize: 14, //字体大小
76 
+                  },
77 
+                },
78 
+              },
79 
+            },
80 
+            data: [
81 
+              this.listData.three_project,
82 
+              this.listData.two_project,
83 
+              this.listData.user_three,
84 
+              this.listData.user_two,
85 
+              this.listData.beauty_products,
86 
+              this.listData.total_user,
87 
+            ],
88 
+          },
89 
+        ],
90 
+      };
91 
+
92 
+      //数据绑定到表格
93 
+      myChart.setOption(option);
94 
+      window.addEventListener("resize", function () {
95 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
96 
+      });
97 
+    },
98 
+  },
99 
+  // 监听父组件传过来的值的变化
100 
+  watch: {
101 
+    listData: {
102 
+      handler(val) {
103 
+        this.myEcharts();
104 
+      },
105 
+    },
106 
+  },
107 
+  mounted() {
108 
+    this.myEcharts();
109 
+  },
110 
+};
111 
+</script>
112 
+
113 
+<style scoped>
114 
+.map {
115 
+  width: 160%;
116 
+  height: 300px;
117 
+}
118 
+</style>

+ 8 - 3
src/views/index.vue
Прегледај датотеку 

@@ -73,9 +73,6 @@
73 73 
       </div>
74 74 
     </div>
75 75 
     <!-- echarts图 -->
76 
-    <div class="echarts" style="overflow-y: scroll">
77 
-      <programAmount v-if="listData" :listData="listData"></programAmount>
78 
-    </div>
79 76 
     <div class="echarts">
80 77 
       <manage v-if="listData" :listData="listData"></manage>
81 78 
     </div>
 
@@ -91,6 +88,12 @@
91 88 
     <div class="echarts">
92 89 
       <productData v-if="listData" :listData="listData" style="overflow-y: scroll"></productData>
93 90 
     </div>
91 
+        <div class="echarts" style="overflow-y: scroll">
92 
+      <programAmount v-if="listData" :listData="listData"></programAmount>
93 
+    </div>
94 
+    <div class="echarts" style="overflow-y: scroll">
95 
+      <BprogramAmount v-if="listData" :listData="listData"></BprogramAmount>
96 
+    </div>
94 97 
     <div class="echarts">
95 98 
       <productRatio
96 99 
         v-if="listData"
 
@@ -116,6 +119,7 @@ import productData from "./productData/productData.vue";
116 119 
 import productRatio from "./productRatio/productRatio.vue";
117 120 
 import projectRatio from "./projectRatio/projectRatio.vue";
118 121 
 import programAmount from "./programAmount/programAmount.vue";
122 
+import BprogramAmount from "./BprogramAmount/BprogramAmount.vue";
119 123 
 export default {
120 124 
   components: {
121 125 
     manage,
 
@@ -126,6 +130,7 @@ export default {
126 130 
     productRatio,
127 131 
     projectRatio,
128 132 
     programAmount,
133 
+    BprogramAmount
129 134 
   },
130 135 
   data() {
131 136 
     return {

+ 0 - 12
src/views/programAmount/programAmount.vue
Прегледај датотеку 

@@ -49,18 +49,12 @@ export default {
49 49 
               show: false,
50 50 
             },
51 51 
             data: [
52 
-              "总用户数",
53 52 
               "总测肤用户数",
54 53 
               "付费总用户数",
55 54 
               "充值总用户数",
56 55 
               "多次卡购买总用户数",
57 
-              "美妆购买总用户数",
58 56 
               "新注册用户数",
59 57 
               "新测肤用户数",
60 
-              "单次两个项目",
61 
-              "3次到店用户数",
62 
-              "单次三个项目",
63 
-              "2次到店用户数",
64 58 
             ],
65 59 
           },
66 60 
         ],
 
@@ -89,18 +83,12 @@ export default {
89 83 
               },
90 84 
             },
91 85 
             data: [
92 
-              this.listData.total_user,
93 86 
               this.listData.total_skin,
94 87 
               this.listData.total_consumer_user,
95 88 
               this.listData.total_recharge_user,
96 89 
               this.listData.total_time_card,
97 
-              this.listData.beauty_products,
98 90 
               this.listData.new_user,
99 91 
               this.listData.new_skin,
100 
-              this.listData.two_project,
101 
-              this.listData.user_three,
102 
-              this.listData.three_project,
103 
-              this.listData.user_two,
104 92 
             ],
105 93 
           },
106 94 
         ],

+ 6 - 0
vue.config.js
Прегледај датотеку 

@@ -0,0 +1,6 @@
1 
+//打包配置文件
2 
+module.exports = {
3 
+    assetsDir: 'static',
4 
+    parallel: false,
5 
+    publicPath: './',
6 
+  };