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/PerSonnelProductivity.vue |   64 ++++++++++++++++++++++++++------
 1 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue
index 832d68f..32fefd1 100644
--- a/src/views/cockpitPage/components/PerSonnelProductivity.vue
+++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue
@@ -70,6 +70,14 @@
             axisPointer: {
               type: "none",
             },
+            textStyle: {
+              color: "#00FFFF",
+            },
+            borderColor: "#00FFFF",
+            backgroundColor: "#238d8d6b",
+            valueFormatter: function (value) {
+              return value + "%";
+            },
           },
           grid: {
             right: "80px",
@@ -84,6 +92,9 @@
               show: false,
               startValue: this.startValue, // 浠庡ご寮�濮�
               endValue: this.endValue, // 涓�娆℃�у睍绀哄嚑涓�
+              zoomOnMouseWheel: false,
+              moveOnMouseWheel: true,
+              moveOnMouseMove: true,
             },
           ],
           legend: {
@@ -133,7 +144,7 @@
           xAxis: [
             {
               type: "value",
-              name: "鍗曚綅锛氫欢",
+              // name: "鍗曚綅锛氫欢",
               // min: data.yAxis[0].min?data.yAxis.min:0,
               minInterval: 1, //鍧愭爣杞存槸鏁存暟
               max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3
@@ -163,6 +174,9 @@
                 textStyle: {
                   color: "#00FFFF",
                 },
+                formatter: function (value) {
+                  return `${value}%`;
+                },
               },
             },
           ],
@@ -174,7 +188,21 @@
               label: {
                 show: true,
                 position: "right",
-                color: "#00FFFF",
+                formatter: function (params) {
+                  if (params.dataIndex % 2 == 0) {
+                    return `{a|${params.value}%}`;
+                  } else {
+                    return `{b|${params.value}%}`;
+                  }
+                },
+                rich: {
+                  a: {
+                    color: "#00FFFF",
+                  },
+                  b: {
+                    color: "#dcb018",
+                  },
+                },
               },
               itemStyle: {
                 normal: {
@@ -216,7 +244,6 @@
     },
     getChartRight(chartName, data) {
       let chartDom = this.$refs[chartName];
-      // let myRightChart = echarts.init(chartDom);
       if (
         myRightChart != null &&
         myRightChart != "" &&
@@ -226,22 +253,32 @@
       }
       myRightChart = echarts.init(chartDom);
       let img = "/cockpitPage/dotted-circle.png";
+      let height = myRightChart.getHeight() / 1;
+      let width = height + 5;
       let option;
       if (data) {
         option = {
           color: ["#dcb018", "#735b09", "#ebd68e", "#c7b36e"],
           tooltip: {
             trigger: "item",
+            textStyle: {
+              color: "#00FFFF",
+            },
+            borderColor: "#00FFFF",
+            backgroundColor: "#238d8d6b",
+            valueFormatter: function (value) {
+              return value + "%";
+            },
           },
           graphic: {
             elements: [
               {
                 type: "image",
-                z: 3,
+                // z: 3,
                 style: {
                   image: img,
-                  width: 240,
-                  height: 240,
+                  width: width,
+                  height: height,
                 },
                 left: "center",
                 top: "center",
@@ -255,7 +292,6 @@
               type: "pie",
               radius: ["52%", "62%"],
               avoidLabelOverlap: false,
-
               label: {
                 normal: {
                   position: "outer",
@@ -265,7 +301,11 @@
                   borderWidth: 5,
                   borderRadius: 4,
                   formatter: function (params) {
-                    return `{a|${params.name}} {b|${params.value + "%"}}`;
+                    let label =
+                      params.name.length > 4
+                        ? `${params.name.slice(0, 3)}...`
+                        : params.name;
+                    return `{a|${label}} {b|${params.value + "%"}}`;
                   },
                   rich: {
                     a: {
@@ -290,7 +330,7 @@
               labelLine: {
                 show: true,
                 length: 4,
-                length2: 80,
+                length2: 70,
                 lineStyle: {
                   color: "#dcb018",
                 },
@@ -317,7 +357,7 @@
 <style scoped lang="scss">
 .bar-chart {
   width: 100%;
-  height: calc(100% - 20px);
+  height: calc(100% - 10px);
   padding: 20px 0 0;
 
   .bar-contents {
@@ -326,7 +366,7 @@
 
     .chart-left {
       width: calc(60% - 20px);
-      height: 100%;
+      height: calc(100% - 20px);
       margin-right: 20px;
       float: left;
       border: 1px solid #00ffff;
@@ -336,7 +376,7 @@
     .chart-right {
       width: 40%;
       float: left;
-      height: 100%;
+      height: calc(100% - 20px);
       position: relative;
       .chart-bg {
         width: 100%;

--
Gitblit v1.8.0