修改leftcharts2 样式

src/components/baozuo-demo/LeftChart2.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import * as echarts from 'echarts';
 function getRecentSixMonths() {
     const months = [];
     const today = new Date();
@@ -22,7 +23,6 @@ function getRecentSixMonths() {
 
     return months;
 }
-import * as echarts from 'echarts';
 export default {
   name: 'RoseChart',
   props: {
@@ -47,29 +47,35 @@ export default {
       console.log(myChart)
       this.option = {
         title: {
-          text: '月生产情况',
-          subtext: '完成率',
-          subtextStyle:{
-            fontSize:20,
-            fontWight:'bold',
-            color:'#fff'
-          },
+          text: '近半年产量情况',
+          // subtext: '完成率',
+          // subtextStyle:{
+          //   fontSize:20,
+          //   fontWight:'bold',
+          //   color:'#fff'
+          // },
+
           textStyle:{
-            fontSize:25,
+            fontSize:30,
             fontWight:'bold',
             color:'#fff'
           }
         },
+        legend: {
+          icon: 'rect',
+          itemWidth: 20, // 色块宽度
+          itemHeight: 20, // 色块高度
+          itemGap: 40, // 图例之间的间距
+          data: this.dataType == '整机' ? ['整机线'] : ['整机', '机芯', '盖板'],
+          textStyle: {
+            color: '#fff',
+            fontSize:30,
+            fontWight:'bold'
+          }
+        },
         tooltip: {
           trigger: 'axis',
         },
-        legend: {
-          data: this.dataType == '整机' ?['机芯1线', '机芯2线', '盖板线'] : ['整机线'],
-          textStyle:{
-            fontSize:25,
-            color:'#fff'
-          }
-        },
         toolbox: { 
         },
         calculable: true,
@@ -82,7 +88,7 @@ export default {
               }
             },
             axisLabel: {
-            fontSize: 20, // 设置 Y 轴字体大小
+            fontSize: 30, // 设置 Y 轴字体大小
             color: '#fff' // 可选：设置字体颜色
           },
             // prettier-ignore
@@ -98,16 +104,21 @@ export default {
               }
             },
             axisLabel: {
-            fontSize: 20, // 设置 Y 轴字体大小
+            fontSize: 30, // 设置 Y 轴字体大小
             color: '#fff' // 可选：设置字体颜色
           },
           }
         ],
+        grid: {
+          left: '3%',
+          right: '7%',
+          bottom: '3%',
+          containLabel: true
+        },
         series:
-        this.dataType == '整机' ?
-        [
+        this.dataType == '整机' ?[
           {
-            name: '整机线',
+            name: '整机',
             type: 'bar',
             data: [
             75, 65, 68, 69, 40, 82
@@ -122,10 +133,9 @@ export default {
               data: [{ type: 'average', name: 'Avg' }]
             }
           }
-        ]:
-        [
+        ]:[
           {
-            name: '机芯1线',
+            name: '整机',
             type: 'bar',
             data: [
             75, 65, 68, 69, 40, 82
@@ -136,41 +146,41 @@ export default {
                 { type: 'min', name: 'Min' }
               ]
             },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
-            }
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
           },
           {
-            name: '机芯2线',
+            name: '机芯',
             type: 'bar',
             data: [
-              70, 75, 88, 85, 97, 85, 75, 78, 59, 80, 82, 63
+              70, 75, 88, 85, 97, 85,
             ],
             markPoint: {
               data: [
-                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
-                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
               ]
             },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
-            }
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
           },
           {
-            name: '盖板线',
+            name: '盖板',
             type: 'bar',
             data: [
-              80, 85, 78, 75, 67, 45, 55, 68, 49, 50, 72, 93
+              80, 85, 78, 75, 67, 45
             ],
             markPoint: {
               data: [
-                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
-                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
               ]
             },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
-            }
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
           }
         ]
       };