From a959fb3abe2369e673bc6570118b4fa5cfc1cc59 Mon Sep 17 00:00:00 2001
From: zhaoxiaolin <khd@123>
Date: Thu, 21 Dec 2023 15:59:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A8=E9=87=8F=E8=B4=A8=E6=A3=80+=E5=B7=A5?=
 =?UTF-8?q?=E5=8D=95=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2=E5=8A=A0=E5=85=A5?=
 =?UTF-8?q?=E6=AF=8D=E5=8D=95=E4=BF=A1=E6=81=AF+=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/QcChartLine.vue | 124 ++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 src/views/dashboard/QcChartLine.vue

diff --git a/src/views/dashboard/QcChartLine.vue b/src/views/dashboard/QcChartLine.vue
new file mode 100644
index 0000000..cd19a7e
--- /dev/null
+++ b/src/views/dashboard/QcChartLine.vue
@@ -0,0 +1,124 @@
+
+<template>
+  <div>
+    <div ref="chart" style="width:100%;height:300px"></div>
+  </div>
+
+</template>
+
+
+<script>
+  import * as echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+  import {getLineQcData} from '@/api/mes/reportWork'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '99%'
+      },
+      height: {
+        type: String,
+        default: '260px'
+      },
+      autoResize: {
+        type: Boolean,
+        default: true
+      },
+      chartData: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+
+    mounted() {
+      this.getLineQcInfo();
+    },
+
+    methods: {
+      getLineQcInfo(){
+        getLineQcData().then(returnData => {
+           const chart = this.$refs.chart
+            if (chart) {
+              const myChart = this.$echarts.init(chart)
+              const option = {
+                tooltip: {
+                  trigger: 'axis'
+                },
+                legend: {
+                  data: returnData.seriesNames
+                },
+                grid: {
+                  left: '3%',
+                  right: '4%',
+                  bottom: '3%',
+                  containLabel: true
+                },
+                /**
+                toolbox: {
+                  feature: {
+                    saveAsImage: {}
+                  }
+                },**/
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    formatter: function (params) {
+                        let result="";
+                        for (let i = 0; i < params.length; i++) {
+                                if(params[i].data!=0){
+                                    result+=params[i].marker + params[i].seriesName + '：' + params[i].data + '%<br>'
+                                }
+                        }
+                        return params[0].name + '<br/>'
+                            + result
+
+                    }
+
+                },
+                xAxis: {
+                  type: 'category',
+                  boundaryGap: false,
+                  data: returnData.xAxisDatas
+                },
+                yAxis: {
+                  type: 'value',
+                  axisLabel: {
+                    formatter: '{value} %'
+                  }
+                },
+                series: returnData.seriesDatas
+
+              }
+              myChart.setOption(option)
+              window.addEventListener("resize", function() {
+                myChart.resize()
+              })
+            }
+            this.$on('hook:destroyed',()=>{
+              window.removeEventListener("resize", function() {
+                myChart.resize();
+              });
+            })
+        });
+      }
+    }
+  }
+</script>
+
+
+