From f96854fa2919c6821c7d420b6409dbd44f18df04 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 25 Nov 2022 11:09:24 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E8=B4=A8=E9=87=8Ftooltip=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/TechyBar.vue            | 51 ++++++++++++++-----
 .../components/charts/newLineStack.vue        |  2 +-
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/views/QualityManager/components/charts/TechyBar.vue b/src/views/QualityManager/components/charts/TechyBar.vue
index 09c043c..8884863 100644
--- a/src/views/QualityManager/components/charts/TechyBar.vue
+++ b/src/views/QualityManager/components/charts/TechyBar.vue
@@ -162,6 +162,29 @@ export default {
           top: 72,
           bottom: 28
         },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          padding: 10,
+          extraCssText: 'width: 128px !important; height: auto !important;',
+          formatter: params => {
+            const [, a, , , b] = params 
+            return `<div style="display: flex; flex-direction: column; gap: 2px; align-items: flex-start; ">
+                      <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${a.name}</h2>
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="width: 12px; height: 12px; background: linear-gradient(to top, ${a.color.colorStops[0].color}, transparent);"></span>
+                        <span style="font-size: calc(10px * var(--beilv));">${a.seriesName}: ${a.data}</span>
+                      </div>
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="width: 12px; height: 12px; background: linear-gradient(to top, ${b.color.colorStops[0].color}, transparent);"></span>
+                        <span style="font-size: calc(10px * var(--beilv));">${b.seriesName}: ${b.data}</span>
+                      </div>
+                    </div>`
+          }
+        },
         xAxis: {
           type: 'category',
           axisTick: {
@@ -176,20 +199,20 @@ export default {
             color: '#fff8',
             fontSize: 12
           },
-          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'],
-          axisPointer: {
-            show: true,
-            type: 'shadow',
-            label: {
-              show: true,
-              formatter: params => {
-                let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
-                let v = [`<${info_arr[0].name}>详细数据: \n`]
-                info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
-                return v.join('\n')
-              }
-            }
-          }
+          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
+          // axisPointer: {
+          //   show: true,
+          //   type: 'shadow',
+          //   label: {
+          //     show: true,
+          //     formatter: params => {
+          //       let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
+          //       let v = [`<${info_arr[0].name}>详细数据: \n`]
+          //       info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
+          //       return v.join('\n')
+          //     }
+          //   }
+          // }
         },
         yAxis: {
           type: 'value',
diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue
index 567b187..3fe64a0 100644
--- a/src/views/QualityManager/components/charts/newLineStack.vue
+++ b/src/views/QualityManager/components/charts/newLineStack.vue
@@ -34,7 +34,7 @@ class ChartOption {
       trigger: 'axis',
       extraCssText: 'width: 180px !important; ',
       axisPointer: {
-        type: 'cross',
+        type: 'line',
         label: {
           backgroundColor: '#6a7985'
         }