src/views/QualityManager/components/TechyAnalysisHeader.vue

@@ -2,12 +2,12 @@
   <div class="techy-analysis-header">
     <template v-if="type === 'special'">
       <div
-        style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
+        style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
       >
         <div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
 
         <div style="flex: 1; white-space: nowrap; overflow: hidden;">
-          <span class="top-icon">
+          <span class="top-icon" style="transform: skewX(-32deg); ">
             <svg
               width="100%"
               height="100%"
@@ -55,10 +55,10 @@
               </g>
             </svg>
           </span>
-          <span class="techy-analysis-header__title">
+          <span class="techy-analysis-header__title" style="display: inline-block; transform: skewX(-32deg); ">
             <slot />
           </span>
-          <span class="top-icon">
+          <span class="top-icon" style="transform: skewX(-32deg); ">
             <svg
               width="100%"
               height="100%"
@@ -108,9 +108,12 @@
           </span>
         </div>
 
-        <div class="legend" style="background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));">
+        <div
-          <div class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div>
+          class="legend legend-right"
-          <div class="legend-item plb">产线B</div>
+          style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
+        >
+          <div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div>
+          <div class="legend-item plb" style=" ">产线B</div>
         </div>
       </div>
     </template>

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

@@ -142,7 +142,7 @@ export default {
           show: true,
           position: 'top',
           color: '#fff8',
-          fontSize: 8,
+          fontSize: 10,
           offset: [0, 6]
         }
       }
@@ -174,9 +174,22 @@ export default {
           },
           axisLabel: {
             color: '#fff8',
-            fontSize: 10
+            fontSize: 12
           },
-          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
+          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',