添加图表

src/views/report/qualityDefectsStatisticalAnalysisReport/index.vue

@@ -135,6 +135,9 @@
           </el-table-column>
         </el-table>
       </el-form>
+      <div class="chart1">
+        <Chart ref="chart1"></Chart>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancel">关 闭</el-button>
       </div>
@@ -150,10 +153,16 @@ import {
 import { findProductLineList } from '@//api/base/productLine'
 import { parseTime } from '@//utils/ruoyi'
 import { getCustomData } from '@//api/base/customData'
+import Chart from "@/components/board/Chart";
+import * as echarts from "echarts";
 
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
   name: 'ReportInfo',
   dicts: ['is_flag'],
+  components: {
+    Chart
+  },
   data() {
     return {
       // 遮罩层
@@ -305,6 +314,76 @@ export default {
         this.form.STATION_NAME = row.STATION_NAME
         this.open = true
         this.title = '缺陷明细'
+        this.$refs.chart1.setData({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            left: "0",
+            right: "4%",
+            bottom: "0",
+            top: 20,
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data:response.data.map(val=>val.QUALITY_DEFECT_NAME),
+              axisTick: {
+                alignWithLabel: true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            {
+              name: '缺陷数量',
+              type: "bar",
+              barWidth: '30%',
+              barMaxWidth: 50,
+              label: {
+                normal: {
+                  show: true,
+                  position: "top",
+                  formatter:(e)=>{
+                    if(e.data === 0){
+                      return ''
+                    }else{}
+                    return e.data
+                  },
+                  textStyle: {
+                    color: "#a8aab0",
+                    fontStyle: "normal",
+                    fontFamily: "微软雅黑",
+                    fontSize: 0.75 * vw,
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: "#4adfff",
+                    },
+                    {
+                      offset: 1,
+                      color: "#3d7aff",
+                    },
+                  ]),
+                },
+              },
+              data: response.data.map(val=>val.SEQ),
+            }
+          ]
+        })
       })
     },
 
@@ -332,3 +411,10 @@ export default {
   }
 }
 </script>
+<style>
+.chart1{
+  width: 100%;
+  height: 200px;
+  margin-top: 12px;
+}
+</style>