From 1dbdda3517a01851d8d9894b22e61aa4462b541c Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 07 十二月 2023 19:16:36 +0800
Subject: [PATCH] tooltip值优化

---
 src/views/cockpitPage/components/BarChart.vue |   98 +++++++++++++++++++++++++++++++++---------------
 1 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue
index 3ca2077..f4c4554 100644
--- a/src/views/cockpitPage/components/BarChart.vue
+++ b/src/views/cockpitPage/components/BarChart.vue
@@ -4,7 +4,7 @@
     <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">姝ｅ搧鐜囷細{{ chartData.rate }}%</div>
       </div>
       <div class="chart" ref="chart"></div>
     </div>
@@ -15,42 +15,70 @@
 import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
 //寮曞叆echart
 import * as echarts from "echarts";
+let myChart;
 export default {
   components: {
     ChartTitle,
   },
-  props: {},
+  props: {
+    chartData: {
+      type: Object,
+      require: true,
+      default: () => {
+        return {
+          total: 0,
+          rate: "0",
+          datax: [],
+          datay: [],
+          datay2: [],
+        };
+      },
+    },
+  },
   data() {
     return {
-      chartData: {
-        total: 1000,
-        rate: "99%",
-        datax: [
-          "绗竴杞﹂棿",
-          "绗簩杞﹂棿",
-          "绗笁杞﹂棿",
-          "绗洓杞﹂棿",
-          "绗簲杞﹂棿",
-          "绗叚杞﹂棿",
-          "绗竷杞﹂棿",
-          "绗叓杞﹂棿",
-          "绗節杞﹂棿",
-        ],
-        datay: [120, 200, 150, 180, 170, 150, 130, 180, 140],
-        datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40],
-      },
+      // chartData: {
+      //   total: 1000,
+      //   rate: "99%",
+      //   datax: [
+      //     "绗竴杞﹂棿",
+      //     "绗簩杞﹂棿",
+      //     "绗笁杞﹂棿",
+      //     "绗洓杞﹂棿",
+      //     "绗簲杞﹂棿",
+      //     "绗叚杞﹂棿",
+      //     "绗竷杞﹂棿",
+      //     "绗叓杞﹂棿",
+      //     "绗節杞﹂棿",
+      //   ],
+      //   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,
     };
   },
-  mounted() {
-    this.pieChart("chart", this.chartData);
+  watch: {
+    "chartData.datay"(val) {
+      this.startValue = 0;
+      this.endValue = 5;
+      this.pieChart("chart", this.chartData);
+    },
   },
-  watch: {},
+  mounted() {
+    // this.pieChart("chart", this.chartData);
+  },
   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) {
@@ -88,7 +116,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>";
@@ -105,8 +134,11 @@
               type: "inside",
               xAxisIndex: 0,
               show: false,
-              startValue: 0, // 浠庡ご寮�濮�
-              endValue: 5, // 涓�娆℃�у睍绀哄嚑涓�
+              startValue: that.startValue, // 浠庡ご寮�濮�
+              endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓�
+              zoomOnMouseWheel: false,
+              moveOnMouseWheel: true,
+              moveOnMouseMove: true,
             },
           ],
           legend: {
@@ -145,11 +177,16 @@
                 },
               },
               axisLabel: {
-                // rotate:45,
                 margin: 10,
                 show: true,
                 textStyle: {
                   color: "#00FFFF",
+                },
+                formatter: function (value) {
+                  if (value.length > 4) {
+                    return `${value.slice(0, 3)}...`;
+                  }
+                  return value;
                 },
               },
               data: data.datax ? data.datax : [],
@@ -159,7 +196,6 @@
             {
               type: "value",
               name: "",
-              // min: data.yAxis[0].min?data.yAxis.min:0,
               minInterval: 1, //鍧愭爣杞存槸鏁存暟
               max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3
               interval:
@@ -254,11 +290,11 @@
             },
           ],
         };
-        setInterval(function () {
+        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