修bug&更改散点图样式

src/views/qualityManagement/components/defectScatterPlotChart.vue

@@ -22,19 +22,28 @@ export default {
     return {
       chartDom: '',
       chart: '',
-      chartHeight: tableHeight(480)
+      chartHeight: tableHeight(446)
     }
   },
   mounted() {
-    this.chartDom = document.getElementById('defectScatterPlotChart')
-    this.chart = echarts.init(this.chartDom)
-    this.getChart()
     window.addEventListener('resize', () => {
-      this.chartHeight = tableHeight(480)
+      this.chartHeight = tableHeight(446)
     })
+    setTimeout(() => {
+      this.getChart()
+    }, 20)
   },
   methods: {
     getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('defectScatterPlotChart')
+      this.chart = echarts.init(this.chartDom)
       const dataS = [
         [1, 55, 9, 56, 0.46, 18, 6, '良'],
         [2, 25, 11, 21, 0.65, 34, 9, '优'],
@@ -141,8 +150,16 @@ export default {
           left: 0,
           data: ['S', 'M', 'L'],
           textStyle: {
-            fontSize: 12
-          }
+            fontSize: 9
+          },
+          itemWidth: 10 // 图例宽度
+        },
+        grid: {
+          x: 60,
+          y: 60,
+          x2: 10,
+          y2: 60,
+          borderWidth: 1
         },
         xAxis: {
           type: 'value',
@@ -176,17 +193,20 @@ export default {
           {
             name: 'S',
             type: 'scatter',
-            data: dataS
+            data: dataS,
+            symbolSize: 5
           },
           {
             name: 'M',
             type: 'scatter',
-            data: dataM
+            data: dataM,
+            symbolSize: 5
           },
           {
             name: 'L',
             type: 'scatter',
-            data: dataL
+            data: dataL,
+            symbolSize: 5
           }
         ]
       }