src/views/3DOverview/components/DianChart.vue

@@ -46,7 +46,23 @@ class ChartOption {
       },
       padding: 10,
       backgroundColor: 'rgba(13, 29, 53, 0.8)',
-      extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
+      extraCssText: 'width: auto !important; height: auto !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[2]
+              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+            </div>
+            `
+      }
     }
 
     this.xAxis = {

src/views/3DOverview/components/RightContentProductRate.vue

@@ -55,8 +55,23 @@ class ChartOption {
       },
       padding: 10,
       backgroundColor: 'rgba(13, 29, 53, 0.8)',
-      formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
+      // formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
-      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                params[0].axisValue
+              }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+      }
     }
 
     let d = new Date()

src/views/3DOverview/components/RightContentRealtimeProduction.vue

@@ -55,7 +55,26 @@ class ChartOption {
       },
       padding: 10,
       backgroundColor: 'rgba(13, 29, 53, 0.8)',
-      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
+      extraCssText: 'width: calc(100px*var(--beilv)) !important;',
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[2]
+              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[3]
+              }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
+            </div>
+            `
+      }
     }
 
     let d = new Date()

src/views/QualityManager/components/charts/newLineStack.vue

@@ -41,6 +41,19 @@ class ChartOption {
           type: 'dotted',
           color: '#7BFFFB'
         }
+      },
+      formatter: params => {
+        return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
       }
     }
 
@@ -288,9 +301,15 @@ export default {
             const currentMonth = new Date().getMonth() + 1
             return `
             <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
-              <h2 style="margin: 0; font-size: calc(14px * var(--beilv)); ">${currentMonth}-${params[0].axisValue}</h2>
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${currentMonth}-${
-              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[0]}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              params[0].axisValue
-              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[1]}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
             </div>
             `
           }
@@ -309,7 +328,21 @@ export default {
               color: '#7BFFFB'
             }
           },
-          formatter: undefined
+          formatter: params => {
+            return `
+            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+                params[0].axisValue
+              }</h2>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[0]
+              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
+                this.configs.color[1]
+              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+            </div>
+            `
+          }
         }
       }