From a14cc655ca8e97b8bfe1ffd4b26e73780fccbc4a Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 07 十二月 2023 19:29:37 +0800
Subject: [PATCH] 样式优化

---
 src/views/cockpitPage/components/DeviceChart.vue           |    5 ++
 src/views/cockpitPage/components/PerSonnelProductivity.vue |   11 +++++
 src/views/cockpitPage/components/MaterialChart.vue         |    5 ++
 src/views/cockpitPage/components/MachineStartupRate.vue    |   61 ++++++++++++++++--------------
 4 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue
index a88e6be..f402a4b 100644
--- a/src/views/cockpitPage/components/DeviceChart.vue
+++ b/src/views/cockpitPage/components/DeviceChart.vue
@@ -65,6 +65,11 @@
             axisPointer: {
               type: "none",
             },
+            textStyle: {
+              color: "#00FFFF",
+            },
+            borderColor: "#00FFFF",
+            backgroundColor: "#238d8d6b",
             valueFormatter: function (value) {
               return value + "%";
             },
diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue
index 8af3e2f..dab4668 100644
--- a/src/views/cockpitPage/components/MachineStartupRate.vue
+++ b/src/views/cockpitPage/components/MachineStartupRate.vue
@@ -48,12 +48,20 @@
           color: ["#065a6f", "#067687", "#00ffff"],
           tooltip: {
             trigger: "item",
+            textStyle: {
+              color: "#00FFFF",
+            },
+            borderColor: "#00FFFF",
+            backgroundColor: "#238d8d6b",
+            valueFormatter: function (value) {
+              return value + "%";
+            },
           },
           graphic: {
             elements: [
               {
                 type: "image",
-                z: 5,
+                // z: 5,
                 style: {
                   image: img,
                   width: width,
@@ -62,7 +70,7 @@
                 },
                 left: "center",
                 top: "center",
-                position: [5, 5],
+                position: [10, 10],
               },
             ],
           },
@@ -73,20 +81,29 @@
               radius: ["58%", "70%"],
               avoidLabelOverlap: false,
               label: {
-                color: "#01f7fd",
-                fontSize: 14,
-                padding: [0, -60],
-                formatter: function (params) {
-                  return `{a|${params.name}} {b|${params.value + "%"}}`;
-                },
-                rich: {
-                  a: {
-                    color: "#00ffff",
-                    fontSize: 14,
+                normal: {
+                  position: "outer",
+                  padding: [0, -62],
+                  color: "#01f7fd",
+                  fontSize: 12,
+                  borderWidth: 5,
+                  borderRadius: 4,
+                  formatter: function (params) {
+                    let label =
+                      params.name.length > 4
+                        ? `${params.name.slice(0, 3)}...`
+                        : params.name;
+                    return `{a|${label}} {b|${params.value + "%"}}`;
                   },
-                  b: {
-                    color: "#fccd1d",
-                    fontSize: 14,
+                  rich: {
+                    a: {
+                      color: "#00ffff",
+                      fontSize: 14,
+                    },
+                    b: {
+                      color: "#fccd1d",
+                      fontSize: 14,
+                    },
                   },
                 },
               },
@@ -113,20 +130,6 @@
         };
 
         option && myChart.setOption(option);
-        // window.addEventListener("resize", function () {
-        //   // var chart = echarts.getInstanceByDom(document.getElementById("main"));
-        //   let width = myChart.getWidth();
-        //   let height = myChart.getHeight();
-        //   console.log(width, height, "sssssssssss");
-        //   let logo = myChart.getOption().graphic[0].elements[0];
-        //   console.log(logo, "fffff");
-        //   logo.style.width = width / 2;
-        //   logo.style.height = height / 2;
-        //   myChart.setOption({
-        //     graphic: [logo],
-        //   });
-        //   myChart.resize();
-        // });
       } else {
         option = {};
         myChart.setOption(option, true);
diff --git a/src/views/cockpitPage/components/MaterialChart.vue b/src/views/cockpitPage/components/MaterialChart.vue
index 1e95123..a8b1ebe 100644
--- a/src/views/cockpitPage/components/MaterialChart.vue
+++ b/src/views/cockpitPage/components/MaterialChart.vue
@@ -63,6 +63,11 @@
             axisPointer: {
               type: "none",
             },
+            textStyle: {
+              color: "#00FFFF",
+            },
+            borderColor: "#00FFFF",
+            backgroundColor: "#238d8d6b",
             valueFormatter: function (value) {
               return "鐗╂枡涓嶈冻鐨勬暟閲�:" + value;
             },
diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue
index 4f11181..32fefd1 100644
--- a/src/views/cockpitPage/components/PerSonnelProductivity.vue
+++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue
@@ -70,6 +70,11 @@
             axisPointer: {
               type: "none",
             },
+            textStyle: {
+              color: "#00FFFF",
+            },
+            borderColor: "#00FFFF",
+            backgroundColor: "#238d8d6b",
             valueFormatter: function (value) {
               return value + "%";
             },
@@ -256,6 +261,11 @@
           color: ["#dcb018", "#735b09", "#ebd68e", "#c7b36e"],
           tooltip: {
             trigger: "item",
+            textStyle: {
+              color: "#00FFFF",
+            },
+            borderColor: "#00FFFF",
+            backgroundColor: "#238d8d6b",
             valueFormatter: function (value) {
               return value + "%";
             },
@@ -282,7 +292,6 @@
               type: "pie",
               radius: ["52%", "62%"],
               avoidLabelOverlap: false,
-
               label: {
                 normal: {
                   position: "outer",

--
Gitblit v1.8.0