优化数据

src/views/index.vue

@@ -89,7 +89,7 @@
       <cardExpend v-if="listData" :listData="listData"></cardExpend>
     </div>
     <div class="echarts">
-      <productData v-if="listData" :listData="listData"></productData>
+      <productData v-if="listData" :listData="listData" style="overflow-y: scroll"></productData>
     </div>
     <div class="echarts">
       <productRatio

src/views/manage/manage.vue

@@ -22,8 +22,8 @@ export default {
       //   经营数据
       const option = {
         grid: {
-    left:40
-},
+          left: 60,
+        },
         title: {
           text: "经营数据金额",
           left: "center",
@@ -33,7 +33,13 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["收入金额", "项目付费金额", "次卡付费金额", "美妆收入金额", "充值收入金额"],
+          data: [
+            "收入金额",
+            "项目付费金额",
+            "次卡付费金额",
+            "美妆收入金额",
+            "充值收入金额",
+          ],
           axisLabel: { interval: 0, rotate: 30 },
         },
         yAxis: {
@@ -67,12 +73,12 @@ export default {
       };
       //数据绑定到表格
       myChart.setOption(option);
-            window.addEventListener("resize", function () {
+      window.addEventListener("resize", function () {
         myChart.resize(); //myChart指自己定义的echartsDom对象
       });
     },
   },
-    // 监听父组件传过来的值的变化
+  // 监听父组件传过来的值的变化
   watch: {
     listData: {
       handler(val) {

src/views/productData/productData.vue

@@ -17,8 +17,7 @@ export default {
       const myChart = this.$echarts.init(this.$refs.MapMountNode);
       //设置图表属性
       //   经营数据
-      const option = {
-        color: ["#91cc75"],
+            const option = {
         title: {
           text: "产品数据",
           left: "center",
@@ -26,45 +25,31 @@ export default {
           //   color: "#6d767e",
           // },
         },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
-        },
+
         grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
+          left: 60,
+        },
+        xAxis: {
+          type: "category",
+ data: ["购买订单数", "购买人数", "购买金额"],
+          axisLabel: { interval: 0, rotate: 30 },
+        },
+        yAxis: {
+          type: "value",
         },
-        xAxis: [
-          {
-            type: "value",
-          },
-        ],
-        yAxis: [
-          {
-            type: "category",
-            axisTick: {
-              show: false,
-            },
-            data: ["购买订单数", "购买人数", "购买金额"],
-          },
-        ],
         series: [
           {
-            name: "数量",
+            data: [
+              this.listData.product_data.order,
+              this.listData.product_data.people,
+              this.listData.product_data.money,
+            ],
             type: "bar",
-            label: {
-              show: true,
-              position: "inside",
-            },
             itemStyle: {
               normal: {
                 label: {
                   show: true, //开启显示数值
-                  position: "right", //数值在上方显示
+                  position: "top", //数值在上方显示
                   textStyle: {
                     //数值样式
                     color: "#9b9ca2", //字体颜色
@@ -73,18 +58,9 @@ export default {
                 },
               },
             },
-            emphasis: {
-              focus: "series",
-            },
-            data: [
-              this.listData.product_data.order,
-              this.listData.product_data.people,
-              this.listData.product_data.money,
-            ],
           },
         ],
       };
-
       //数据绑定到表格
       myChart.setOption(option);
       window.addEventListener("resize", function () {

src/views/projectData/projectData.vue

@@ -27,7 +27,7 @@ export default {
         },
 
         grid: {
-          left: 40,
+          left: 60,
         },
         xAxis: {
           type: "category",