update 质量tooltip

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

@@ -11,19 +11,19 @@ class ChartOption {
   constructor() {
     this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
 
-    // this.legend = {
-    //   top: 11,
-    //   right: 32,
-    //   itemWidth: 8,
-    //   itemHeight: 8,
-    //   textStyle: {
-    //     color: '#fff9',
-    //     fontSize: 10
-    //   }
-    // }
+    this.legend = {
+      top: 14,
+      right: 22,
+      itemWidth: 6,
+      itemHeight: 8,
+      textStyle: {
+        color: '#DFF1FECC',
+        fontSize: 12
+      }
+    }
 
     this.grid = {
-      top: 64,
+      top: 72,
       left: 12,
       right: 28,
       bottom: 20,
@@ -44,6 +44,7 @@ class ChartOption {
       }
     }
 
+    let today = new Date()
     this.xAxis = {
       type: 'category',
       boundaryGap: false,
@@ -62,13 +63,15 @@ class ChartOption {
       },
       data:
         this.mode === 'month'
-          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
           : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
     }
 
     this.yAxis = [
       {
-        name: '成品率          ',
+        name: '成品率            ',
         type: 'value',
         min: '80',
         splitNumber: 4,
@@ -259,11 +262,57 @@ export default {
   methods: {
     refreshData() {
       // update xaxis
+      let today = new Date()
       this.configs.xAxis.data =
         this.mode === 'month'
-          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
+              .fill(1)
+              .map((_, idx) => idx + 1)
           : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 
+      // update tooltip
+      if (this.mode === 'month') {
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          formatter: params => {
+            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>
+              <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>
+            `
+          }
+        }
+      } else if (this.mode === 'day') {
+        this.configs.tooltip = null
+        this.configs.tooltip = {
+          trigger: 'axis',
+          padding: 10,
+          backgroundColor: 'rgba(13, 29, 53, 0.8)',
+          extraCssText: 'width: 180px !important; ',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              type: 'dotted',
+              color: '#7BFFFB'
+            }
+          },
+          formatter: undefined
+        } 
+      }
+
       // update series
       this.configs.series.forEach(item => {
         item.data =