新增模块

src/views/report/yearData/lineChart.vue

@@ -2,32 +2,31 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: zhp
- * @LastEditTime: 2024-04-12 16:50:42
+ * @LastEditTime: 2024-04-16 09:58:08
  * @Description:
 -->
 <template>
-  <div>
+  <!-- <div> -->
     <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
-    <div :id="id" :class="className" :style="{  height: '400px', width: width }" />
-  </div>
+    <div :id="id" :class="className" :style="{ height: height, width: width }" />
+  <!-- </div> -->
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import 'echarts/theme/macarons' // echarts theme
-// import resize from './mixins/resize'
-
+import resize from '@/mixins/resize'
 export default {
   name: 'OverviewBar',
-  // mixins: [resize],
+  mixins: [resize],
   props: {
     id: {
       type: String,
-      default: 'OverviewLine'
+      default: 'reportChart'
     },
     className: {
       type: String,
-      default: 'chart'
+      default: 'reportChart'
     },
     width: {
       type: String,
@@ -39,7 +38,7 @@ export default {
     },
     height: {
       type: String,
-      default: '300px'
+      default: '30vh'
     },
     legendPosition: {
       type: String,
@@ -60,9 +59,9 @@ export default {
     }
   },
   mounted() {
-    // this.$nextTick(() => {
-    //   this.initChart()
-    // })
+    this.$nextTick(() => {
+      this.initChart()
+    })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -75,6 +74,7 @@ export default {
     initChart() {
       console.log(1111)
       this.chart = echarts.init(document.getElementById(this.id))
+      console.log(this.$parent);
       this.chart.setOption({
         title: {
           text: '',
@@ -83,8 +83,15 @@ export default {
         tooltip: {
           trigger: 'axis'
         },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         legend: {
-          data: ['Rainfall', 'Evaporation']
+          data: ['FTO投入', '封装材料成本', '人均产量', '产品产量'],
+          right: '90px',
+          top: '0%',
+          icon: 'rect',
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 40,
         },
         // toolbox: {
         //   show: true,
@@ -109,44 +116,72 @@ export default {
           }
         ],
         grid: {
-          top: '100px',
-          left: "3%",
-          right: "10%",
-          bottom: "3%",
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
           containLabel: true
         },
         series: [
           {
-            name: 'Rainfall',
+            name: 'FTO投入',
             type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(99, 189, 255, 1)' //改变折线颜色
+                }
+              }
+            },
             data: [
               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
             ],
-            markPoint: {
-              data: [
-                { type: 'max', name: 'Max' },
-                { type: 'min', name: 'Min' }
-              ]
-            },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
-            }
           },
           {
-            name: 'Evaporation',
+            name: '封装材料成本',
             type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(142, 240, 171, 1)' //改变折线颜色
+                }
+              }
+            },
             data: [
               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
             ],
-            markPoint: {
-              data: [
-                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
-                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
-              ]
+          },
+          {
+            name: '人均产量',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(40, 138, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(40, 138, 255, 1)' //改变折线颜色
+                }
+              }
             },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
-            }
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          },
+          {
+            name: '产品产量',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(113, 100, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(113, 100, 255, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
           }
         ]
       })
@@ -156,7 +191,10 @@ export default {
 </script>
 
 <style scoped>
-.chart {
-  margin-top: -3em
-}
+/* .reportChart {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 10px;
+} */
 </style>