From 2e6cfde0e6533c734bd5fe81a5d62b931098f6a3 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期二, 05 十二月 2023 16:51:51 +0800
Subject: [PATCH] 人员，物料y轴超出文字点点点

---
 src/views/cockpitPage/components/DeviceChart.vue |   69 +++++++++++++++++++++-------------
 1 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue
index ec25403..79d1705 100644
--- a/src/views/cockpitPage/components/DeviceChart.vue
+++ b/src/views/cockpitPage/components/DeviceChart.vue
@@ -15,37 +15,46 @@
 <script>
 //寮曞叆echart
 import * as echarts from "echarts";
+let myChart;
 export default {
   components: {},
-  props: {},
+  props: {
+    chartData: {
+      type: Object,
+      require: true,
+      default: () => {
+        return {
+          datax: [],
+          datay: [],
+        };
+      },
+    },
+  },
   data() {
     return {
-      chartData: {
-        datax: [
-          "璁惧1",
-          "璁惧2",
-          "璁惧3",
-          "璁惧4",
-          "璁惧5",
-          "璁惧6",
-          "璁惧7",
-          "璁惧8",
-          "璁惧9",
-        ],
-        datay: [10, 20, 15, 38, 47, 50, 20, 33, 25, 48],
-      },
+      startValue: 0,
+      endValue: 5,
+      chartTimer: null,
     };
   },
-  mounted() {
-    this.pieChart("chart", this.chartData);
+  watch: {
+    "chartData.datay"(val) {
+      this.startValue = 0;
+      this.endValue = 5;
+      this.pieChart("chart", this.chartData);
+    },
   },
-  watch: {},
+  mounted() {},
   methods: {
     //鍦ㄨ亴
     pieChart(chartName, data) {
       let that = this;
+      clearInterval(this.chartTimer);
       let chartDom = this.$refs[chartName];
-      let myChart = echarts.init(chartDom);
+      if (myChart != null && myChart != "" && myChart != undefined) {
+        myChart.dispose(); //閿�姣�
+      }
+      myChart = echarts.init(chartDom);
       let option;
       let lineColor = "#35ddc74d";
       if (data) {
@@ -60,7 +69,7 @@
           grid: {
             right: "80px",
             bottom: "60px",
-            left: "60px",
+            left: "70px",
             top: "30px",
           },
           dataZoom: [
@@ -68,8 +77,8 @@
               type: "inside",
               yAxisIndex: 0,
               show: false,
-              startValue: 0, // 浠庡ご寮�濮�
-              endValue: 5, // 涓�娆℃�у睍绀哄嚑涓�
+              startValue: that.startValue, // 浠庡ご寮�濮�
+              endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓�
             },
           ],
           legend: {
@@ -95,6 +104,7 @@
                 // rotate:45,
                 margin: 10,
                 show: true,
+                fontSize:12,
                 textStyle: {
                   color: function (params, index) {
                     let colorList = ["#dcb018", "#00FFFF"];
@@ -104,6 +114,12 @@
                       return colorList[1];
                     }
                   },
+                },
+                formatter: function (value) {
+                  if (value.length > 5) {
+                    return `${value.slice(0, 4)}...`;
+                  }
+                  return value;
                 },
               },
               data: data.datax ? data.datax : [],
@@ -176,11 +192,10 @@
           ],
         };
 
-        setInterval(function () {
-          // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨��
-          if (option.dataZoom[0].endValue == that.chartData.datay.length) {
-            option.dataZoom[0].startValue = 0;
-            option.dataZoom[0].endValue = 5;
+        this.chartTimer = setInterval(function () {
+          if (option.dataZoom[0].endValue == data.datay.length) {
+            option.dataZoom[0].startValue = that.startValue;
+            option.dataZoom[0].endValue = that.endValue;
           } else {
             option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
             option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;

--
Gitblit v1.8.0