From da4d9e70d2c37f59a365b0fb88ad70e8c1ba79b4 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 11 十二月 2023 10:25:01 +0800
Subject: [PATCH] 机器开机率优化

---
 src/views/cockpitPage/components/BarChart.vue |   61 +++++++++++++++++-------------
 1 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue
index 5f9262d..0cf8a5c 100644
--- a/src/views/cockpitPage/components/BarChart.vue
+++ b/src/views/cockpitPage/components/BarChart.vue
@@ -3,8 +3,8 @@
     <ChartTitle name="杞﹂棿姝ｅ搧鐜�"></ChartTitle>
     <div class="bar-contents">
       <div class="bar-total">
-        <div class="bar-item">褰撴棩鍚堣鐢熶骇锛歿{ chartData.total }}</div>
-        <div class="bar-item">姝ｅ搧鐜囷細{{ chartData.rate }}</div>
+        <div class="bar-item">7鏃ュ悎璁＄敓浜э細{{ chartData.total }}</div>
+        <div class="bar-item">姝ｅ搧鐜囷細{{ chartData.rate }}%</div>
       </div>
       <div class="chart" ref="chart"></div>
     </div>
@@ -54,11 +54,15 @@
       //   datay: [120, 200, 150, 180, 170, 150, 130, 180, 140],
       //   datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40],
       // },
+      startValue: 0,
+      endValue: 5,
       chartTimer: null,
     };
   },
   watch: {
     "chartData.datay"(val) {
+      this.startValue = 0;
+      this.endValue = 5;
       this.pieChart("chart", this.chartData);
     },
   },
@@ -77,9 +81,10 @@
       myChart = echarts.init(chartDom);
       let option;
       let lineColor = "#35ddc74d";
+      let spirit = "/cockpitPage/order-bg.png";
       if (data) {
         option = {
-          color: ["#dcb018", "#00FFFF"],
+          color: ["#fccd1d", "#00FFFF"],
           tooltip: {
             trigger: "axis",
             axisPointer: {
@@ -112,7 +117,8 @@
                 '<span style=width:70px;display:inline-block">' +
                 "姝ｅ搧鐜�" +
                 "</span>&nbsp;" +
-                data.rate;
+                data.rate +
+                "%";
               list.push(lastString);
               listItem = list.join("<br>");
               return '<div class="showBox">' + listItem + "</div>";
@@ -129,8 +135,11 @@
               type: "inside",
               xAxisIndex: 0,
               show: false,
-              startValue: 0, // 浠庡ご寮�濮�
-              endValue: 5, // 涓�娆℃�у睍绀哄嚑涓�
+              startValue: that.startValue, // 浠庡ご寮�濮�
+              endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓�
+              zoomOnMouseWheel: false,
+              moveOnMouseWheel: true,
+              moveOnMouseMove: true,
             },
           ],
           legend: {
@@ -144,7 +153,7 @@
                 name: "姝ｅ搧鏁伴噺",
                 icon: "circle",
                 textStyle: {
-                  color: "#dcb018",
+                  color: "#fccd1d",
                 },
               },
               {
@@ -175,8 +184,8 @@
                   color: "#00FFFF",
                 },
                 formatter: function (value) {
-                  if (value.length > 5) {
-                    return `${value.slice(0, 4)}...`;
+                  if (value.length > 4) {
+                    return `${value.slice(0, 3)}...`;
                   }
                   return value;
                 },
@@ -257,27 +266,25 @@
           ],
           series: [
             {
-              type: "bar",
+              type: "pictorialBar",
               name: "姝ｅ搧鏁伴噺",
-              barWidth: "15",
-              itemStyle: {
-                normal: {
-                  //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
-                  barBorderRadius: [4, 4, 0, 0],
-                },
-              },
+              symbol: spirit,
+              symbolRepeat: true,
+              symbolMargin: "25%",
+              symbolClip: true,
+              symbolSize: [17, 4],
+              barCategoryGap: "40%",
               data: data.datay,
             },
             {
-              type: "bar",
+              type: "pictorialBar",
+              barGap: "10%",
               name: "娆″搧鏁伴噺",
-              barWidth: "15",
-              itemStyle: {
-                normal: {
-                  //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
-                  barBorderRadius: [4, 4, 0, 0],
-                },
-              },
+              symbol: spirit,
+              symbolRepeat: true,
+              symbolMargin: "25%",
+              symbolClip: true,
+              symbolSize: [17, 4],
               data: data.datay2,
             },
           ],
@@ -285,8 +292,8 @@
         this.chartTimer = setInterval(function () {
           // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨��
           if (option.dataZoom[0].endValue == that.chartData.datay.length) {
-            option.dataZoom[0].startValue = 0;
-            option.dataZoom[0].endValue = 5;
+            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