update 基本完成质量管理

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

@@ -88,11 +88,11 @@ export default {
         title: {
           textAlign: 'center',
           left: '59%',
-          top: '35%',
+          top: '30%',
           text: '33039',
           textStyle: {
             color: '#fff',
-            fontSize: 26,
+            fontSize: 22,
             fontWeight: 'normal'
           },
           subtext: '总数',
@@ -103,8 +103,9 @@ export default {
           }
         },
         legend: {
-          top: '20%',
-          bottom: '25%',
+          height: '100%',
+          align: 'center',
+          verticalAlign: 'center',
           left: 0,
           orient: 'vertical',
           icon: 'none',
@@ -207,11 +208,11 @@ export default {
                 return `{${colorMap[params.dataIndex]}|${params.percent} %}`
               },
               rich: {
-                first: { color: '#FB418C', fontSize: 12 },
-                second: { color: '#DDB112', fontSize: 12 },
-                third: { color: '#1A99FF', fontSize: 12 },
-                fourth: { color: '#A691FF', fontSize: 12 },
-                fifth: { color: '#49FBD6', fontSize: 12 }
+                first: { color: '#FB418C', fontSize: 10 },
+                second: { color: '#DDB112', fontSize: 10 },
+                third: { color: '#1A99FF', fontSize: 10 },
+                fourth: { color: '#A691FF', fontSize: 10 },
+                fifth: { color: '#49FBD6', fontSize: 10 }
               }
             },
             itemStyle: {

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

@@ -52,12 +52,13 @@ export default {
   },
   mounted() {
     if (this.dataList.length > 1) {
+      const barWidth = 400 / 2 / this.dataList[0].data.length
       this.series = [
         {
           // 柱体
           name: this.dataList[0].name,
           type: 'bar',
-          barWidth: 30,
+          barWidth,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[0].topColor },
@@ -70,7 +71,7 @@ export default {
           // 柱顶
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          barWidth: 26,
+          barWidth,
           symbol: 'diamond',
           symbolPosition: 'end',
           symbolOffset: [0, '-50%'],
@@ -83,7 +84,7 @@ export default {
           // 柱底
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          barWidth: 26,
+          barWidth,
           symbol: 'diamond',
           symbolOffset: [0, '50%'],
           symbolSize: [30, 15],
@@ -94,7 +95,7 @@ export default {
           // 柱体
           name: this.dataList[1].name,
           type: 'bar',
-          barWidth: 30,
+          barWidth,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[1].topColor },
@@ -107,7 +108,7 @@ export default {
           // 柱顶
           name: this.dataList[1].name,
           type: 'pictorialBar',
-          barWidth: 26,
+          barWidth,
           symbol: 'diamond',
           symbolPosition: 'end',
           symbolOffset: [0, '-50%'],
@@ -120,7 +121,7 @@ export default {
           // 柱底
           name: this.dataList[1].name,
           type: 'pictorialBar',
-          barWidth: 26,
+          barWidth,
           symbol: 'diamond',
           symbolOffset: [0, '50%'],
           symbolSize: [30, 15],
@@ -272,30 +273,30 @@ export default {
 }
 
 .fault-category-chart >>> div::before {
-/* .fault-category-chart::before { */
+  /* .fault-category-chart::before { */
   content: '';
   position: absolute;
-  /* bottom: calc(100vh/1920 * 80);
-  left: calc(100vw/1920 * 48); */
-  /* bottom: calc(10% + 100vh/1920 * 28); */
-  bottom: 25px;
+  bottom: calc(30px * var(--beilv));
   left: 9%;
-  height: 52px;
+  height: calc(32px * var(--beilv));
   width: 90%;
   background: linear-gradient(to top, #31a2ff6d, transparent);
-  transform: skew(-45deg);
+  transform: skew(-35deg);
   z-index: 0;
 }
 .process-fault-chart >>> div::before {
-/* .process-fault-chart::before { */
+  /* .process-fault-chart::before { */
   content: '';
   position: absolute;
-  bottom: 26px;
-  left: 10%;
-  height: 48px;
+  bottom: 12%;
+  left: 8%;
+  height: calc(32px * var(--beilv));
+  /* bottom: calc(20px * var(--beilv));
+  left: calc(36px * var(--beilv));
+  height: calc(32px * var(--beilv)); */
   width: 90%;
   background: linear-gradient(to top, #49fbd789, transparent);
-  transform: skew(-45deg);
+  transform: skew(-35deg);
   z-index: 0;
 }
 </style>